ReactNative StatusBar not changing color on each route and seems to not be doing anything-CodePudding

I know I should be providing code, but at this time, none of my StatusBar code is active and the color is defaulting to the "background color" correctly for my initial sign in screen. I had my <StatusBar /> component at the top level of my app, but now, I need to change StatusBar color based on the route.
After

Something this simple couldn't be tricky to implement right?

CodePudding user response：

I was never able to get that method working with Expo. Fortunately the imperative method still works:

import { StatusBar } from 'react-native';
StatusBar.setBackgroundColor('green');
StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');

CodePudding user response：

use below given code snippet for changing status bar color on each forward and backward move of screens -

import {useFocusEffect} from '@react-navigation/native';

//inside your functional component use useFocusEffect hook

useFocusEffect(
    React.useCallback(() => {
        StatusBar.setBarStyle('dark-content'); // 'light-content' is also available
         StatusBar.setBackgroundColor('white'); //add color code
        StatusBar.setTranslucent(true);
    }, []),
  );