This guide will help you learn how to add a modal popup in React Native application using the react-native modules. Additionally, you will look at how to style modal popup using the CSS in react native app.

Modal overlays are an essential user interface component, a modal window is a graphical control element helper to an application’s primary window. A modal window disables the main window, appears over other elements to display important information.

In this react native modal example, we will show you how to create a modal popup component in react-native. How to add image, text in modal dialog using the built-in react modules such as View, Text, StyleSheet, TouchableOpacity, Image, Modal, and Alert.

React Native Modal Popup Example

• Step 1: Install React Native CLI
• Step 2: Set Up New React Native Project
• Step 3: Create Modal Component
• Step 4: Register Modal Component in App Js
• Step 5: Start React Native App

Install React Native CLI

We believe you have Node 12 LTS or greater installed on your system; you can use either npm or yarn to install the Expo CLI command-line tool:

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Set Up New React Native Project

Afterward, execute the given below expo init command appending your project name on the command-line tool.

expo init RnBlogProject

Further, step into the app folder.

cd RnBlogProject

Create Modal Component

In the project, create a modal_component.js file; in this file, you have to import the UI modules from the react-native package.

Create ModalComponent class and export it simultaneously; within the component, use react native UI modules to create the modal.

On the other hand, we have added custom styling using CSS and classes.

Update code in modal_component.js file.

import React, { Component } from 'react';
import { 
  View,
  Text,
  Image,
  Modal,
  Alert,
  StyleSheet,
  TouchableOpacity,  
} from 'react-native';

export default class ModalComponent extends Component {
  state = {
    visibility: false
  };

  showModal(show){
    this.setState({visibility: show})
  }

  render() {
    return (
      <View style = { styles.wrapper }>
        <Modal
            animationType = {"slide"}
            transparent={false}
            visible={this.state.visibility}
            onRequestClose={() => {
              Alert.alert('Modal closed.');
            }}>

            <Image 
              source={require('./assets/user.png')}
              style = { styles.image }/>
              <Text style = { styles.text }>
                   React native modal dialog example.
                </Text>

                <TouchableOpacity
                    style={styles.button}
                    onPress={() => {
                      this.showModal(false);
                    }}>
                    <Text style={styles.btn}>Close</Text>
                </TouchableOpacity>
          </Modal>
            
          <TouchableOpacity
              style={styles.button}
              onPress={() => {
                this.showModal(true);
              }}>
              <Text style={styles.btn}>Open</Text>
          </TouchableOpacity>
        </View>
      );
  }
};

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,    
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    display: 'flex',
    height: 65,
    borderRadius: 3,
    width: '100%',
    backgroundColor: 'red',
    shadowColor: 'red',
    shadowOpacity: 0.6,
    justifyContent: 'center',
    alignItems: 'center',    
    shadowOffset: { 
      height: 12,
      width: 0 
    },
    shadowRadius: 25,
  },
  btn: {
    color: '#FFFFFF',
    fontSize: 25,
  },
  image: {
    marginTop: 140,
    marginBottom: 15,
    width: '100%',
    height: 340,
  },
  text: {
    fontSize: 24,
    marginBottom: 25,
    padding: 50,
  }
});

Register Modal Component in App Js

In this step, you need to open the App.js; in this file, you have to register the modal component.

import React from 'react';
import ModalComponent from './modal_component.js'

export default function App() {
  return (
    <ModalComponent/>
  );
}

Start React Native App

In the final step, you have to start a development server; just hit the given below command based on your package manager.

# npm
npm start


# yarn
yarn start

We have prepared the react native app; for testing purposes, we are using the Expo tool; you have to install the Expo app on your mobile device.

After starting the app, you have to scan the QR code to open the react native app on your device.

Conclusion

Throughout this tutorial, we focused on how to create a modal component in react native app. We followed the instructions to build React native modal with text and image, style the dialog box, and add the open or close modal feature.