How to Implement React Native Modal

My latest mobile app project involved implementing seamless pop-ups that prompt the user to confirm an action or complete a form. Instead of having a separate view for confirmation and form components the user gets routed to, animated pop-ups enhance the user’s experience that much more. Small details like this will improve the quality of your app. In this article, I’ll walk you through how to implement this feature.

What is a React Native Modal ?

It is a pop-up styled view component that renders on top of an enclosing view on your mobile-app. The Modal component is a built-in component that comes along with the React Native framework and you have the ability to access its props that determine the animation type of the pop-up and other orientation properties.

For more enhancements and customized styling, installing the react-native-modal library would be your next best option depending on how advanced you want your feature to be. I’ll walk us through the usage and available props of both the react-native-modal library and the original React Native modal¹.

Let’s get started

Once you have your react native framework set up in your text editor, be sure to import Modal along with any necessary core components where you want this feature to render.

import { Modal } from 'react-native'

Within the return statement of your functional or class component, insert the Modal tags within your view container and pass in the visible prop which is set to a boolean that controls the visibility of the Modal view. The code inside of the Modal tags will render in the pop-up view. When the visible prop is set to false, the “Show Modal” button is the initial render, as shown in the below code snippet which is declared outside of the <Modal> tags.

import { StyleSheet, View, Text, Modal, TouchableOpacity, Button} from 'react-native';
export default function Home({ navigation }){
return(
  <View style={styles.container}>
    <Modal visible={false}>
       <View style={styles.centeredView}>
          <View style={styles.modalView}>
           <Text style={styles.modalText}>"Modal is showing!"</Text>                
          </View>
       </View>
    </Modal>
    <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Show Modal</Text>        
    </TouchableOpacity>
 </View>
 )
}

At the moment, we are only able to view the “Show Modal” button on our screen. We will need to add a handler function on the “Show Modal” button that toggles the Modal’s visible prop to true once it it pressed. This can be achieved by utilizing React’s state hook, useState( ).

import { StyleSheet, View, Text, Modal, TouchableOpacity, Button} from 'react-native';
import React, {useState} from 'react';
export default function Home({ navigation }){
  const [ modalOpen , setModalOpen ] = useState(false)
return(
  <View style={styles.container}>
    <Modal visible={modalOpen} animationType='slide'>
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
         <Text style={styles.modalText}>"Modal is showing!" </Text>    
        </View>
      </View>
    </Modal>
    <TouchableOpacity style={styles.button} onPress={() => setModalOpen(true)>
        <Text style={styles.buttonText}>Show Modal</Text>        
    </TouchableOpacity>
</View>
);
}

By passing in “false” to useState as the initial state, we’ve set the visibility of the Modal to false on the initial render. The onPress handler on the “Show Modal” button will change the state of modalOpen variable to “true” and the Modal will show up. Notice how we’ve also added an extra prop in the Modal component? animationType controls how the modal animates and it can be set to the following values: “slide”, “fade”, and “none”.

Before we move on to the enhanced props the react-native-modal library has to offer, we’ll need a few more lines of code to be able to close the modal view. Similar to the “Show Modal” button, we’ll create another button on the modal view and add an onPress handler to close it by setting state back to “false”.

export default function Home({ navigation }){
  const [ modalOpen , setModalOpen ] = useState(false)
return(
  <View style={styles.container}>
    <Modal visible={modalOpen} animationType='slide'>
      <View style={styles.centeredView}>
        <View style={styles.modalView}>
         <Text style={styles.modalText}>"Modal is showing!" </Text> 
         <TouchableOpacity style={styles.closeButton} onPress={() => setModalOpen(false)}>
            <Text style={styles.closeButtonText}>Close Modal</Text> 
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
<TouchableOpacity style={styles.button} onPress={() => setModalOpen(true)>
        <Text style={styles.buttonText}>Show Modal</Text>        
    </TouchableOpacity>
</View>
);
}

The original Modal from React-Native works pretty well, but customization is limited considering there are just a handful of built-in props available that support both iOS and Android devices.

React-Native-Modal Library

The react-native-modal library² is built on top of React Native’s Modal and expands on the customization options while providing a plain-simple API. The additional features include swipe-able and scrollable views, customizable backdrop (opacity, color, and timing), listeners for ending modal animations, and resizability on device rotation, to name a few. It’s available on npm and can be installed by running: npm i react-native-modal or yarn add react-native-modal.

import Modal from 'react-native-modal';

This can be implemented with the existing code above. Since it’s an extension of the React Native Modal, it works in a similar way by accessing props via the Modal tags.

Try this out and I hope you enjoyed this short tutorial!

Citation

[1]: React Native Official Documentation https://reactnative.dev/docs/modal

[2]: react-native-modal npm documentation https://www.npmjs.com/package//react-native-modal