Guías Técnicas

Modal en React Native: Ventanas Emergentes

  ¿Qué es el Modal y para qué se usa?

El componente Modal en React Native permite mostrar una ventana emergente sobre el contenido actual de la pantalla. Usualmente se utiliza para mostrar información adicional, formularios o interacciones que requieren la atención del usuario sin abandonar la vista actual.

Estructura básica de Modal

El componente Modal se muestra de manera superpuesta sobre la pantalla y puede ser configurado para aparecer o desaparecer de acuerdo con el estado de la aplicación.

jsx 
import React, { useState } from 'react';
import { Modal, View, Text, StyleSheet, Pressable } from 'react-native';

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

return (
  <View style={styles.container}>
    {/* Botón para abrir el modal */}
    <Pressable style={styles.openButton} onPress={() => setModalVisible(true)}>
      <Text style={styles.buttonText}>Abrir Modal</Text>
    </Pressable>

    {/* Modal */}
    <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => setModalVisible(false)}
    >
      <View style={styles.overlay}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>¡Hola desde el Modal!</Text>
          <Text style={styles.modalText}>Este es un modal estilizado y elegante.</Text>
          
          {/* Botón para cerrar */}
          <Pressable style={styles.closeButton} onPress={() => setModalVisible(false)}>
            <Text style={styles.buttonText}>Cerrar</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  </View>
);
};

// Estilos
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8f0fe',
    justifyContent: 'center',
    alignItems: 'center',
  },
  openButton: {
    backgroundColor: '#4285f4',
    padding: 15,
    borderRadius: 10,
    elevation: 5,
  },
  closeButton: {
    backgroundColor: '#ea4335',
    padding: 12,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 16,
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.35)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: '80%',
    backgroundColor: '#fff',
    borderRadius: 20,
    padding: 25,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.3,
    shadowRadius: 6.27,
    elevation: 10,
  },
  modalTitle: {
    textAlign:"center",
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 10,
    color: '#333',
  },
  modalText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#666',
  },
});

export default App;


Propiedades más comunes de Modal

  • animationType: Especifica el tipo de animación para mostrar o cerrar el modal. Las opciones son:

    • 'none': Sin animación.
    • 'slide': La animación de deslizamiento.
    • 'fade': Animación de desvanecimiento.

  • transparent: Si es true, el fondo del modal será transparente, dejando visible el contenido detrás de él.

  • visible: Define si el modal es visible o no. Este valor se maneja generalmente con un estado (useState).

  • onRequestClose: Función que se ejecuta cuando el usuario intenta cerrar el modal (en dispositivos Android, por ejemplo, cuando presionan el botón de retroceso).

Cerrar Modal

jsx 
import React, { useState } from 'react';
import { Modal, View, Text, Button, StyleSheet } from 'react-native';

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

return (
  <View style={styles.container}>
    <Button
      title="Mostrar Modal"
      onPress={() => setModalVisible(true)}
    />

    <Modal
      animationType="fade"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => setModalVisible(false)}
    >
      <View style={styles.modalView}>
        <Text>Este es un Modal</Text>
        <Button
          title="Cerrar Modal"
          onPress={() => setModalVisible(false)}
        />
      </View>
    </Modal>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    marginTop: 100,
    backgroundColor: 'white',
    padding: 35,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
});

export default App;
  Modal

El componente Modal es ideal para mostrar ventanas emergentes en aplicaciones React Native. Permite interacción directa con el usuario y es configurable para ofrecer diferentes animaciones, transparencia, y eventos de cierre. Este componente es útil para notificaciones, formularios o cualquier otra función que requiera la atención inmediata del usuario.