Componente React Native StatusBar

El siguiente enfoque cubre cómo controlar StatusBar en react-native. Para ello, vamos a utilizar el componente StatusBar. Es una interfaz en la parte superior de la pantalla que muestra los íconos de notificación.

Sintaxis:

<StatusBar
  backgroundColor="#"
  barStyle={}
  showHideTransition={}
  hidden={} 
/>

Accesorios en la barra de estado:

• animado: si la transición entre los cambios de propiedad de la barra de estado debe ser animada.
• backgroundColor: Es el color de fondo de la barra de estado. Es solo para dispositivos Android.
• barStyle: Establece el color del texto de la barra de estado.
• hidden: Oculta la barra de estado.
• networkActivityIndicatorVisible: si el indicador de actividad de la red debe estar visible. Es solo para dispositivos IOS.
• showHideTransition: el efecto de transición al mostrar y ocultar la barra de estado usando el accesorio oculto .
• translúcido: si es verdadero, la aplicación se dibujará debajo de la barra de estado.

Métodos en StatusBar:

• popStackEntry(): Obtiene y elimina la última entrada de StatusBar de la pila.
• pushStackEntry(): empuja una entrada de StatusBar a la pila.
• replaceStackEntry(): Reemplaza una entrada de pila de StatusBar existente con nuevos accesorios.
• setBackgroundColor(): Establece el color de fondo para la barra de estado. Solo está disponible para dispositivos Android.
• setBarStyle(): Establece el estilo de la barra de estado.
• setHidden(): Muestra u oculta la barra de estado.
• setNetworkActivityIndicatorVisible(): Controla la visibilidad del indicador de actividad de la red. Solo está disponible para dispositivos IOS.
• setTranslucent(): Controla la translucidez de la barra de estado.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora implementemos la barra de estado. Aquí creamos dos botones, el primer botón oculta la barra de estado y el segundo botón cambia el estilo de la barra de estado.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, View , Button , StatusBar } from 'react-native';
const STYLE = ['default', 'dark-content', 'light-content'];
export default function App() {
  let index = 0;
  const [hidden , sethidden] = useState(false);
  const [styleBar , setBar] = useState(STYLE[0]);
  const changeStyle = () => {
    index += 1;
    if(index == 3)
    {
      index = 0;
    }
    setBar(STYLE[index]);
  }
  return (
    <View style={styles.container}>
        <StatusBar
          hidden={hidden}
          animated={true}
          backgroundColor="#61dafb"
          barStyle={styleBar}
          showHideTransition={'fade'}
        />
        <View style={styles.button}>
        <Button
          title={"Hide StatusBar"}
          onPress={()=>{sethidden(!hidden)}}
        />
        </View>
        <View style={styles.button}>
        <Button
          title={"Change Style"}
          onPress={changeStyle}
        />
        </View>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text : {
    fontSize : 40,
    marginBottom : 30
  },
  button : {
    margin : 20,
    width:200,
  }
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/statusbar