'React native (expo) have a different navigation bar color for each page (on Android)

Android phones that have a navigation bar like that from the iPhone, have the default background color as white, which looks really off if my screen's background color is different than white, so I need to change the background color depending on the background color of my screen.

Currently I'm using expo to change that color whenever a screen component loads, but that doesn't work when I'm navigating back to a previous screen.

This is what I have in all of my screens (only with different colors to match my background)

  useEffect(() => {
    if (Platform.OS === 'android') {
      NavigationBar.setBackgroundColorAsync(colors.main);
    }
  }, []);

How can I make this run when I navigate back to a screen that's already loaded? Or what's another solution to my problem?

react-native expo

Solution 1:^[1]

What I ended up doing is using useIsFocused from @react-navigation/native to tell when the user came back to the screen and then calling NavigationBar.setBackgroundColorAsync again

Solution 2:^[2]

You should be able to achieve this by importing StatusBar from React-Native;

import { StatusBar } from 'react-native';

const HomeScreen = ({ navigation }) => {
StatusBar.setBackgroundColor(primary_color)
return (
...
)}

Or you can set it within the return function as such;

return (
<SafeAreaView style={styles.container}>
  <StatusBar
    animated={true}
    backgroundColor="red"
    barStyle={statusBarStyle}
    showHideTransition={statusBarTransition}
    hidden={hidden} />
    ...

Ref: https://reactnative.dev/docs/statusbar

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Paul
Solution 2	Aleksandar Zoric

'React native (expo) have a different navigation bar color for each page (on Android)

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]