expo-status-bar
gives you a component and imperative interface to control the app status bar to change its text color, background color, hide it, make it translucent or opaque, and apply animations to any of these changes. Exactly what you are able to do with the StatusBar
component depends on the platform you're using.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
Web browser support: there is no API available on the web for controlling the operating system status bar, soexpo-status-bar
will noop (it will do nothing, it will also not error).
expo install expo-status-bar
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React from 'react'; import { Text, View } from 'react-native'; import { StatusBar } from 'expo-status-bar'; export default class App extends React.Component { render() { return ( <View style={{ flex: 1, backgroundColor: '#000', alignItems: 'center', justifyContent: 'center', }}> <Text style={{ color: '#fff' }}>Notice that the status bar has light text!</Text> <StatusBar style="light" /> </View> ); } }
import { StatusBar } from 'expo-status-bar';
setStatusBarBackgroundColor(backgroundColor, animated)
setStatusBarHidden(hidden, animation)
setStatusBarNetworkActivityIndicatorVisible(visible)
setStatusBarStyle(style)
setStatusBarTranslucent(translucent)
setBarStyle
.StatusBar
components mounted in the same app at the same time. For example, if you have multiple screens in your app, you may end up using one per screen. The props of each StatusBar
component will be merged in the order that they were mounted. This component is built on top of the StatusBar component exported from React Native, and it provides defaults that work better for Expo users.style
, should be animated.'fade'
. [iOS only]true
, content will be rendered under the status bar. This is always true
on iOS and cannot be changed. On Android, the default is also true
unless you have explicitly configured the androidStatusBar.translucent
key in app.json
to false
. [Android only]true
to animate the background color change, false
to change immediately.'none'
.true
, content will be rendered under the status bar. This is always true
on iOS and cannot be changed.'none'
, 'fade'
, or 'slide'
.'auto'
, 'inverted'
, 'light'
, or 'dark'
.⚠️auto
andinverted
do not automatically detect color scheme on SDK 37. This is only available in SDK 38 and higher.