Modal

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

El componente Modal es una forma básica de presentar contenido sobre una vista envolvente.

Ejemplo

---

Referencia

Props

Props de View

Hereda Props de View.

---

animated

Obsoleto. Utiliza la propiedad animationType en su lugar.

---

animationType

La propiedad animationType controla cómo se anima el modal.

Valores posibles:

• slide: aparece deslizándose desde abajo

• fade: aparece con efecto de fundido

• none: aparece sin animación

Type	Default
enum('none', 'slide', 'fade')	none

---

backdropColor

El color de fondo (backdropColor) del modal (o color de fondo del contenedor). Por defecto es white si no se especifica y transparent es false. Se ignora si transparent es true.

Type	Default
color	white

---

hardwareAccelerated

Android

La propiedad hardwareAccelerated controla si se fuerza la aceleración por hardware para la ventana subyacente.

Type	Default
bool	false

---

navigationBarTranslucent

Android

La propiedad navigationBarTranslucent determina si el modal debe extenderse bajo la barra de navegación del sistema. Sin embargo, statusBarTranslucent también debe establecerse en true para hacer la barra de navegación translúcida.

Type	Default
bool	false

---

onDismiss

iOS

La propiedad onDismiss permite pasar una función que se llamará cuando se haya descartado el modal.

Type
function

---

onOrientationChange

iOS

El callback onOrientationChange se llama cuando cambia la orientación mientras se muestra el modal. La orientación proporcionada es solo 'portrait' (vertical) o 'landscape' (horizontal). Este callback también se llama en el renderizado inicial, independientemente de la orientación actual.

Type
function

---

allowSwipeDismissal

iOS

Controla si el modal puede descartarse deslizando hacia abajo en iOS. Esto requiere implementar la propiedad onRequestClose para manejar el descarte.

Type	Default
bool	false

---

onRequestClose

El callback onRequestClose se llama cuando el usuario pulsa el botón físico "Atrás" en Android o el botón "Menú" en Apple TV. Debido a esta propiedad requerida, tenga en cuenta que los eventos BackHandler no se emitirán mientras el modal esté abierto. En iOS, este callback se llama cuando se descarta un Modal usando un gesto de arrastre cuando presentationStyle es pageSheet or formSheet. Cuando allowSwipeDismissal está habilitado, este callback se llamará después de descartar el modal.

Type
function Required Android TV function iOS

---

onShow

La propiedad onShow permite pasar una función que se llamará cuando el modal se haya mostrado.

Type
function

---

presentationStyle

iOS

La propiedad presentationStyle controla cómo aparece el modal (generalmente en dispositivos más grandes como iPad o iPhones plus). Consulte https://developer.apple.com/reference/uikit/uimodalpresentationstyle para más detalles.

Valores posibles:

• fullScreen: cubre completamente la pantalla

• pageSheet: cubre el ancho vertical centrado (solo en dispositivos grandes)

• formSheet: cubre un ancho estrecho centrado (solo en dispositivos grandes)

• overFullScreen: cubre completamente la pantalla pero permite transparencia

Type	Default
enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen')	fullScreen if transparent={false} overFullScreen if transparent={true}

---

statusBarTranslucent

Android

La propiedad statusBarTranslucent determina si el modal debe extenderse bajo la barra de estado del sistema.

Type	Default
bool	false

---

supportedOrientations

iOS

La propiedad supportedOrientations permite rotar el modal a cualquiera de las orientaciones especificadas. En iOS, el modal sigue restringido por lo especificado en el campo UISupportedInterfaceOrientations del Info.plist de tu aplicación.

Al usar presentationStyle como pageSheet o formSheet, esta propiedad será ignorada por iOS.

Type	Default
array of enums('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')	['portrait']

---

transparent

La propiedad transparent determina si el modal llenará toda la vista. Establecer esto en true renderizará el modal sobre un fondo transparente.

Type	Default
bool	false

---

visible

La propiedad visible determina si tu modal es visible.

Type	Default
bool	true