HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Expo NavigationBar

GitHub

npm

A library that provides access to various interactions with the native navigation bar on Android.


expo-navigation-bar enables you to modify and observe the native navigation bar on Android devices. Due to some Android platform restrictions, parts of this API overlap with the expo-status-bar API.

Properties are named after style properties; visibility, position, backgroundColor, borderColor, and so on.

The APIs in this package have no impact when "Gesture Navigation" is enabled on the Android device. There is currently no native Android API to detect if "Gesture Navigation" is enabled or not.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

Terminal
- npx expo install expo-navigation-bar

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

API

import * as NavigationBar from 'expo-navigation-bar';

Hooks

useVisibility()

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

Example

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

Returns

  • NavigationBarVisibility | null

Visibility of the navigation bar, null during async initialization.

Methods

NavigationBar.getBackgroundColorAsync()

Gets the navigation bar's background color.

Example

const color = await NavigationBar.getBackgroundColorAsync();

Returns

  • Promise<ColorValue>

Current navigation bar color in hex format. Returns #00000000 (transparent) on unsupported platforms (iOS, web).

NavigationBar.getBehaviorAsync()

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

Example

await NavigationBar.getBehaviorAsync()

Returns

  • Promise<NavigationBarBehavior>

Navigation bar interaction behavior. Returns inset-touch on unsupported platforms (iOS, web).

NavigationBar.getBorderColorAsync()

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

Example

const color = await NavigationBar.getBorderColorAsync();

Returns

  • Promise<ColorValue>

Navigation bar top border color in hex format. Returns #00000000 (transparent) on unsupported platforms (iOS, web).

NavigationBar.getButtonStyleAsync()

Gets the navigation bar's button color styles.

Example

const style = await NavigationBar.getButtonStyleAsync();

Returns

  • Promise<NavigationBarButtonStyle>

Navigation bar foreground element color settings. Returns light on unsupported platforms (iOS, web).

NavigationBar.getVisibilityAsync()

Get the navigation bar's visibility.

Example

const visibility = await NavigationBar.getVisibilityAsync("hidden");

Returns

  • Promise<NavigationBarVisibility>

Navigation bar's current visibility status. Returns hidden on unsupported platforms (iOS, web).

NavigationBar.setBackgroundColorAsync(color)

NameTypeDescription
colorColorValue

Any valid CSS 3 (SVG) color.


Changes the navigation bar's background color.

Example

NavigationBar.setBackgroundColorAsync("white");

Returns

  • Promise<void>

NavigationBar.setBehaviorAsync(behavior)

NameTypeDescription
behaviorNavigationBarBehavior

Dictates the interaction behavior of the navigation bar.


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.

Example

await NavigationBar.setBehaviorAsync('overlay-swipe')

Returns


NavigationBar.setBorderColorAsync(color)

NameTypeDescription
colorColorValue

Any valid CSS 3 (SVG) color.


Changes the navigation bar's border color.

Example

NavigationBar.setBorderColorAsync("red");

Returns

  • Promise<void>

NavigationBar.setButtonStyleAsync(style)

NameTypeDescription
styleNavigationBarButtonStyle

Dictates the color of the foreground element color.


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

Example

NavigationBar.setButtonStyleAsync("light");

Returns

  • Promise<void>

NavigationBar.setPositionAsync(position)

NameTypeDescription
positionNavigationBarPosition

Based on CSS position property.


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.

Example

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

Returns

  • Promise<void>

NavigationBar.setVisibilityAsync(visibility)

NameTypeDescription
visibilityNavigationBarVisibility-

Set the navigation bar's visibility.

Example

NavigationBar.setVisibilityAsync("hidden");

Returns

  • Promise<void>

NavigationBar.unstable_getPositionAsync()

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.

Example

await NavigationBar.unstable_getPositionAsync()

Returns

  • Promise<NavigationBarPosition>

Navigation bar positional rendering mode. Returns relative on unsupported platforms (iOS, web).

Event Subscriptions

NavigationBar.addVisibilityListener(listener)

NameTypeDescription
listener(event: NavigationBarVisibilityEvent) => void-

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

Example

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

Returns

  • Subscription

Types

NavigationBarBehavior

Literal Type: string

Interaction behavior for the system navigation bar.

Acceptable values are: 'overlay-swipe' | 'inset-swipe' | 'inset-touch'

NavigationBarButtonStyle

Literal Type: string

Appearance of the foreground elements in the navigation bar, i.e. the color of the menu, back, home button icons.

  • dark makes buttons darker to adjust for a mostly light nav bar.
  • light makes buttons lighter to adjust for a mostly dark nav bar.

Acceptable values are: 'light' | 'dark'

NavigationBarPosition

Literal Type: string

Navigation bar positional mode.

Acceptable values are: 'relative' | 'absolute'

NavigationBarVisibility

Literal Type: string

Visibility of the navigation bar.

Acceptable values are: 'visible' | 'hidden'

NavigationBarVisibilityEvent

Current system UI visibility state. Due to platform constraints, this will return when the status bar visibility changes as well as the navigation bar.

NameTypeDescription
rawVisibilitynumber

Native Android system UI visibility state, returned from the native Android setOnSystemUiVisibilityChangeListener API.

visibilityNavigationBarVisibility

Current navigation bar visibility.