react-native-simple-modal

A simple JavaScript modal component for React Native. Works on both iOS and Android.

Installation

npm install react-native-simple-modal --save

Usage

See example. Make sure to put the <Modal> at the end of the render function so that it renders above the content! (RN currently doesn't yet have support for z-index).

Properties and their default values

importModalfrom'react-native-simple-modal';<Modalopen={false}offset={0}overlayBackground={'rgba(0, 0, 0, 0.75)'}animationDuration={200}animationTension={40}modalDidOpen={()=>undefined}modalDidClose={()=>undefined}closeOnTouchOutside={true}containerStyle={{justifyContent: 'center'}}modalStyle={{borderRadius: 2,margin: 20,padding: 10,backgroundColor: '#F5F5F5'}}></Modal>

Methods

Deprecated! The usage of these methods is discouraged. Use the properties open and offset instead.

// opens the modalmodalRef.open();// closes the modalmodalRef.close();// can be used to animate a translation of the modal along the Y-axis// useful when for example the modal has a text input and the modal needs to move up so that it's not hidden behind the keyboardmodalRef.animateOffset(number);

Example

importReact,{Component}from'react';importModalfrom'react-native-simple-modal';import{AppRegistry,Text,TouchableOpacity,View}from'react-native';classExampleextendsComponent{constructor(){super();this.state={open: false};}render(){return(<Viewstyle={{flex: 1,justifyContent: 'center',alignItems: 'center'}}><TouchableOpacityonPress={()=>this.setState({open: true})}><Text>Open modal</Text></TouchableOpacity><Modaloffset={this.state.offset}open={this.state.open}modalDidOpen={()=>console.log('modal did open')}modalDidClose={()=>this.setState({open: false})}style={{alignItems: 'center'}}><View><Textstyle={{fontSize: 20,marginBottom: 10}}>Hello world!</Text><TouchableOpacitystyle={{margin: 5}}onPress={()=>this.setState({offset: -100})}><Text>Move modal up</Text></TouchableOpacity><TouchableOpacitystyle={{margin: 5}}onPress={()=>this.setState({offset: 0})}><Text>Reset modal position</Text></TouchableOpacity><TouchableOpacitystyle={{margin: 5}}onPress={()=>this.setState({open: false})}><Text>Close modal</Text></TouchableOpacity></View></Modal></View>);}}AppRegistry.registerComponent('myapp',()=>Example);