[PT-BR] React Native: Configurando a Status bar background color 🎨 no Android e iOS

Como você sabe, o iOS não da suporte a Status bar background color, apesar que o React Native tem o componente StatusBar mais o backgroundColor apenas da suporte ao Android. Então, para ser possível no iOS, nós devemos criar um componente para isso.

Vamos começar com o código!

Antes de iniciar ….

Para mudar o Status bar background color no iPhone X, XS, XR +++, você precisa usar o componente SafeAreaView do próprio React Native.
Então, no caso do iOS, esse tutorial funciona apenas para Devices abaixo do iPhone X (iPhone 8, 7, 6, 5, etc…).

Agora, vamos realmente começar com o código !

1- Criando React Native App

Criando um novo React Native App, a partir da linha de comando:

react-native init StatusBarColorExample

2- Criando a estrutura para o componente

Na raiz do seu projeto, crie uma estrutura para o seu componente, desse jeito:

A estrutura do componente

3- Iniciando o stateless component

Abra o arquivo GeneralStatusBarColor.js e inicie-o como um stateless component, desse jeito:

import React from 'react';
import { View, StatusBar} from 'react-native';
import styles from './styles/GeneralStatusBarColorStyles';
const GeneralStatusBarColor = () => <View />;
export default GeneralStatusBarColor;

4- Definindo o estilo do componente

Abra o arquivo GeneralStatusBarColorStyles.js e definindo o arquivo, desse jeito:

import { StyleSheet, Platform, StatusBar } from 'react-native';
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
export default StyleSheet.create({
statusBar: {
height: STATUSBAR_HEIGHT
}
});

5- Codificando o componente

Voltando para o arquivo GeneralStatusBarColor.js, Vamos melhorar o código, adicionando o recurso de Status bar background color para Android e iOS.

import React from 'react';
import { View, StatusBar } from 'react-native';
import styles from './styles/GeneralStatusBarColorStyles';
const GeneralStatusBarColor = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
export default GeneralStatusBarColor;

6- Importando e implementando o componente para o arquivo.js principal.

Abra o arquivo App.js e importe o componente, desse jeito:

...
import GeneralStatusBarColor from './src/components/GeneralStatusBarColor';
...

Após a importação, substitua o método render, desse jeito:

...
render() {
return (
<View style={{ flex: 1 }}>
<GeneralStatusBarColor backgroundColor="#772ea2"
      barStyle="light-content"/>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit   App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</View>
);
}
...

7- Testando o componente GeneralStatusBarColor

Para iOS, abra seu simulador e, na raiz do seu projeto, execute este comando:

react-native run-ios

Para Android, abra seu simulador e, no seu projeto raiz, execute este comando:

react-native run-android

Agora, você pode ver que o componente GeneralStatusBarColor está funcionando:

Eu espero que você tenha gostado. Obrigado pelo seu tempo. Até mais! o /