Package Exports

react-native-modalui

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-modalui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.