Зміст курсу

Foundations of React Native

Modal Component

Theory

The Modal component is used to present content and interactive elements overlaid on the rest of the application's content. It typically appears as a popup dialog or overlay on top of the main content, temporarily interrupting the user's workflow.

Why Do We Need It?

Content Presentation:
- Provides a way to display additional content or functionality without navigating away from the current screen;
- Useful for presenting dialogs, alerts, notifications, or any content that requires user interaction or attention.
Focus Attention:
- Can be used to draw attention to specific information, actions, or prompts;
- Allows you to control the user's focus and guide them through the application's workflow.
Contextual Interaction:
- Enables contextual interactions by presenting related content or options based on user actions or application state.

How to Work with Modal

The Modal component is controlled through its props and state;
We can toggle the visibility of the modal by setting its visible prop to true or false;
Use the onRequestClose prop to specify a function that will be called when the user attempts to close the modal.

Example

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Main Content</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.buttonText}>Open Modal</Text>
      </TouchableOpacity>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text style={styles.modalText}>Modal Content</Text>
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.buttonText}>Close Modal</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
};

export default App;

Code Description

Line 5: modalVisible: Manages the visibility state of the modal. Initialized as false.
Line 12: onPress event sets the modalVisible state to true, opening the modal.
Lines 16-21, 33: A component used to display content overlaid on the main content.
animationType="slide": Specifies the animation type for the modal.
transparent={true}: Makes the modal transparent.
visible={modalVisible}: Controls the visibility of the modal based on the modalVisible state.
onRequestClose={() => setModalVisible(false)}: Specifies the function to be called when the modal is requested to be closed.
Line 27: onPress event sets the modalVisible state to false, closing the modal.

Result

In Practice

Все було зрозуміло?

Секція 4. Розділ 3