Expo NavigationBar

React hook that statefully updates with the visibility of the system navigation bar.

function App() {
  const visibility = NavigationBar.useVisibility()
  // React Component...
}

Gets the navigation bar's background color.

const color = await NavigationBar.getBackgroundColorAsync();

Gets the behavior of the status and navigation bars when the user swipes or touches the screen.

await NavigationBar.getBehaviorAsync()

Gets the navigation bar's top border color, also known as the "divider color".

const color = await NavigationBar.getBorderColorAsync();

Gets the navigation bar's button color style.

const style = await NavigationBar.getButtonStyleAsync();

Get the navigation bar's visibility.

const visibility = await NavigationBar.getVisibilityAsync();

Changes the navigation bar's background color.

NavigationBar.setBackgroundColorAsync("white");

Sets the behavior of the status bar and navigation bar when they are hidden and the user wants to reveal them.

For example, if the navigation bar is hidden (setVisibilityAsync(false)) and the behavior is 'overlay-swipe', the user can swipe from the bottom of the screen to temporarily reveal the navigation bar.

• 'overlay-swipe': Temporarily reveals the System UI after a swipe gesture (bottom or top) without insetting your App's content.
• 'inset-swipe': Reveals the System UI after a swipe gesture (bottom or top) and insets your App's content (Safe Area). The System UI is visible until you explicitly hide it again.
• 'inset-touch': Reveals the System UI after a touch anywhere on the screen and insets your App's content (Safe Area). The System UI is visible until you explicitly hide it again.

await NavigationBar.setBehaviorAsync('overlay-swipe')

Changes the navigation bar's border color.

NavigationBar.setBorderColorAsync("red");

Changes the navigation bar's button colors between white (light) and a dark gray color (dark).

NavigationBar.setButtonStyleAsync("light");

Sets positioning method used for the navigation bar (and status bar). Setting position absolute will float the navigation bar above the content, whereas position relative will shrink the screen to inline the navigation bar.

When drawing behind the status and navigation bars, ensure the safe area insets are adjusted accordingly.

// enables edge-to-edge mode
await NavigationBar.setPositionAsync('absolute')
// transparent backgrounds to see through
await NavigationBar.setBackgroundColorAsync('#ffffff00')

Sets the style of the navigation bar.

This will have an effect when the following conditions are met:

• The enforceContrast option of the expo-navigation-bar plugin is set to false.
• The device is using the three-button navigation bar.

Due to a bug in the Android 15 emulator this function may have no effect. Try a physical device or an emulator with a different version of Android.

Set the navigation bar's visibility.

NavigationBar.setVisibilityAsync("hidden");

Whether the navigation and status bars float above the app (absolute) or sit inline with it (relative). This value can be incorrect if androidNavigationBar.visible is used instead of the config plugin position property.

This method is unstable because the position can be set via another native module and get out of sync. Alternatively, you can get the position by measuring the insets returned by react-native-safe-area-context.

await NavigationBar.unstable_getPositionAsync()

Observe changes to the system navigation bar. Due to platform constraints, this callback will also be triggered when the status bar visibility changes.

NavigationBar.addVisibilityListener(({ visibility }) => {
  // ...
});