Modal
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
Utilice 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 |
ref
Un asignador de referencia al que se le asignará un nodo de elemento cuando se monte.
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.
Cuando se usa presentationStyle con valor pageSheet o formSheet, esta propiedad se ignora en 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 |