StatusBar

StatusBar

StatusBar renders nothing; mounting it sets the bar's barStyle ('dark-content' for dark icons, 'light-content' for light ones, or 'default'), hidden, and animated to animate changes. iOS adds showHideTransition. You may mount one per screen: React Native 36,878 stacks them and merges their props in mount order, so the latest wins. Outside a component, use StatusBar.setBarStyle(), setHidden() and pushStackEntry()/popStackEntry().

What changed is the background. Android 15 made apps that target API level 35 draw edge to edge behind a transparent bar and turned Window.setStatusBarColor() into a no-op; Android 16 (API 36) removed the opt-out. React Native's backgroundColor and translucent props were therefore deprecated in 0.76 and removed in 0.87, together with setBackgroundColor(), setTranslucent() and the iOS network activity indicator. Expo SDK 57 6,418 's React Native 0.86.3 still accepts them, to no effect. The bar is always "translucent" now, and your app paints the color behind it.

StatusDemo.tsx (excerpt): paint behind the bar and measure itJavaScript

  const insets = useSafeAreaInsets();
  console.log('currentHeight', StatusBar.currentHeight, 'insets.top', insets.top);
  return (
    <View style={{ flex: 1 }}>
      <StatusBar barStyle="light-content" animated />
      {/* edge to edge: nothing is painted behind the bar unless you paint it */}
      <View style={{ backgroundColor: '#1565c0', paddingTop: insets.top, padding: 16 }}>
        <Text style={{ color: '#fff', fontSize: 24, fontWeight: 'bold' }}>BookNest</Text>
      </View>
    </View>
  );

Output

 LOG  currentHeight 50.28571319580078 insets.top 50.28571319580078

Both report 50.3 dp here, but StatusBar.currentHeight is Android-only. Prefer useSafeAreaInsets() from react-native-safe-area-context 2,760 , which also covers notches, the navigation bar and iOS; Edge-to-Edge covers the rest of edge to edge.

MENU