import { View, ScrollView, Text, Animated, PanResponder } from 'react-native';
class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            cards: [],
        }
    }


    render() {
        return (
            <View style={{ flex: 1 }}>
                <ScrollView
                    onScroll={this.handleScroll}>
                    <View style={styles.cardContainer}>
                        {this.state.cards}
                    </View>
                </ScrollView>
                <View style={styles.panel}
                    onLayout={this.handleOnLayout}>
                    <Animated.View
                        style={{ ...styles.panelCard }}>
                        <Text>Sample</Text>
                    </Animated.View>
                </View>
            </View>
        )
    }
}


const styles = {
    cardContainer: {
        minHeight: 1000,
        flex: 1,
        backgroundColor: '#f3f3f3'
    },
    panel: {
        position: 'absolute',
        backgroundColor: '#bdbdbd',
        flex: 1,
        maxHeight: 200,
        height: 200,
        bottom: 0,
        left: 0,
        right: 0,
        justifyContent: 'center'
    },
    panelCard: {
        backgroundColor: '#fff',
        elevation: 2,
        height: 150,
        maxHeight: 150,
        borderRadius: 10,
        marginLeft: 10,
        marginRight: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    dropCard: {
        backgroundColor: '#fff',
        height: 150,
        maxHeight: 150,
        elevation: 2,
        borderRadius: 10,
        position: 'absolute',
        left: 10,
        right: 10,
        alignItems: 'center',
        justifyContent: 'center'
    }
}

export default App;