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;

• animated

  Optional • Type: boolean

  If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.

  ---

• backgroundColor

  Optional • Type: string

  Android Only
  
  

  The background color of the status bar.

  ---

• hidden

  Optional • Type: boolean

  If the status bar is hidden.

  ---

• hideTransitionAnimation

  Optional • Type: StatusBarAnimation • Default: 'fade'

  iOS Only
  
  

  The transition effect when showing and hiding the status bar using the hidden prop.

  ---

• networkActivityIndicatorVisible

  Optional • Type: boolean

  iOS Only
  
  

  If the network activity indicator should be visible.

  ---

• style

  Optional • 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".

  ---

• translucent

  Optional • Type: boolean

  Android Only
  
  

  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.

  ---