StatusBar

O componente StatusBar em React Native é usado para controlar a barra de status (a barra de status superior na tela do dispositivo). Você pode usá-lo para definir a cor de fundo, o estilo do texto e outras propriedades relacionadas à barra de status. Aqui está um exemplo básico de como usar o componente StatusBar:

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

const MeuComponente = () => {
  return (
    <View style={styles.container}>
      <StatusBar
        backgroundColor="#4caf50" // Define a cor de fundo da barra de status
        barStyle="light-content" // Define o estilo do texto na barra de status (pode ser 'default', 'light-content' ou 'dark-content')
      />
      {/* O restante do seu conteúdo vai aqui */}
    </View>
  );
};

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

export default MeuComponente;

Neste exemplo, StatusBar é usado para definir a cor de fundo da barra de status como verde (#4caf50) e o estilo do texto na barra de status como claro ('light-content'). A propriedade barStyle determina se o texto na barra de status deve ser escuro ou claro, dependendo do fundo.

Props Importantes do StatusBar:

• backgroundColor: Define a cor de fundo da barra de status.
• barStyle: Define o estilo do texto na barra de status. Pode ser 'default', 'light-content' ou 'dark-content'.
• hidden: Se verdadeiro, a barra de status será ocultada.
• translucent: Se verdadeiro, a barra de status será transparente (disponível apenas no iOS).

A StatusBar deve ser colocada no componente principal do seu aplicativo (por exemplo, no componente raiz) para que tenha efeito em toda a aplicação.

Lembre-se de que o comportamento e as propriedades específicas podem variar entre plataformas (iOS e Android), então é importante testar em ambas as plataformas para garantir que a barra de status apareça e se comporte como esperado.