Guías Técnicas

StatusBar en React Native: Personaliza la Barra de Estado

  ¿Qué es el componente StatusBar en React Native?

El componente StatusBar en React Native te permite controlar la apariencia de la barra de estado del dispositivo, donde se muestra la hora, batería, WiFi, y otros íconos del sistema. Puedes cambiar el fondo, el texto, la visibilidad, entre otras configuraciones.

Estructura básica de StatusBar

jsx 
import React from 'react';
import { View, Text, StatusBar, StyleSheet } from 'react-native';

const App = () => {
return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <Text>¡Bienvenido a la aplicación!</Text>
    </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;


Propiedades del componente StatusBar

  • barStyle: Define el estilo del contenido de la barra de estado. Puede ser:

    • default: Estilo predeterminado (depende del sistema operativo).
    • light-content: Texto claro en la barra de estado.
    • dark-content: Texto oscuro en la barra de estado.

  • backgroundColor: Establece el color de fondo de la barra de estado (funciona solo en Android).

  • translucent: Si se establece en true, la barra de estado se vuelve translúcida y el contenido de la pantalla se superpone a ella.

  • hidden: Si se establece en true, la barra de estado estará oculta.

  • networkActivityIndicatorVisible: Muestra un indicador de carga en la barra de estado cuando está activado.

Personalizar la barra de estado

jsx 
import React from 'react';
import { StatusBar, View, Text, StyleSheet } from 'react-native';

const App = () => {
return (
  <View style={styles.container}>
    <StatusBar 
      barStyle="light-content" 
      backgroundColor="#6200EE" 
    />
    <Text>Contenido de la app con fondo de barra de estado personalizado</Text>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Ocultar la barra de estado

Puedes ocultar la barra de estado completamente usando la propiedad hidden.

jsx 
import React from 'react';
import { View, Text, StatusBar, StyleSheet } from 'react-native';

const App = () => {
return (
  <View style={styles.container}>
    <StatusBar hidden={true} />
    <Text>La barra de estado está oculta</Text>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Barra de estado translúcida

Para que la barra de estado sea translúcida, establecemos la propiedad translucent a true. Esto hace que el contenido se desplace debajo de la barra de estado.

jsx 
import React from 'react';
import { StatusBar, View, Text, StyleSheet } from 'react-native';

const App = () => {
return (
    <View style={styles.container}>
      <StatusBar translucent={true} barStyle="dark-content" backgroundColor="transparent" />
      <Text>La barra de estado es translúcida</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 50, // Necesario para que el contenido no quede debajo de la barra
  },
});

export default App;
  Resumen

El componente StatusBar en React Native es una herramienta poderosa para personalizar la apariencia de la barra de estado en tus aplicaciones móviles. Puedes modificar su estilo, color, visibilidad y más, adaptándolo a las necesidades de tu diseño para mejorar la experiencia del usuario.