React-Native Modal

Syntax

To create a Modal in React-Native, we can use the Modal component provided by the platform's API. The following is the syntax for creating a basic modal:

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

const ExampleModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{marginTop: 22}}>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

Example

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

const ExampleModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={{marginTop: 22}}>
      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>

            <TouchableHighlight
              onPress={() => {
                setModalVisible(!modalVisible);
              }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>

      <TouchableHighlight
        onPress={() => {
          setModalVisible(true);
        }}>
        <Text>Show Modal</Text>
      </TouchableHighlight>
    </View>
  );
};

export default ExampleModal;

Output

This will display a button labeled "Show Modal". When clicked, a modal will appear with the text "Hello World!" and a button labeled "Hide Modal". Clicking the "Hide Modal" button will close the modal.

Explanation

The Modal component provided by React-Native allows us to display content on top of the current screen. In the example above, we create a Modal component with the visible prop set to modalVisible. By default, modalVisible is set to false.

We then create a button labeled "Show Modal" that, when clicked, updates the modalVisible state to true. This displays the modal.

Within the modal, we have a button labeled "Hide Modal" that, when clicked, updates the modalVisible state to false. This closes the modal.

Use

Modals are useful for displaying additional information or prompts to the user, without navigating away from the current screen. Some uses for modals include:

• Displaying additional information when a user clicks on an item
• Confirming an action before proceeding
• Allowing user input without navigating away from the current screen

Important Points

• Modals can be customized with various props, including animationType, transparent, and onRequestClose.
• Modals can be controlled by state, allowing for easy toggling between open and closed states.
• Modals can contain any React-Native components, allowing for rich content displays.

Summary

Modals in React-Native allow us to display content on top of the current screen. By controlling the visibility with state, modals can be easily opened and closed. Modals can be customized with various props and can contain any React-Native components. They are useful for displaying additional information, confirming actions, and allowing user input without navigating away from the current screen.