Reaccionar componente modal nativo

El siguiente enfoque cubre cómo crear Modal en react-native. Para ello, vamos a utilizar el componente Modal. Es una forma básica de presentar contenido sobre una vista envolvente.

Sintaxis:

<Modal
  animationType=""
  transparent={}
  visible={}
  onRequestClose={}
>

Accesorios en modal:

• animationType: este accesorio controla cómo se anima el modal.
• animado: este accesorio está en desuso ahora use animationType en su lugar.
• hardwareAccelerated: esta propiedad controla si se fuerza la aceleración de hardware para la ventana subyacente. Es solo para dispositivos Android.
• onDismiss: esta propiedad permite pasar una función que se llamará una vez que se haya descartado el modal. Es solo para dispositivos ios.
• onOrientationChange: se llama cuando la orientación cambia mientras se muestra el modal. Es solo para dispositivos ios.
• onRequestClose: se llama cuando el usuario toca el botón de retroceso del hardware en Android.
• onShow: esta propiedad permite pasar una función que se llamará una vez que se haya mostrado el modal.
• PresentationStyle: este accesorio controla cómo aparece el modal. Es solo para dispositivos ios.
• statusBarTranslucent: este accesorio determina si su modal debe ir debajo de la barra de estado del sistema.
• Orientaciones admitidas: esta propiedad permite rotar el modal a cualquiera de las orientaciones especificadas. Es solo para dispositivos ios.
• transparente: esta propiedad determina si su modal llenará toda la vista.
• visible: este apoyo determina si su modal es visible o no.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto: Se verá así.

Ejemplo: Ahora implementemos el Modal. Aquí creamos un Modal que aparece cuando hacemos clic en el botón.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, View , Text , Modal , Button } from 'react-native';
export default function App() {
  const [active , setactive] = useState(false);
  return (
    <View style={styles.container}>
        <Modal
        animationType="slide"
        transparent={true}
        visible={active}
        onRequestClose={() => {
          console.warn("closed");
        }}
        >
          <View style={styles.container}>
            <View style={styles.View}>
            <Text style={styles.text}>GeeksforGeeks</Text>
            <Button title="close" 
                    onPress={()=>{setactive(!active)}}/>
            </View>
          </View>
        </Modal>
        <Button 
          title={"click"}
          onPress={()=>{setactive(!active)}}
        />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor : "black",
    alignItems: 'center',
    justifyContent: 'center',
  },
  View : {
    backgroundColor : "white" ,
    height : 140 ,
    width : 250,
    borderRadius : 15,
    alignItems : "center",
    justifyContent : "center",
    borderColor : "black",
    borderWidth:2,
  },
  text : {
    fontSize : 20,
    color : "green",
    marginBottom:20
  },
  button : {
    margin : 20,
    width:200,
  }
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo.

Referencia: https://reactnative.dev/docs/modal