KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #claude-code #codex #developer-tools #dsh-plugin #deepseek-harness #windows #open-source #agent-skills #ai

react-native-navigation-bar

★ 95 Open GitHub ↗

React Native StatusBar long-lost twin: A component to control your Android app's navigation bar.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @zoontek/react-native-navigation-bar

React Native [`StatusBar`](https://reactnative.dev/docs/statusbar) long-lost twin: A component to control your Android app's navigation bar.

[![mit licence](https://img.shields.io/dub/l/vibe-d?style=for-the-badge)](https://github.com/zoontek/react-native-navigation-bar/blob/main/LICENSE)
[![npm version](https://img.shields.io/npm/v/@zoontek/react-native-navigation-bar?style=for-the-badge)](https://www.npmjs.com/package/@zoontek/react-native-navigation-bar)
[![npm downloads](https://img.shields.io/npm/dt/@zoontek/react-native-navigation-bar?label=downloads&style=for-the-badge)](https://www.npmjs.com/package/@zoontek/react-native-navigation-bar)

## Credits

This project has been built and is maintained thanks to the support from [Expo](https://expo.dev).

## Installation

```bash
$ npm i -S @zoontek/react-native-navigation-bar
# --- or ---
$ yarn add @zoontek/react-native-navigation-bar
```

> [!IMPORTANT]
> This library requires React Native 0.86+ with edge-to-edge enabled. To turn it on, set `edgeToEdgeEnabled` to `true` in your project's `gradle.properties` file.

```ruby
edgeToEdgeEnabled=true # 👈 set this to true
```

## Considerations

### Transparency

Compared to [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge), this library adopts React Native [`StatusBar`](https://reactnative.dev/docs/statusbar) API and its defaults: the navigation bar is transparent. To enforce a contrasting (semi-opaque) button navigation bar, set the `enforceNavigationBarContrast` option to `true`.

#### React Native

Add both `enforceNavigationBarContrast` attributes to your `android/app/src/main/res/values/styles.xml` file:

```xml

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    
    
    <item name="android:enforceNavigationBarContrast" tools:targetApi="29">false</item>
    <item name="enforceNavigationBarContrast">false</item>
  </style>
</resources>
```

#### Expo

Add the library plugin to your app configuration file and [create a new build](https://docs.expo.dev/develop/development-builds/create-a-build) 👷:

<details open>
<summary><strong>Dynamic configuration (app.config.js, app.config.ts)</strong></summary>

```ts
import type { ConfigContext, ExpoConfig } from "expo/config";
import navigationBar from "@zoontek/react-native-navigation-bar/expo"; // use `require` in app.config.js

export default ({ config }: ConfigContext): ExpoConfig => ({
  plugins: [
    navigationBar({
      android: { enforceNavigationBarContrast: true },
    }),
  ],
});
```

</details>

<details>
<summary><strong>Static configuration (app.json)</strong></summary>

```json
{
  "expo": {
    "plugins": [
      [
        "@zoontek/react-native-navigation-bar",
        { "android": { "enforceNavigationBarContrast": true } }
      ]
    ]
  }
}
```

</details>

## API

### NavigationBar

A React component to control the Android button navigation bar (with back / home / recents buttons).

> [!NOTE]
> This component has no effect on other platforms or when gesture navigation is used.

```tsx
import { NavigationBar } from "@zoontek/react-native-navigation-bar";

type NavigationBarStyle = "default" | "light-content" | "dark-content";

type NavigationBarProps = {
  barStyle?: NavigationBarStyle; // set the color of the navigation bar content
  hidden?: boolean; // hide the navigation bar
};

const App = () => (
  <>
    <NavigationBar barStyle="light-content" />
    {/* … */}
  </>
);
```

#### NavigationBar.pushStackEntry

Push a `NavigationBar` entry onto the stack. The return value should be passed to `popStackEntry` when complete.

```ts
const entry: NavigationBarProps = NavigationBar.pushStackEntry(
  props /*: NavigationBarProps */,
);
```

#### NavigationBar.popStackEntry

Remove an existing `NavigationBar` stack entry from the stack.

```ts
NavigationBar.popStackEntry(entry /*: NavigationBarProps */);
```

#### NavigationBar.replaceStackEntry

Replace an existing `NavigationBar` stack entry with new props.

```ts
const entry: NavigationBarProps = NavigationBar.replaceStackEntry(
  entry /*: NavigationBarProps */,
  props /*: NavigationBarProps */,
);
```

#### NavigationBar.setBarStyle

Set the navigation bar style.

```ts
NavigationBar.setBarStyle(style /*: NavigationBarStyle */);
```

#### NavigationBar.setHidden

Show or hide the navigation bar.

```ts
NavigationBar.setHidden(style /*: boolean */);
```

## Troubleshooting 🤔

#### The bar style behavior is erratic

There's currently [an open issue](https://issuetracker.google.com/issues/346386744) with the Android emulator images regarding the navigation bar style when it is fully transparent. This issue does not occur on physical devices.

react-native-navigation-bar

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README