expo-status-bar

Control the appearance of the system status bar for iOS and Android

expo-status-bar

Version: 55.0.3

Provides the same interface as React Native’s StatusBar API, but with better defaults for Expo environments and automatic edge-to-edge support.

Installation

npx expo install expo-status-bar

Usage

import { StatusBar } from 'expo-status-bar';

function App() {
  return (
    <>
      <StatusBar style="auto" />
      {/* Your app content */}
    </>
  );
}

API Reference

StatusBar Component

style · 'auto' | 'inverted' | 'light' | 'dark' · default: "auto"

Sets the color scheme of the status bar

• auto: Automatically picks based on app color scheme
• inverted: Opposite of the app color scheme
• light: White text/icons (for dark backgrounds)
• dark: Dark text/icons (for light backgrounds)

<StatusBar style="light" />

backgroundColor · string

Android only: Background color of the status bar

<StatusBar backgroundColor="#000000" />

translucent · boolean

Android only: Makes status bar translucent

<StatusBar translucent />

hidden · boolean

Hides the status bar

<StatusBar hidden />

networkActivityIndicatorVisible · boolean

iOS only: Shows network activity indicator

<StatusBar networkActivityIndicatorVisible />

animated · boolean

Animates status bar changes

<StatusBar animated />

Imperative API

setStatusBarStyle(style, animated) · (style: StatusBarStyle, animated?: boolean) => void

Sets the status bar style imperatively

import { setStatusBarStyle } from 'expo-status-bar';

setStatusBarStyle('light', true);

setStatusBarBackgroundColor(color, animated) · (color: string, animated?: boolean) => void

Android only: Sets status bar background color

import { setStatusBarBackgroundColor } from 'expo-status-bar';

setStatusBarBackgroundColor('#FF0000', true);

setStatusBarHidden(hidden, animation) · (hidden: boolean, animation?: 'none' | 'fade' | 'slide') => void

Shows or hides the status bar

import { setStatusBarHidden } from 'expo-status-bar';

setStatusBarHidden(true, 'slide');

setStatusBarTranslucent(translucent) · (translucent: boolean) => void

Android only: Sets status bar translucency

import { setStatusBarTranslucent } from 'expo-status-bar';

setStatusBarTranslucent(true);

setStatusBarNetworkActivityIndicatorVisible(visible) · (visible: boolean) => void

iOS only: Shows/hides network activity indicator

import { setStatusBarNetworkActivityIndicatorVisible } from 'expo-status-bar';

setStatusBarNetworkActivityIndicatorVisible(true);

Examples

Basic Usage

import { StatusBar } from 'expo-status-bar';
import { View, Text } from 'react-native';

function App() {
  return (
    <View style={{ flex: 1, backgroundColor: '#000' }}>
      <StatusBar style="light" />
      <Text style={{ color: '#fff' }}>Dark background, light status bar</Text>
    </View>
  );
}

Auto Style Based on Theme

import { StatusBar } from 'expo-status-bar';
import { useColorScheme } from 'react-native';

function App() {
  return (
    <>
      <StatusBar style="auto" />
      {/* Status bar automatically adjusts to light/dark mode */}
    </>
  );
}

Screen-Specific Status Bar

import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';

function HomeScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      <StatusBar style="dark" />
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: '#000' }}>
      <StatusBar style="light" />
    </View>
  );
}

Android Translucent Status Bar

import { StatusBar } from 'expo-status-bar';
import { View, ImageBackground } from 'react-native';

function App() {
  return (
    <ImageBackground source={require('./bg.jpg')} style={{ flex: 1 }}>
      <StatusBar 
        style="light" 
        translucent 
        backgroundColor="transparent" 
      />
    </ImageBackground>
  );
}

Hide Status Bar

import { StatusBar } from 'expo-status-bar';
import { Video } from 'expo-av';

function VideoPlayer() {
  return (
    <>
      <StatusBar hidden />
      <Video
        source={require('./video.mp4')}
        style={{ flex: 1 }}
        resizeMode="cover"
      />
    </>
  );
}

Network Activity Indicator (iOS)

import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';

function App() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        await fetch('https://api.example.com/data');
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  return (
    <>
      <StatusBar 
        style="auto" 
        networkActivityIndicatorVisible={loading} 
      />
    </>
  );
}

Imperative Control

import { 
  setStatusBarStyle, 
  setStatusBarHidden,
  setStatusBarBackgroundColor 
} from 'expo-status-bar';
import { Platform } from 'react-native';

function toggleStatusBar() {
  setStatusBarHidden(true, 'slide');
  
  setTimeout(() => {
    setStatusBarHidden(false, 'slide');
  }, 2000);
}

function setDarkMode() {
  setStatusBarStyle('light', true);
  
  if (Platform.OS === 'android') {
    setStatusBarBackgroundColor('#000000', true);
  }
}

With React Navigation

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function LightScreen() {
  return (
    <>
      <StatusBar style="dark" backgroundColor="#ffffff" />
      {/* Light screen content */}
    </>
  );
}

function DarkScreen() {
  return (
    <>
      <StatusBar style="light" backgroundColor="#000000" />
      {/* Dark screen content */}
    </>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Light" component={LightScreen} />
        <Stack.Screen name="Dark" component={DarkScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Conditional Styling

import { StatusBar } from 'expo-status-bar';
import { useColorScheme } from 'react-native';

function App() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  return (
    <>
      <StatusBar 
        style={isDark ? 'light' : 'dark'}
        backgroundColor={isDark ? '#000' : '#fff'}
      />
    </>
  );
}

TypeScript

import { StatusBar } from 'expo-status-bar';
import type { StatusBarStyle } from 'expo-status-bar';

const style: StatusBarStyle = 'light';

<StatusBar style={style} backgroundColor="#000" />;

Platform Support

Platform	Supported
iOS	✅
Android	✅
Web	❌

Differences from React Native StatusBar

1. Better Defaults: style="auto" automatically adapts to color scheme
2. Edge-to-Edge Support: Works correctly with Android edge-to-edge mode
3. Simplified API: Easier to use in Expo projects
4. TypeScript: Better type definitions

Best Practices

1. Use “auto” Style: Let the component automatically adapt to theme
2. One Per Screen: Place one <StatusBar /> per screen/route
3. Match Background: Status bar style should match screen background
4. Test Both Themes: Test your app in both light and dark modes
5. Consider Safe Area: Use with react-native-safe-area-context for proper spacing

Resources

• Official Documentation
• GitHub Repository