How to show a basic modal in React native? Code Example

React Native provides <Modal> component to show a basic modal for mobile apps. It has visible prop which derives the visibility of modal.

You can put the interface as child of modal.

Code Example

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

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal
        visible={modalVisible}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>This is a modal</Text>
            <Button
              onPress={() => setModalVisible(!modalVisible)}
              color={'#2196F3'}
              title={'Close Modal'}
            />
          </View>
        </View>
      </Modal>
      <Button
        onPress={() => setModalVisible(true)}
        color={'#F194FF'}
        title={'Open Modal'}
       />
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
    backgroundColor: '#FFF000',
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

The output will look like this –

In this code we declared a state variable modalVisible (line 5) to hold boolean value. This variable is passed to the Modal component in visible prop (line 9). When the value is true, the modal will show otherwise hide.

There are two buttons – one to open the modal and second to close it. The onPress function of both the buttons are just changing the state variable.

Live Demo

Conclusion

Modals are used to display the information which requires immediate and complete attention of app users. Generally we include things like asking name or email of user, showing an alert, operation completion or failure message, etc.

In react native, we have Modal component which can easily display a basic modal for us.