Skip to main content
Mapagam

Working with Status Bar and System UI

1. Configuring Status Bar

Property Description Values Notes
barStyle Defines the color of status bar text "light-content", "dark-content" Default is "light-content" on iOS, "dark-content" on Android
backgroundColor Sets the background color of the status bar Hex color code or named color Only affects Android; iOS uses barStyle
hidden Controls visibility of the status bar true, false Default is false
translucent Makes the status bar translucent on Android true, false Default is false; requires backgroundColor to be set

Example: Setting Status Bar Style

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#000000"
        hidden={false}
        translucent={true}
      />
      <Text>Hello, world!</Text>
    </View>
  );
}

2. Setting Status Bar Style

Property Values Description
barStyle "light-content", "dark-content" Defines the color of status bar text. light-content makes text dark, dark-content makes text light.
backgroundColor string Background color of the status bar. Accepts any valid CSS color value.
hidden true, false Whether to hide the status bar entirely.
translucent true, false Whether the status bar is translucent. Useful for blending with content.

Example: Setting Status Bar Style

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#000000"
        hidden={false}
        translucent={true}
      />
      <Text>Hello, Expo!</Text>
    </View>
  );
}

3. Hiding Status Bar

Property Values Description
barStyle "light-content", "dark-content" Defines the color of status bar text
hidden true, false Controls visibility of the status bar

Example: Hide Status Bar

import { StatusBar } from &#x27;expo-status-bar&#x27;;

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <Text>Status bar is hidden</Text>
    </View>
  );
}
Note: The StatusBar component must be placed at the root level of your app to effectively control system UI elements.

4. Setting Background Color

Property Values Description
backgroundColor #000000, red, rgba(0,0,0,0.5) Sets the background color of the status bar

Example: Setting Status Bar Background Color

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar backgroundColor="#000" />
    </View>
  );
}

5. Using System UI Mode

Mode Description Notes
"default" Shows the system UI normally Default behavior
"hidden" Hides the system UI (status bar, navigation bar) Useful for immersive experiences
"light-content" Light content on dark background For status bar with light text on dark background
"dark-content" Dark content on light background For status bar with dark text on light background

Example: Setting System UI Mode

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar style="light" />
    </View>
  );
}
Note: The style prop supports "auto", "light", and "dark" values. On Android, you can also use "default" and "hidden".

6. Setting Navigation Bar

Property Description Values Notes
navigationBar.hidden Hides the navigation bar true / false Default is false
navigationBar.backgroundColor Sets the background color of the navigation bar Color value (e.g., #000000) Supports all valid color formats
navigationBar.translucent Makes the navigation bar translucent true / false Default is false

Example: Hiding Navigation Bar

import { StatusBar } from 'expo-status-bar';&#10;&#10;export default function App() {&#10;  return (&#10;    <View style={{ flex: 1 }}>&#10;      <StatusBar hidden={true} />&#10;    </View>&#10;  );&#10;}

Example: Setting Navigation Bar Background Color

import { StatusBar } from 'expo-status-bar';&#10;&#10;export default function App() {&#10;  return (&#10;    <View style={{ flex: 1 }}>&#10;      <StatusBar backgroundColor="#000000" />&#10;    </View>&#10;  );&#10;}

7. Implementing Edge-to-Edge Layout

Example: Basic Edge-to-Edge Setup

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <StatusBar style="light" />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  content: {
    flex: 1,
    paddingTop: 0,
    paddingBottom: 0
  }
});
Property Description Values Notes
barStyle Controls the color of status bar text "light", "dark" Default is "light"
backgroundColor Background color of the status bar "#ffffff", "transparent" Requires translucent to be true
translucent Makes the status bar translucent true, false Enables edge-to-edge layout when true
Note: For full edge-to-edge layout, ensure SafeAreaView is used with zero padding.
Warning: On Android, translucent must be set to true for edge-to-edge behavior.

Key Points

  • Use StatusBar with translucent: true for edge-to-edge layout
  • Combine with SafeAreaView to avoid content overlap
  • Set barStyle to match your app's theme

8. Using Safe Area Context

Example: Basic Safe Area Usage

{'import { SafeAreaProvider, SafeAreaView } from \'react-native-safe-area-context\';\n\nconst App = () => {\n  return (\n    <SafeAreaProvider>\n      <SafeAreaView style={{ flex: 1 }}>\n        <View style={{ flex: 1, justifyContent: \'center\' }}>\n          <Text>Content inside safe area</Text>\n        </View>\n      </SafeAreaView>\n    </SafeAreaProvider>\n  );\n};\n\nexport default App;'}
Property Description Default
safeAreaInsets Object containing inset values for each edge (top, bottom, left, right) { top: 0, bottom: 0, left: 0, right: 0 }
edges Array of edges to include in safe area (top, bottom, left, right) [\'top\', \'bottom\']
Note: SafeAreaView is a component that automatically applies padding to avoid content being obscured by system UI elements like the status bar or home indicator.

9. Getting Safe Area Insets

Example: Using SafeAreaInsets

import { SafeAreaInsets } from &#x27;expo&#x27;;

const insets = SafeAreaInsets.getSafeAreaInsets();
console.log(insets);
Property Description Values Notes
safeAreaInsets.top Top safe area inset number Pixel value from top of screen
safeAreaInsets.bottom Bottom safe area inset number Pixel value from bottom of screen
safeAreaInsets.left Left safe area inset number Pixel value from left of screen
safeAreaInsets.right Right safe area inset number Pixel value from right of screen
Note: Safe area insets are essential for ensuring content is not obscured by system UI elements like status bars or home indicators.

10. Configuring Screen Orientation

Property Values Description
orientation "default", "landscape", "landscape-left", "landscape-right", "portrait", "portrait-upside-down" Defines the screen orientation behavior

Example: Setting Orientation in App.js

import { StatusBar } from &#x27;expo-status-bar&#x27;;
import { View } from &#x27;react-native&#x27;;

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar orientation="landscape" />
    </View>
  );
}
Note: The orientation property is supported on both iOS and Android, but some values may behave differently depending on the platform.

11. Locking Screen Orientation

Property Values Description
orientation "default", "portrait", "landscape" Defines the screen orientation
orientation.portrait true, false Locks the screen in portrait mode
orientation.landscape true, false Locks the screen in landscape mode

Example: Locking to Portrait

import { StatusBar } from 'expo-status-bar';\n\nexport default function App() {\n  return (\n    <View style={styles.container}>\n      <StatusBar\n        orientation="portrait"\n        style="light"\n      />\n      <Text>Portrait Locked</Text>\n    </View>\n  );\n}

Example: Locking to Landscape

import { StatusBar } from 'expo-status-bar';\n\nexport default function App() {\n  return (\n    <View style={styles.container}>\n      <StatusBar\n        orientation="landscape"\n        style="dark"\n      />\n      <Text>Landscape Locked</Text>\n    </View>\n  );\n}

12. Handling Orientation Changes

Property Description Values
orientation Sets the orientation of the app default, portrait, landscape
orientationLock Locks the orientation to a specific mode portrait, landscape, none

Example: Setting Orientation in App Configuration

{
  "expo": {
    "orientation": "portrait",
    "orientationLock": "portrait"
  }
}

Example: Using Screen Orientation API

import * as ScreenOrientation from 'expo-screen-orientation';

// Lock orientation to portrait
await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);

// Unlock orientation
await ScreenOrientation.unlockAsync();

Was this article helpful?

Related Cheat Sheets