react-native-modal is a customizable modal component for React Native applications. It provides a variety of features to create modals with different animations, styles, and behaviors.

What are react-native-modal's main functionalities?

Basic Modal

This code demonstrates a basic modal that can be toggled on and off with a button. The modal contains a simple text and a button to hide the modal.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const BasicModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Hello!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default BasicModalExample;

Custom Animation

This code demonstrates a modal with custom animations. The modal slides in from the left and slides out to the right.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const CustomAnimationModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible} animationIn="slideInLeft" animationOut="slideOutRight">
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Custom Animation!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default CustomAnimationModalExample;

Backdrop Customization

This code demonstrates a modal with a customized backdrop. The backdrop color is set to red with an opacity of 0.8.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Modal from 'react-native-modal';

const BackdropCustomizationModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible} backdropColor="red" backdropOpacity={0.8}>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Custom Backdrop!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

export default BackdropCustomizationModalExample;

Other packages similar to react-native-modal

Readme

Source

An enhanced, animated and customizable react-native modal.

Features

Smooth enter/exit animations
Plain simple and flexible APIs
Customizable backdrop opacity, color and timing
Listeners for the modal animations ending
Resize itself correctly on device rotation

Demo

Setup

This library is available on npm, install it with: npm install --save react-native-modal or yarn add react-native-modal.

Usage

import React, { Component } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modal'

export default class ModalTester extends Component {
  state = {
    isModalVisible: false
  }

  _showModal = () => this.setState({ isModalVisible: true })

  _hideModal = () => this.setState({ isModalVisible: false })

  render () {
    return (
      <View style={{ flex: 1 }}>
        <TouchableOpacity onPress={this._showModal}>
          <Text>Show Modal</Text>
        </TouchableOpacity>
        <Modal isVisible={this.state.isModalVisible}>
          <View style={{ flex: 1 }}>
            <Text>Hello!</Text>
          </View>
        </Modal>
      </View>
    )
  }

}

For a more complex example take a look at the /example directory.

Available props

Name	Type	Default	Description
animationIn	string	'slideInUp'	Modal show animation
animationInTiming	number	300	Timing for the modal show animation (in ms)
animationOut	string	'slideOutDown'	Modal hide animation
animationOutTiming	number	300	Timing for the modal hide animation (in ms)
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)
hideOnBack	bool	true	Hide the modal on back button press?
onBackButtonPress	func	() => null	Called when the Android back button is pressed
isVisible	bool	REQUIRED	Show the modal?
children	node	REQUIRED	The modal content
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

Avaliable animations

Take a look at react-native-animatable for available animations.
Pull requests, feedbacks and suggestions are welcome!

P.S.: Thanks @oblador for react-native-animatable and @brentvatne for the npm namespace!

Keywords

FAQs

What is react-native-modal?

Is react-native-modal popular?

Is react-native-modal well maintained?

Last updated on 25 Jul 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-native-modal

What is react-native-modal?

What are react-native-modal's main functionalities?

Other packages similar to react-native-modal