rn-popup

React Native Animated Popup

Installation

  npm install rn-popup --save

Usage

 
  const Popup = require('rn-popup');
 
  ...  
 
  render() {
    return (
      <View style={styles.container}>
        <Button onPress={() => this._openPopUp()} buttonType='primary'>Show</Button>
        <Popup isVisible={this.state.isVisible} duration={800} entry={'bottom'} exit={'top'}>
          <Text style={styles.welcome}>Its a Popup!</Text>
          <Text style={styles.instructions}>You can add text</Text>
          <Image style={styles.image} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
          <Text style={styles.instructions}>And images too!</Text>
          <Button textStyle={{textAlign: 'center'}} onPress={() => this._closePopUp()} buttonType='primary'>Close</Button>
        </Popup>
      </View>
    );
  }
 
  _openPopUp() {
    this.setState({
      isVisible: true
    });
  }
 
  _closePopUp() {
    this.setState({
      isVisible: false
    });
  }
 
  

Props

• isVisible (bool) - Value to show/hide popup.
• duration (number) - Duration in milliseconds for animation. Defaults to 800.
• entry (string) - Entry position for showing popup. This can be 'top' or 'bottom' defaults to 'top'.
• exit (string) - Exit position for hiding popup. This can be 'top' or 'bottom' defaults to 'bottom'.