React Native header bar

Question

How can I configure the Android header bar background color similar to the ios with react native?

Thanks

Answer 1

You can use StatusBar ( https://reactnative.dev/docs/statusbar )

import { StatusBar } from 'react-native';
// ...
StatusBar.setBackgroundColor("#000000");

Answer 2

Use this

<StatusBar backgroundColor="yellow" />

For more info read this

Answer 3

Great Question!

You can use the react-native StatusBar tag:

Just do this:

import React, { Component } from 'react';
import { Platform, StyleSheet, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';


class MyStatusbar extends Component {

    render() {
        return (
            <View style={styles.StatusBar}>
                <StatusBar translucent barStyle = "light-content" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    StatusBar: {
        height: Constants.statusBarHeight,
        backgroundColor: '#6a11cb'
    }
});

export default MyStatusbar;

and where you want the status bar use:

import MyStatusbar from './file-location'

and in the return(); :

<MyStatusbar />