JSPM – react-native-modal@0.1.2

Package Exports

react-native-modal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A <Modal> component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome.

Demo

Add it to your project

Run npm install react-native-modal --save
var Modal = require('react-native-modal');
At the bottom of your app, add the <Modal> element and use its isVisible prop to toggle visibility. It needs to be at the bottom so that it appears above all other components when it is visible.

Usage

'use strict';

var React = require('react-native');
var Modal = require('react-native-modal');
var { AppRegistry, StyleSheet, View, Text } = React;

class App extends React.Component {
  constructor() {
    this.state = {
      isModalOpen: false
    };
  }

  openModal() {
    this.setState({isModalOpen: true});
  }

  closeModal() {
    this.setState({isModalOpen: false});
  }

  render() {
    return (
      <View style={styles.page}>
        <Text onPress={() => this.openModal()}>
          Open Modal.
        </Text>
        <Modal isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
          <Text>Hello world!</Text>
        </Modal>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  page: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 0
  }
});

AppRegistry.registerComponent('App', () => App);

Also take a look on react-native-login for an example usage.

Props

Component accepts several self-descriptive properties:

hideCloseButton (Bool)
hideBackdrop (Bool)
isVisible (Bool)
onClose (Function)
onPressBackdrop (Function) - callback to be fired when the user taps on the backdrop
customCloseButton (React Component)
customShowHandler (Function) - uses a react-tween-state wrapper API in order to show the modal. See example
customHideHandler (Function) - uses a react-tween-state wrapper API in order to hide the modal. See example

MIT Licensed