My use of StatusBar in BottomTabNavigator did not work

Issue

After you switch tabs in the BottomTabNavigator, the statusBar cannot be updated

https://snack.expo.dev/@bbbtt04/my-use-of-statusbar-in-bottomtabnavigator-did-not-work

This is an example of running at expo, asking the big guy to help ,I'm really upset

After you switch tabs in the BottomTabNavigator, the statusBar needs to be updated

Solution

StatusBar updates only at the time of rendering.

So, whenever you switch between tabs you need to re-render your StatusBar for the backgroundColor to get updated.

You can do this by using the useIsFocused hook.

    import { useIsFocused } from '@react-navigation/native';
    
    function HomeScreen() {
      const isFocused = useIsFocused();
    
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          {isFocused ? <StatusBar backgroundColor={'white'} /> : null}
          <Text>Home!</Text>
        </View>
      );
    }

Same handling will be done in SettingsScreen().

Basically, this will re-render your StatusBar whenever your selected Tab is in focus. You can read more about useIsFocused() from here.

Answered By - Vibhor