react-native-modal

What is react-native-modal?

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

react-native-modalbox

react-native-modalbox is another modal component for React Native. It provides similar functionalities such as custom animations and backdrop customization. However, react-native-modalbox is known for its simplicity and ease of use, making it a good choice for developers who need basic modal functionalities without extensive customization options.

react-native-popup-dialog

react-native-popup-dialog is a highly customizable dialog component for React Native. It offers a wide range of features including custom animations, backdrop customization, and various dialog types (e.g., alert, confirm). Compared to react-native-modal, react-native-popup-dialog provides more built-in dialog types and is more focused on creating different types of dialogs rather than just modals.

react-native-root-modal

react-native-root-modal is a modal component that allows you to render modals at the root level of your application. This package is useful for creating global modals that can be triggered from anywhere in the app. While it offers similar functionalities to react-native-modal, react-native-root-modal is more focused on providing a global modal solution.

README

react-native-modal

A <Modal> component for react-native. This is still very much a work in progress and only handles the simplest of cases, ideas and contributions are very welcome.

Warning: A Modal component is now built into React Native as of v0.10-rc, so this library is no longer necessary. Check out this commit on facebook/react-native for more information!

Add it to your project

1. Run npm install react-native-modal --save
2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot) then choose the RNModal.xcodeproj (Screenshot) .
3. Add libRNModal.a to Build Phases -> Link Binary With Libraries (Screenshot).
4. var Modal = require('react-native-modal');
5. At the bottom of your app, add the <Modal> element and use its isVisible prop to toggle visibility. It needs to be at the bottom so that it appears above all other components when it is visible. If you use the forceToFront prop, then the position in the component tree does not matter at all - put it wherever you like.

Usage

'use strict';

var React = require('react-native');
var Modal = require('react-native-modal');
var { AppRegistry, StyleSheet, View, Text } = React;

class App extends React.Component {
  constructor() {
    this.state = {
      isModalOpen: false
    };
  }

  openModal() {
    this.setState({isModalOpen: true});
  }

  closeModal() {
    this.setState({isModalOpen: false});
  }

  render() {
    return (
      <View style={styles.page}>
        <Text onPress={() => this.openModal()}>
          Open Modal.
        </Text>
        <Modal isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
          <Text>Hello world!</Text>
        </Modal>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  page: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 0
  }
});

AppRegistry.registerComponent('App', () => App);

If you would prefer to not have to implement openModal() and closeModal(), then you can use Modal.Mixin, then you can replace the definition of App above with:

var App = React.createClass({
  mixins: [Modal.Mixin],

  render() {
    return (
      <View style={styles.page}>
        <Text onPress={() => this.openModal()}>
          Open Modal.
        </Text>
        <Modal backdropType="blur" isVisible={this.state.isModalOpen} onClose={() => this.closeModal()}>
          <Text>Hello world!</Text>
        </Modal>
      </View>
    );
  }
}

Also take a look on react-native-login for an example usage.

Props

Component accepts several self-descriptive properties:

• forceToFront (Bool) - if true, the modal will use a new UIWindow that will appear above NavigatorIOS and the status bar, but not alerts. Demo here.
• hideCloseButton (Bool)
• backdropType (String) plain, none, or blur. Default is plain.
• backdropBlur (String) If backdropType is blur, this can be either dark, light, or extra-light. Default is light. (thanks @kureev for react-native-blur!) Demo here.
• containerPointerEvents (String) box-none, none, box-only, auto. Default is auto. Set to box-none to trigger the onPressBackdrop callback when the modal body is touched. See pointerEvents.
• isVisible (Bool)
• onClose (Function)
• onPressBackdrop (Function) - callback to be fired when the user taps on the backdrop
• customCloseButton (React Component)
• customShowHandler (Function) - uses a react-tween-state wrapper API in order to show the modal. See example
• customHideHandler (Function) - uses a react-tween-state wrapper API in order to hide the modal. See example

---

MIT Licensed