How do I change the status bar color on iPhone in React Native?

If you’ve looked for a status bar background color setting for iPhone and come up empty, you didn’t miss it, because iOS doesn’t have one. The time, signal, and battery icons sit on top of whatever your app draws at the top of the screen, so changing the color really means changing what’s behind them.

How it works

According to Apple’s guidelines, by default the background of the status bar is transparent, allowing content beneath to show through. That leaves you two separate things to set. The color comes from your own views, specifically the strip at the top that the safe area keeps clear for the status bar and the notch or Dynamic Island. The text and icon color is either light or dark, and you set it with expo-status-bar.

Android now works the same way. Since Expo SDK 54, edge-to-edge is always on, so Android apps also draw behind the status bar, and the backgroundColor prop on the status bar is deprecated and has no effect on Android 15 and later. The approach below covers both platforms.

How to change it

1. Make sure the safe area library is set up. Projects using Expo Router already have react-native-safe-area-context and its provider. Otherwise, install it with npx expo install react-native-safe-area-context and wrap your root component in SafeAreaProvider.

2. Paint the top inset and set the text color on the screen:

   import { StatusBar } from "expo-status-bar";
   import { View } from "react-native";
   import { useSafeAreaInsets } from "react-native-safe-area-context";
   
   export default function HomeScreen() {
     const insets = useSafeAreaInsets();
   
     return (
       <View style={{ flex: 1, backgroundColor: "#FFFFFF" }}>
         <View style={{ height: insets.top, backgroundColor: "#5A45FF" }} />
         <StatusBar style="light" />
         {/* the rest of the screen */}
       </View>
     );
   }

   We’d use insets.top rather than a fixed number, because it keeps the strip the right height on every iPhone, with or without a notch.

3. Pick the text color to match. style takes "light", "dark", "auto", or "inverted". The default, "auto", follows the phone’s light or dark mode, which gives you dark text in light mode even on a dark purple strip, so set "light" or "dark" yourself when the color behind it is fixed.

4. Color the whole top area instead if your screen’s first element already has a background, such as a hero image or a colored card. Put the color on a view that takes paddingTop: insets.top, and the status bar sits over that color with your content starting below it.

How you know it works

On an iPhone with a notch or Dynamic Island, the band behind the time is your color, the icons are readable, and your content starts just below them. On Android, the same screen shows the same color behind the status bar icons.

If it still looks wrong

If you see a white band at the top, the color is probably on a view inside safe area padding rather than behind it, so move it to the outermost view. The same thing at the bottom of the screen is covered in white space at the bottom of an iPhone screen. If the text color won’t change, look for another StatusBar component, for example in your root layout, because when several are mounted their props are merged in the order they mounted, and a later one overrides yours.