react-native-modalui ·

react-native-modalui provide you react-native modal with more animation type.

Features(#features)
Preview(#preview)
Usage(#usage)
API Reference(#api-reference)
Example(#example)

Features

react-native build-in modal provide only few animation type,and once you can only use one modal,but in some condition, we need more then one modal.the react-native-modalui can support this condition,and provide you more animation type.

Preview

Usage

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Modal from 'react-native-modalui';

export default class App extends Component<{}> {
  constructor(...props){
    super(...props);
    this.state = {
      isVisible:false,
      animationType:'none'
    }
  }
  _showModal=(animationType)=>{
    this.setState({isVisible:true,animationType})
  }
  _hideModal=()=>{
    this.setState({isVisible:false})
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style = {styles.button}
          onPress = {()=>this._showModal('slideLeft')}>
          <Text>FROM LEFT</Text>
        </TouchableOpacity>
        <Modal 
          style={styles.container}
          animationType = {this.state.animationType}
          onBackdropPress = {this._hideModal}
          isVisible = {this.state.isVisible}>
        <TouchableOpacity 
          style = {styles.button}
          onPress = {this._hideModal}>
          <Text>HIDE</Text>
        </TouchableOpacity>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button:{
    height:60,
    width:120,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#667823'
  },
  text:{
    color:'#333333'
  }
});

API Reference

props

Name	Type	Default	Description
animationType	string	'slideUp'	animation type
easing	object	Easing.ease	animation timing function
duration	number	200	animation duration
onBackButtonPress	func	() => null	Called when the Android back button is pressed
onBackdropPress	func	() => null	Called when the backdrop is pressed
isVisible	bool	REQUIRED	Show the modal?
onModalShow	func	() => null	Called when the modal is completely visible
onModalHide	func	() => null	Called when the modal is completely hidden
style	any	null	Style applied to the modal

Example

cd example && npm install

now,you can run the example in the example directory.