Barra de estado

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 →

Componente para controlar la barra de estado de la aplicación. La barra de estado es el área, típicamente en la parte superior de la pantalla, que muestra la hora actual, información de red Wi-Fi y celular, nivel de batería y/u otros iconos de estado.

Uso con Navigator

Es posible tener múltiples componentes StatusBar montados simultáneamente. Las props se fusionarán en el orden en que se montaron los componentes StatusBar.

TypeScript

JavaScript

API imperativa

Para casos donde usar un componente no es ideal, también existe una API imperativa expuesta como funciones estáticas en el componente. Sin embargo, no se recomienda usar la API estática y el componente para la misma prop porque cualquier valor establecido por la API estática será sobrescrito por el establecido por el componente en la siguiente renderización.

---

Referencia

Constantes

currentHeight

Android

La altura de la barra de estado, que incluye la altura del notch si está presente.

---

Props

animated

Indica si las transiciones entre cambios de propiedades de la barra de estado deben animarse. Compatible con las propiedades backgroundColor, barStyle y hidden.

Type	Required	Default
boolean	No	false

---

backgroundColor

Android

El color de fondo de la barra de estado.

advertencia

Debido a la implementación edge-to-edge introducida en Android 15, establecer el color de fondo de la barra de estado está obsoleto en el nivel API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones edge-to-edge aquí.

Type	Required	Default
color	No	default system StatusBar background color, or 'black' if not defined

---

barStyle

Establece el color del texto de la barra de estado.

En Android, esto solo tendrá efecto en versiones API 23 y superiores.

Type	Required	Default
StatusBarStyle	No	'default'

---

hidden

Indica si la barra de estado está oculta.

Type	Required	Default
boolean	No	false

---

networkActivityIndicatorVisible

iOS

Indica si el indicador de actividad de red debe ser visible.

Type	Default
boolean	false

---

showHideTransition

iOS

El efecto de transición al mostrar y ocultar la barra de estado usando la prop hidden.

Type	Default
StatusBarAnimation	'fade'

---

translucent

Android

Indica si la barra de estado es translúcida. Cuando translucent se establece en true, la aplicación se dibujará bajo la barra de estado. Esto es útil cuando se usa un color semitransparente para la barra de estado.

advertencia

Debido a la aplicación edge-to-edge introducida en Android 15, establecer la barra de estado como translúcida queda obsoleto en el nivel de API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones de edge-to-edge aquí.

Type	Default
boolean	false

Métodos

popStackEntry()

tsx

static popStackEntry(entry: StatusBarProps);

Obtiene y elimina la última entrada de StatusBar de la pila.

Parámetros:

Name	Type	Description
entry Required	any	Entry returned from pushStackEntry.

---

pushStackEntry()

tsx

static pushStackEntry(props: StatusBarProps): StatusBarProps;

Inserta una entrada de StatusBar en la pila. El valor devuelto debe pasarse a popStackEntry cuando se complete.

Parámetros:

Name	Type	Description
props Required	any	Object containing the StatusBar props to use in the stack entry.

---

replaceStackEntry()

tsx

static replaceStackEntry(
  entry: StatusBarProps,
  props: StatusBarProps
): StatusBarProps;

Reemplaza una entrada existente de la pila de StatusBar con nuevas props.

Parámetros:

Name	Type	Description
entry Required	any	Entry returned from pushStackEntry to replace.
props Required	any	Object containing the StatusBar props to use in the replacement stack entry.

---

setBackgroundColor()

Android

tsx

static setBackgroundColor(color: ColorValue, animated?: boolean);

Establece el color de fondo de la barra de estado.

advertencia

Debido a la implementación edge-to-edge introducida en Android 15, establecer el color de fondo de la barra de estado está obsoleto en el nivel API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones edge-to-edge aquí.

Parámetros:

Name	Type	Description
color Required	string	Background color.
animated	boolean	Animate the style change.

---

setBarStyle()

tsx

static setBarStyle(style: StatusBarStyle, animated?: boolean);

Establece el estilo de la barra de estado.

Parámetros:

Name	Type	Description
style Required	StatusBarStyle	Status bar style to set.
animated	boolean	Animate the style change.

---

setHidden()

tsx

static setHidden(hidden: boolean, animation?: StatusBarAnimation);

Muestra u oculta la barra de estado.

Parámetros:

Name	Type	Description
hidden Required	boolean	Hide the status bar.
animation iOS	StatusBarAnimation	Animation when changing the status bar hidden property.

---

🗑️ setNetworkActivityIndicatorVisible()

iOS

Obsoleto

El indicador de actividad de red en la barra de estado no es compatible en iOS 13 y versiones posteriores. Se eliminará en una futura versión.

tsx

static setNetworkActivityIndicatorVisible(visible: boolean);

Controla la visibilidad del indicador de actividad de red.

Parámetros:

Name	Type	Description
visible Required	boolean	Show the indicator.

---

setTranslucent()

Android

tsx

static setTranslucent(translucent: boolean);

Controla la translucidez de la barra de estado.

advertencia

Debido a la aplicación edge-to-edge introducida en Android 15, establecer la barra de estado como translúcida queda obsoleto en el nivel de API 35 y configurarlo no tendrá efecto. Puedes leer más sobre nuestras recomendaciones de edge-to-edge aquí.

Parámetros:

Name	Type	Description
translucent Required	boolean	Set as translucent.

Definiciones de tipos

StatusBarAnimation

Tipo de animación de la barra de estado para transiciones en iOS.

Type
enum

Constantes:

Value	Type	Description
'fade'	string	Fade animation
'slide'	string	Slide animation
'none'	string	No animation

---

StatusBarStyle

Tipo de estilo de la barra de estado.

Type
enum

Constantes:

Value	Type	Description
'default'	string	Default status bar style (dark for iOS, light for Android)
'light-content'	string	White texts and icons
'dark-content'	string	Dark texts and icons (requires API>=23 on Android)