5

I am currently using Expo and React Navigation to toggle between Dark Theme and Light Theme for my app. The only issue is that I’m not able to change the status bar color on iOS based on the theme.

I have a Tab Navigator nested inside of Drawer Navigator, but I’m having trouble figuring out how to change the status bar color on iOS when I toggle the theme for all screens in the nested navigation. This is what part of my drawer navigator looks like.

 <themeContext.Provider value={themeData}>
    <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          swipeEdgeWidth: 0,
          drawerActiveBackgroundColor: '#e8e4f0',
          drawerActiveTintColor: '#8a76b6',
          drawerInactiveBackgroundColor: 'transparent',
          drawerInactiveTintColor: '#bcbcc1',

        }}

2 Answers 2

6

You can use react-native's StatusBar methods to change it background or barStyle -

StatusBar.setBarStyle(theme == 'Light' ? 'dark-content' : 'light-content');
StatusBar.setBackgroundColor(theme == 'Light' ? '#fff' : '#000')

call this above functions when you change theme.

another way you can change it from root component if you want to change Status bar background for all screen then you can do like this -

import { SafeAreaView, StatusBar } from 'react-native'

...
<SafeAreaView style={{flex: 1}}>
  <StatusBar
      backgroundColor={theme == 'Light' ? '#fff' : '#000'}
      barStyle={theme == 'Light' ? 'dark-content' : 'light-content'}
  />
  <ThemeContext.Provider value={themeData}>
    <NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
       <Drawer.Navigator
         screenOptions={{
           ...
         }}>
        ...
      </Drawer.Navigator>
    </NavigationContainer>
  </ThemeContext.Provider>
</SafeAreaView>
3

You need to use StatusBar from react-native. I personally put it next to the Navigator (whatever you named it) in the App.tsx/App.jsx. Like example below:

<>
  <StatusBar
  backgroundColor={
    theme == "Light"
      ? CustomDefaultTheme
      : CustomDarkTheme
  }
  barStyle={
    theme == "Light"
      ? CustomDefaultTheme
      : CustomDarkTheme
  }
  />
  <Navigation />
</>

You can adjust the barStyle and backgroundColor as you see fit.

For more details about StatusBar props, check here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.