import React from 'react';
import {View, Button, Text, TouchableOpacity} from 'react-native';

import SlidingUpPanel from 'rn-sliding-up-panel';

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  }
}

class MyComponent extends React.Component {
  state = {
    visible: false
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => this.setState({visible: true})}>
          <Text>Show panel</Text>
        </TouchableOpacity>
        <SlidingUpPanel
          ref={c => this._panel = c}
          visible={this.state.visible}
          onRequestClose={() => this.setState({visible: false})}>
          <View style={styles.container}>
            <Text>Here is the content inside panel</Text>
            <Button title='hide' onPress={() => this._panel.transitionTo(0)} />
          </View>
        </SlidingUpPanel>
      </View>
    )
  }
}