Modal In React Native Examples

In this tutorial we will learn how to show Modal in React Native applications for Android and IOS. Generally Modal displays above the current screen and blocks the screen.

Modal In React Native
Modal In React Native

What Is A Modal In React Native?

Modal is a component that is a basic way to present content above a enclosing view. Further we will learn how to display a Modal using Functional component and Class component. Modal is a dialog box which appears when we click on Button or any clickable area. Generally we show the Model on button click.

Modal Example In Function Component In React Native

Below is the example of Modal in Function Component in React Native. You can copy the below code and paste in your project where you wan to use it.

import React, { Component, useState } from "react";
import { View, StyleSheet, Image, Text, Pressable, Modal, } from "react-native";

const Home = () => {
    const [modalVisible, setModalVisible] = useState(false);
    return (
        <View style={styles.mainView}>
            <Text style={{ color: 'black', fontSize: 20, fontWeight: "bold" }}>This is react native Modal Example</Text>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal closed.");
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.mainView}>
                    <View style={styles.modalView}>
                        <Text style={styles.modalText}>Modal Is Shown Now You can close it </Text>
                        <Pressable
                            style={[styles.button, styles.buttonClose]}
                            onPress={() => setModalVisible(!modalVisible)}
                        >
                            <Text style={styles.textStyle}>Close Modal</Text>
                        </Pressable>
                    </View>
                </View>
            </Modal>
            <Pressable
                onPress={() => setModalVisible(true)}
            >
                <Text style={{ color: 'white', fontSize: 20, fontWeight: "bold", backgroundColor: 'blue', padding: 10 }}>Show The Model</Text>
            </Pressable>
        </View>
    );
}
export default Home;

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 26
    },
    modalView: {
        margin: 25,
        backgroundColor: "green",
        borderRadius: 25,
        padding: 40,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
    },

    modalText: {
        marginBottom: 25,
        fontSize: 18,
        textAlign: "center",
        color: "white"
    },

    buttonOpen: {
        backgroundColor: "#F194FF",
    },

    button: {
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },

    textStyle: {
        color: "black",
        fontSize: 18,
        fontWeight: "bold",
        textAlign: "center",
        padding: 10,
    },

    buttonClose: {
        backgroundColor: "#2196F3",
    },
})

Class Component Example

The below code present the Modal example in Class Component. There is no changes compare to the Functional Component only the way changes of creating of class component.

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

export default class TestClass extends Component {
    state = {
        modalVisible: false,
    };

    setModalVisible = (visible) => {
        this.setState({
            modalVisible: visible,
        })
    }
    render() {
        const { modalVisible} = this.state;
        return (
            <View style={styles.mainView}>
                <Text style={{ color: 'black', fontSize: 20, fontWeight: "bold" }}>Modal In Class Component</Text>
                <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}
                    onRequestClose={() => {
                        Alert.alert("Modal closed.");
                        this.setModalVisible(!modalVisible);
                    }}
                >
                    <View style={styles.mainView}>
                        <View style={styles.modalView}>
                            <Text style={styles.modalText}>Modal Is Shown Now You can close it </Text>
                            <Pressable
                                style={[styles.button, styles.buttonClose]}
                                onPress={() => this.setModalVisible(!modalVisible)}
                            >
                                <Text style={styles.textStyle}>Close Modal</Text>
                            </Pressable>
                        </View>
                    </View>
                </Modal>
                <Pressable
                    onPress={() => this.setModalVisible(true)}
                >
                    <Text style={{ color: 'white', fontSize: 20, fontWeight: "bold", backgroundColor: 'blue', padding: 10 }}>Show The Model</Text>
                </Pressable>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 26
    },
    modalView: {
        margin: 25,
        backgroundColor: "green",
        borderRadius: 25,
        padding: 40,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
    },

    modalText: {
        marginBottom: 25,
        fontSize: 18,
        textAlign: "center",
        color: "white"
    },

    buttonOpen: {
        backgroundColor: "#F194FF",
    },

    button: {
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },

    textStyle: {
        color: "black",
        fontSize: 18,
        fontWeight: "bold",
        textAlign: "center",
        padding: 10,
    },

    buttonClose: {
        backgroundColor: "#2196F3",
    },
})

Props

By using Props we can create more effective components. There are some props, those are as below

animationType : The animationType controls how the Modal animates. Possible values are :

  • slide – slides in from the bottom,
  • fade – fades into view,
  • none – appears without an animation.

Result

Generally Modals are used to display dialog box which appears on click of any button, text or any clickable area.

RN Modal
RN Modal

If You click on the button “Show The Modal” text the below result will be displayed. The Modal is supported in both Android and IOS devices.

RN Modal
RN Modal

You can learn more about this from the React Native website from Here. There are some other useful contents for this component at there.

Thank you for visiting this tutorial on FlutterTpoint. Please visit more React Native Tutorials. For any query and doubt you can comment in the comment section below, We will solve your issues as soon as possible. We recommend you to learn React Native Elements.

close

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment