React Native modal explanation with example

Introduction :

In this react native tutorial, I will show you how to create one modal. A modal is used to present one content above a view. We can use modal to show one view like a popup.

Props of Modal component :

Following are the components available for this Modal :

[Optional] animationType :

It is used to set the animation type i.e. the animation Modal will use when to appear. It can be slide from the bottom, fade-in, or no animation. Anyone of ‘none’, ‘slide’, and ‘fade’ can be used.

[Optional][Android] hardwareAccelerated :

Boolean value to control force hardware acceleration.

[Optional][Android] statusBarTranslucent :

Boolean value to control if the modal should go under the statusbar or not.

[Optional][iOS] onDismiss :

It is a function that is called when the Modal is dismissed.

[Optional][iOS] onOrientationChange :

This is a function called when the orientation changes. It is also called when the modal first renders.

[Android, TVOS - required, others - not required] onRequestClose :

Function that is called when the hard back button of Android is pressed or a menu button on Apple TV is pressed.

[Optional] onShow :

Function that is called when the modal is shown.

[Optional][iOS] presentationStyle :

Controls how the modal appears. It can take any of the :

‘fullScreen’ : Covers the whole screen ‘pageSheet’ : Only on larger devices, covers portrait-width view centered ‘formSheet’ : Only on larger devices, covers narrow-width view centered ‘overFullScreen’ : Covers the full screen with transparency

[Optional] statusBarTranslucent :

Boolean value to define if the modal should show under status bar.

[Optional][iOS] supportedOrientations :

Supported orientation the modal supports. It can be any of the ‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’. For iOS, it depends on what is defined as UISupportedInterfaceOrientations in info.plist file.

[Optional][iOS] transparent :

Boolean value to define wheather the modal will draw over a transparent view or not.

[Optional] visible :

Change the visibility of the modal.

Example program :

The below program demonstrates how to use a Modal :

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

const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <View style={styles.parentView}>
      <Modal animationType="slide" transparent={false} visible={visible}>
        <View style={styles.centeredView}>
          <View style={styles.modalBody}>
            <Text style={styles.modalText}>Warning !</Text>
            <Button
              title="Ok"
              marginBottom="0"
              color="gray"
              onPress={() => setVisible(false)}
            />
          </View>
        </View>
      </Modal>

      <Button
        title="Show Modal"
        color="gray"
        onPress={() => setVisible(true)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  parentView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    margin: 22,
  },
  modalBody: {
    margin: 10,
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 40,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 6,
    alignItems: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
    color: 'red',
  },
});

export default App;

If you run this program, it will give the below output :