expo-status-bar

What is expo-status-bar?

The expo-status-bar package provides a component to control the appearance of the status bar in a React Native application. It allows you to set the style, background color, and visibility of the status bar, making it easier to customize the user interface.

What are expo-status-bar's main functionalities?

Setting the Status Bar Style

This feature allows you to set the style of the status bar. The 'style' prop can be set to 'auto', 'inverted', 'light', or 'dark'. In this example, the status bar style is set to 'dark'.

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <StatusBar style='dark' />
    </View>
  );
}

Setting the Status Bar Background Color

This feature allows you to set the background color of the status bar. The 'backgroundColor' prop can be set to any valid color string. In this example, the status bar background color is set to '#61dafb'.

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <StatusBar backgroundColor='#61dafb' />
    </View>
  );
}

Hiding the Status Bar

This feature allows you to hide the status bar. The 'hidden' prop can be set to 'true' or 'false'. In this example, the status bar is hidden by setting the 'hidden' prop to 'true'.

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <StatusBar hidden={true} />
    </View>
  );
}

Other packages similar to expo-status-bar

react-native-status-bar-height

The react-native-status-bar-height package provides a way to get the height of the status bar on both Android and iOS. Unlike expo-status-bar, it does not offer functionality to control the appearance of the status bar, but it is useful for layout calculations.

README

Provides the same interface as the React Native StatusBar API, but with slightly different defaults to work great in Expo environments.

• Default to translucent={true} on Android.
• The style="auto" maps to a dark status bar when in light mode and a light status bar when in dark moded. style="inverted" inverts this behavior.

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Please refer to the React Native StatusBar API documentation.

Installation in bare React Native projects

npm install expo-status-bar

Configure for Android

No additional setup necessary.

Configure for iOS

Run npx pod-install after installing the npm package.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.