---
modificationDate: May 06, 2026
title: NavigationBar
description: A library that provides access to various interactions with the native navigation bar on Android.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-56/packages/expo-navigation-bar'
packageName: 'expo-navigation-bar'
platforms: ['android', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v56.0.0/sdk/navigation-bar/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# Expo NavigationBar

A library that provides access to various interactions with the native navigation bar on Android.
Android, Included in Expo Go

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

`expo-navigation-bar` provides a component and an imperative API for controlling the app's navigation bar on Android devices, allowing you to change the color of its buttons or hide it.

## Installation

```sh
npx expo install expo-navigation-bar
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Configuration in app config

You can configure `expo-navigation-bar` using its built-in [config plugin](/config-plugins/introduction) if you use config plugins in your project ([Continuous Native Generation (CNG)](/workflow/continuous-native-generation)). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect. If your app does **not** use CNG, then you'll need to manually configure the library.

### Example app.json with config plugin

```json
{
  "expo": {
    "plugins": [
      [
        "expo-navigation-bar",
        {
          "enforceContrast": true,
          "hidden": false,
          "style": "light"
        }
      ]
    ]
  }
}
```

### Configurable properties

| Name | Default | Description |
| --- | --- | --- |
| `enforceContrast` | `true` | Only for: Android. Determines whether the operating system should keep the navigation bar translucent to provide contrast between the navigation buttons and app content. Has no effect on Android 9 and below. |
| `hidden` | `undefined` | Only for: Android. Determines whether the status bar starts hidden. Accepts `true` and `false` as values. |
| `style` | `undefined` | Only for: Android. Determines which style the navigation bar starts with. Accepts `light` and `dark` as values. |

Are you using this library in an existing React Native app?

If you're not using Continuous Native Generation ([CNG](/workflow/continuous-native-generation)) or you're using a native **android** project manually, then you need to add the following configuration to your native project:

-   To hide the navigation bar on **Android**, add `expoNavigationBarHidden` to **android/app/src/main/res/values/styles.xml**:
    
    ```xml
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
      <!-- ... -->
      <item name="expoNavigationBarHidden">true</item>
    </style>
    ```

## Usage

```jsx
import { StyleSheet, Text, View } from 'react-native';
import { NavigationBar } from 'expo-navigation-bar';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Notice that the navigation bar has light buttons!</Text>
      <NavigationBar style="light" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: '#fff',
  },
});
```

## API

```js
import { NavigationBar } from 'expo-navigation-bar';
```

## Component

### `NavigationBar`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[NavigationBarProps](#navigationbarprops)\>

A component that allows you to configure your navigation bar declaratively.

You will likely have multiple `NavigationBar` 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 `NavigationBar` component will be merged in the order that they were mounted.

NavigationBarProps

### `hidden`

Supported platforms: Android.

Optional • Type: `boolean`

If the navigation bar is hidden.

### `style`

Supported platforms: Android.

Optional • Type: [NavigationBarStyle](#navigationbarstyle) • Default: `'auto'`

Sets the color of the navigation bar buttons. 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"`.

> This will have an effect when the following conditions are met:
> 
> -   The device navigation bar is using buttons.
> -   The `enforceContrast` option of the `expo-navigation-bar` plugin is set to `false`.

> 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.

## Component Methods

### `setHidden(hidden)`

Supported platforms: Android.

| Parameter | Type | Description |
| --- | --- | --- |
| `hidden` | `boolean` | If the navigation bar should be hidden. |

  

Set the navigation bar's visibility.

Returns: `void`

Example

```ts
NavigationBar.setHidden(true);
```

### `setStyle(style)`

Supported platforms: Android.

| Parameter | Type | Description |
| --- | --- | --- |
| `style` | [NavigationBarStyle](#navigationbarstyle) | The color of the navigation bar buttons. |

  

Sets the style of the navigation bar.

> This will have an effect when the following conditions are met:
> 
> -   The device navigation bar is using buttons.
> -   The `enforceContrast` option of the `expo-navigation-bar` plugin is set to `false`.

> 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.

Returns: `void`

Example

```ts
NavigationBar.setStyle("dark");
```

## Hooks

> **Deprecated:** This will be removed in a future release.

### `useVisibility()`

Supported platforms: Android.

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

Returns: `NavigationBarVisibility | null`

Visibility of the navigation bar, `null` during async initialization.

## Methods

> **Deprecated:** This will be removed in a future release.

### `NavigationBar.getVisibilityAsync()`

Supported platforms: Android.

Get the navigation bar's visibility.

Returns: `Promise<navigationbarvisibility>`

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

> **Deprecated:** Use `NavigationBar.setStyle` instead. This will be removed in a future release.

### `NavigationBar.setStyle(style)`

Supported platforms: Android.

| Parameter | Type | Description |
| --- | --- | --- |
| `style` | [NavigationBarStyle](#navigationbarstyle) | The color of the navigation bar buttons. |

  

Returns: `void`

> **Deprecated:** Use `NavigationBar.setHidden` instead. This will be removed in a future release.

### `NavigationBar.setVisibilityAsync(visibility)`

Supported platforms: Android.

| Parameter | Type | Description |
| --- | --- | --- |
| `visibility` | [NavigationBarVisibility](#navigationbarvisibility) | Based on CSS visibility property. |

  

Set the navigation bar's visibility.

Returns: `Promise<void>`

## Event Subscriptions

> **Deprecated:** This will be removed in a future release.

### `NavigationBar.addVisibilityListener(listener)`

Supported platforms: Android.

| Parameter | Type |
| --- | --- |
| `listener` | (event: [NavigationBarVisibilityEvent](#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.

Returns: `EventSubscription`

## Types

### `NavigationBarStyle`

Supported platforms: Android.

Literal Type: `string`

Navigation bar style.

-   `auto` will automatically adjust based on the current theme.
-   `light` a light navigation bar with dark content.
-   `dark` a dark navigation bar with light content.
-   `inverted` the bar colors are inverted in relation to the current theme.

Acceptable values are: `'auto'` | `'inverted'` | `'light'` | `'dark'`

> **Deprecated:** This will be removed in a future release.

### `NavigationBarVisibility`

Supported platforms: Android.

Literal Type: `string`

Visibility of the navigation bar.

Acceptable values are: `'visible'` | `'hidden'`

> **Deprecated:** This will be removed in a future release.

### `NavigationBarVisibilityEvent`

Supported platforms: Android.

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

| Property | Type | Description |
| --- | --- | --- |
| rawVisibility | `number` | Native Android system UI visibility state, returned from the native Android `setOnSystemUiVisibilityChangeListener` API. |
| visibility | [NavigationBarVisibility](#navigationbarvisibility) | Current navigation bar visibility. |