17. Componente Modal

 

Tema: 17. Componente Modal

Objetivo:

Aprender a utilizar el componente Modal en React Native para mostrar contenido superpuesto sobre la aplicación, como formularios, mensajes o imágenes, con control de visibilidad mediante estado.

---

Contenido del tutorial:

1. ¿Qué es un Modal?

• Definición: Un componente que permite mostrar contenido encima de la aplicación actual.

• Usos comunes: Formularios, mensajes de alerta, imágenes ampliadas, menús contextuales.

• Característica principal: Se superpone sobre la interfaz existente.

---

2. Crear un componente para el Modal

• Paso 1: Crear un nuevo componente llamado ModalScreen.js.

• Código inicial:

• jsx

import React from 'react';

import { Text, View } from 'react-native';

const ModalScreen = () => {

  return (

    <View>

      <Text>Modal Screen</Text>

    </View>

  );

};

• export default ModalScreen;

• Paso 2: Importar y usar ModalScreen en App.js.

---

3. Estructura básica del Modal

• Importar Modal: import { Modal } from 'react-native';

• Propiedades esenciales:

• visible: Controla si el modal se muestra o no (booleano).

• transparent: Hace el fondo transparente para ver la app detrás.

• Ejemplo básico:

• jsx

<Modal

  visible={true}

  transparent={true}

>

  <Text>Modal</Text>

• </Modal>

---

4. Estilizar el Modal

• Contenedor principal: Usar View con flex: 1 y centrado.

• Caja de contenido: View con dimensiones, color de fondo y bordes.

• Ejemplo de estilo:

• jsx

<Modal

  visible={true}

  transparent={true}

>

  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

    <View style={{ width: 250, height: 200, backgroundColor: 'white', borderRadius: 10 }}>

      <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'gray' }}>Modal</Text>

    </View>

  </View>

• </Modal>

---

5. Controlar la visibilidad con Estado

• Paso 1: Usar useState para manejar la visibilidad.

• Ejemplo en App.js:

• jsx

import React, { useState } from 'react';

import { Button, View } from 'react-native';

import ModalScreen from './ModalScreen';

const App = () => {

  const [isVisible, setIsVisible] = useState(false);

  return (

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

      <Button

        title="Abrir Modal"

        onPress={() => setIsVisible(true)}

      />

      <ModalScreen isVisible={isVisible} setIsVisible={setIsVisible} />

    </View>

  );

};

• export default App;

• Paso 2: Pasar isVisible y setIsVisible como props al ModalScreen.

---

6. Completar el ModalScreen con control

• Código final del ModalScreen:

• jsx

import React from 'react';

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

const ModalScreen = ({ isVisible, setIsVisible }) => {

  return (

    <Modal

      visible={isVisible}

      transparent={true}

    >

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}>

        <View style={{ width: 250, height: 200, backgroundColor: 'white', borderRadius: 10, justifyContent: 'center', alignItems: 'center' }}>

          <Text style={{ fontSize: 25, fontWeight: 'bold', color: 'gray', marginBottom: 20 }}>Contenido del Modal</Text>

          <Button

            title="Cerrar Modal"

            onPress={() => setIsVisible(false)}

          />

        </View>

      </View>

    </Modal>

  );

};

• export default ModalScreen;

---

7. Ejemplo completo (App.js)

jsx

import React, { useState } from 'react';

import { Button, View, StyleSheet } from 'react-native';

import ModalScreen from './ModalScreen';

const App = () => {

  const [isVisible, setIsVisible] = useState(false);

  return (

    <View style={styles.container}>

      <Button

        title="Abrir Modal"

        onPress={() => setIsVisible(true)}

      />

      <ModalScreen isVisible={isVisible} setIsVisible={setIsVisible} />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

});

export default App;

---

Resumen de propiedades importantes del Modal:

Propiedad	Tipo	Descripción
visible	boolean	Controla si el modal está visible o no.
transparent	boolean	Hace el fondo del modal transparente.
animationType	string	Tipo de animación (slide, fade, none).
onRequestClose	function	Se llama al intentar cerrar (ej. en Android con botón atrás).

---

Consejos prácticos:

1. Fondo semitransparente: Usa backgroundColor: 'rgba(0,0,0,0.5)' en el contenedor para un efecto overlay.

2. Animaciones: Prueba animationType="slide" o animationType="fade" para transiciones suaves.

3. Cierre alternativo: Considera agregar un botón fuera del modal o un gesto para cerrar.

4. Contenido dinámico: Puedes pasar contenido personalizado al modal como children.

---

Resultado final:

• Al abrir la app: Verás un botón "Abrir Modal".

• Al hacer clic: Aparecerá un modal centrado con fondo semitransparente.

• Dentro del modal: Texto "Contenido del Modal" y botón "Cerrar Modal".

• Al cerrar: El modal desaparece y vuelves a la pantalla principal.

---

Nota: Este ejemplo es funcional y puede expandirse agregando más estilos, lógica de negocio o componentes dentro del modal