MENU


<Modal>

This component presents content above an enclosing view.

PropsanimatedanimationTypetransparentvisible Platform-specific PropsstatusBarTranslucent AndroidhardwareAccelerated AndroidpresentationStyle iOSsupportedOrientations iOS
Event PropsonRequestCloseonShow Platform-specific Event PropsonDismiss iOSonOrientationChange iOS

'animationType' can be 'slide', 'fade', or 'none' none' none' .

'presentationStyle' can be 'fullscreen' fullscreen' fullscreen' , 'pageSheet', 'formSheet', or 'overFullScreen' overFullScreen' overFullScreen' .

'supportedOrientations' can be'portrait' 'portrait' 'portrait' , 'portrait-upside-down', 'landscape', 'landscape-left', or 'landscape-right'.


RESETRUNFULL
import React, { useState } from "react";import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <View style={styles.centeredView}>
      <Modal animationType="slide" transparent={true} visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
  >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)} >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );};const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  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
  },
  button: {borderRadius: 20, padding: 10, elevation: 2},
  buttonOpen: { backgroundColor: "#F194FF",},
  buttonClose: {backgroundColor: "#2196F3", },
  textStyle: { color: "white", fontWeight: "bold", textAlign: "center"},
  modalText: { marginBottom: 15, textAlign: "center"}});export default App;