Nuanced Pterodactyl Monk
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-native-simple-modalpublic

    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

    import Modal from 'react-native-simple-modal';
     
    <Modal
      open={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'
      }}
      disableOnBackPress={false}>
      </Modal>

    Example

    import React from 'react';
    import {Text, TouchableOpacity, View} from 'react-native';
    import Modal from 'react-native-simple-modal';
     
    export default class App extends React.Component {
      state = {open: false};
     
      modalDidOpen = () => console.log('Modal did open.')
     
      modalDidClose = () => {
        this.setState({open: false});
        console.log('Modal did close.');
      }
     
      moveUp = () => this.setState({offset: -100})
     
      resetPosition = () => this.setState({offset: 0})
     
      openModal = () => this.setState({open: true})
     
      closeModal = () => this.setState({open: false})
     
      render() {
        return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <TouchableOpacity onPress={this.openModal}>
            <Text>Open modal</Text>
          </TouchableOpacity>
          <Modal
            offset={this.state.offset}
            open={this.state.open}
            modalDidOpen={this.modalDidOpen}
            modalDidClose={this.modalDidClose}
            style={{alignItems: 'center'}}>
            <View style={{alignItems: 'center'}}>
              <Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
              <TouchableOpacity
              style={{margin: 5}}
              onPress={this.moveUp}>
                <Text>Move modal up</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{margin: 5}}
                onPress={this.resetPosition}>
                <Text>Reset modal position</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={{margin: 5}}
                onPress={this.closeModal}>
                <Text>Close modal</Text>
              </TouchableOpacity>
            </View>
          </Modal>
        </View>
        );
      }
    }

    install

    npm i react-native-simple-modal

    Downloadsweekly downloads

    545

    version

    8.0.0

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar