GitHub
npm
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 support
There is no API available on the web for controlling the operating system status bar, so
expo-status-barwill noop, so it will do nothing, it will also not error.
- npx expo install expo-status-barIf 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';
const App = () => (
<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>
);
export default App;
import { StatusBar } from 'expo-status-bar';
StatusBarType: React.Element<StatusBarProps>
A component that allows you to configure your status bar without directly calling imperative
methods like setBarStyle.
You will likely have multiple 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.
animatedOptional • Type: boolean
If the transition between status bar property changes should be
animated. Supported for backgroundColor, barStyle and hidden.
hideTransitionAnimationOptional • Type: StatusBarAnimation • Default: 'fade'
The transition effect when showing and hiding the status bar using the hidden prop.
networkActivityIndicatorVisibleOptional • Type: boolean
If the network activity indicator should be visible.
styleOptional • Type: StatusBarStyle • Default: 'auto'
Sets the color of the status bar text. Default value is "auto" which
picks the appropriate value according to the active color scheme, eg:
if your app is dark mode, the style will be "light".
translucentOptional • Type: boolean
If the status bar is translucent. When translucent is set to true,
the app will draw under the status bar. This is the default behaviour in
projects created with Expo tools because it is consistent with iOS.
StatusBar.setStatusBarBackgroundColor(backgroundColor, animated)| Name | Type | Description |
|---|---|---|
| backgroundColor | string | The background color of the status bar. |
| animated | boolean |
|
Set the background color of the status bar.
Returns
voidStatusBar.setStatusBarHidden(hidden, animation)| Name | Type | Description |
|---|---|---|
| hidden | boolean | If the status bar should be hidden. |
| animation | StatusBarAnimation | Animation to use when toggling hidden, defaults to |
Toggle visibility of the status bar.
Returns
voidStatusBar.setStatusBarNetworkActivityIndicatorVisible(visible)| Name | Type | Description |
|---|---|---|
| visible | boolean | If the network activity indicator should be visible. |
Toggle visibility of the network activity indicator.
Returns
voidStatusBar.setStatusBarStyle(style)| Name | Type | Description |
|---|---|---|
| style | StatusBarStyle | The color of the status bar text. |
Set the bar style of the status bar.
Returns
voidStatusBar.setStatusBarTranslucent(translucent)| Name | Type | Description |
|---|---|---|
| translucent | boolean | Whether the app can draw under the status bar. When |
Set the translucency of the status bar.
Returns
voidStatusBarAnimationstring - Acceptable values are: 'none', 'fade', 'slide'.
StatusBarStylestring - Acceptable values are: 'auto', 'inverted', 'light', 'dark'.