React Native - Barra de Status

Neste capítulo, mostraremos como controlar a aparência da barra de status no React Native.

A barra de status é fácil de usar e tudo que você precisa fazer é definir as propriedades para alterá-la.

o hiddenpropriedade pode ser usada para ocultar a barra de status. Em nosso exemplo, é definido comofalse. Este é o valor padrão.

o barStyle pode ter três valores - dark-content, light-content e default.

Este componente possui várias outras propriedades que podem ser utilizadas. Alguns deles são específicos para Android ou IOS. Você pode verificar isso na documentação oficial.

App.js

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

const App = () => {
   return (
      <StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#00BCD4" translucent = {true}/>
   )
}
export default App

Se executarmos o aplicativo, a barra de status ficará visível e o conteúdo terá uma cor escura.

Resultado