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

Question

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 Reading the docs, it looks straight-foward enough since I am using a Stack nav. I can leave in my top level & then add it as a nested StatusBar which gets rendered. However, the color doesn't change at all.

Inside my ScreenView, i am adding:

      <StatusBar barStyle={'default'} backgroundColor={'green'} />

So I ripped out all of my StatusBar references, and the color still seems to be correct out of the box ‍♂️ on the initial page view route.

Any chance the SafeAreaProvider from Expo could be impacting it?

How else could the Status bar color be impacted?

I am using Expo SDK 46 + React Native 0.69.6

GIF:

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

Answer 1

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

Android only solution :

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);
    }, []),
  );

Answer 2

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');