@neidercode/react-native-modal

react-native-modal

The aim of react-native-modal is to handle multiple modals opening one after the other and independent of each other.

React native older version package

@kalwani/react-native-modal

Description

If there are multiple modals in your application ( in different components or same ) that do not need to communicate with each other but could be in a state where one modal is already visible to the user and the second could open itself causing unwanted behaviour, in such a scenario the library will close the first modal ( that was already open ) and show the second modal. If a third modal opens while the second is visible to the user, it'll close the second modal and show the third.

Setup

This library is available on npm, install it with: npm i @neiderruiz/react-native-modal

Usage

react-native-modal is simply a powerful extension on top of react-native's modal component, hence it works in a similar fashion

1. Import react-native-modal:

import Modal from "@neiderruiz/react-native-modal";

2. Simply show/hide the modal by changing the isVisible prop to true/false. The onModalHide is the function which will execute when the modal closes (either due to it's own state change or due to some other modal forcing it to close), both these props are required:

state = { showModal: true }

render () {
  closeModal = () => {
    this.setState({ showModal: false })
  }
  
  return (
    <View>
      <Modal isVisible={showModal} onModalHide={this.closeModal} >
        <View style={{ flex: 1 }}>
          <Text>I am the modal content!</Text>
        </View>
      </Modal>
    </View>
  )
}

A complete example

The following example consists of a component (ModalTester) which opens three modals one after the other at 2, 4 and 6 seconds and each of it is independent of the other. The state of these modals are controlled by modal1 modal2 modal3 values.

import React, { Component } from "react";
import { View, Text } from "react-native";
import Modal from "@neiderruiz/react-native-modal";

export default class ModalTester extends Component {
  state = {
    modal1: false,
    modal2: false,
    modal3: false
  };

  style = {
    color: "white",
    alignItems: "center",
    justifyContent: "center",
    fontSize: 20
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState({ modal1: true });
    }, 2000);

    setTimeout(() => {
      this.setState({ modal2: true });
    }, 4000);

    setTimeout(() => {
      this.setState({ modal3: true });
    }, 6000);
  }

  closeModalOne = () => {
    this.setState({ modal1: false });
  };
  closeModalTwo = () => {
    this.setState({ modal2: false });
  };
  closeModalThree = () => {
    this.setState({ modal3: false });
  };

  render() {
    const { modal1, modal2, modal3 } = this.state;
    return (
      <View>
        <Modal
          isVisible={modal1}
          onModalHide={this.closeModalOne}
          style={{ backgroundColor: "red" }}
        >
          <View>
            <Text style={this.style}>
              This is modal 1
            </Text>
          </View>
        </Modal>

        <Modal
          isVisible={modal2}
          onModalHide={this.closeModalTwo}
          style={{ backgroundColor: "green" }}
        >
          <View>
            <Text style={this.style}>
              This is modal 2
            </Text>
          </View>
        </Modal>

        <Modal
          isVisible={modal3}
          onModalHide={this.closeModalThree}
          style={{ backgroundColor: "blue" }}
        >
          <View>
            <Text style={this.style}>
              This is modal 3
            </Text>
          </View>
        </Modal>
      </View>
    );
  }
}

Available props

Name	Type	Default	Description
animationIn	string or object	'slideInUp'	Modal show animation
animationInTiming	number	300	Timing for the modal show animation (in ms)
animationOut	string or object	'slideOutDown'	Modal hide animation
animationOutTiming	number	300	Timing for the modal hide animation (in ms)
avoidKeyboard	bool	false	Move the modal up if the keyboard is open
backdropColor	string	'black'	The backdrop background color
backdropOpacity	number	0.70	The backdrop opacity when the modal is visible
backdropTransitionInTiming	number	300	The backdrop show timing (in ms)
backdropTransitionOutTiming	number	300	The backdrop hide timing (in ms)
children	node	REQUIRED	The modal content
isVisible	bool	REQUIRED	if true the modal is visible
onBackButtonPress	func	() => null	Called when the Android back button is pressed
onBackdropPress	func	() => null	Called when the backdrop is pressed
onModalHide	func	REQUIRED	Called when the modal is completely hidden
onModalShow	func	() => null	Called when the modal is completely visible
onSwipe	func	null	Called when the swipeThreshold has been reached
scrollOffset	number	0	When > 0, disables swipe-to-close, in order to implement scrollable content
scrollOffsetMax	number	0	Used to implement overscroll feel when content is scrollable.
scrollTo	func	null	Used to implement scrollable modal.
swipeThreshold	number	100	Swiping threshold that when reached calls onSwipe
swipeDirection	string	null	Defines the direction where the modal can be swiped (can be 'up', 'down', 'left, or 'right')
useNativeDriver	bool	false	Defines if animations should use native driver
hideModalContentWhileAnimating	bool	false	Enhances the performance by hiding the modal content until the animations complete
style	any	null	Style applied to the modal

---

Pull requests, feedbacks and suggestions are welcome!