Zoontek React Native Navigation Bar

https://github.com/zoontek/react-native-navigation-bar
Admin
Zoontek React Native Navigation Bar is a component that controls your Android app's navigation bar,...
Tokens:1,828
Snippets:28
Trust Score:9.8
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install Example App Dependencies

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/CONTRIBUTING.md

Install dependencies for the example application, including iOS specific pods.

```bash
cd example
yarn install

cd ios
bundle install && bundle exec pod install
```

--------------------------------

### Start the Development Server

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/CONTRIBUTING.md

Start the development server for the example application.

```bash
yarn start
```

--------------------------------

### Install @zoontek/react-native-navigation-bar

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Install the library using npm or yarn.

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

--------------------------------

### Install Project Dependencies

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/CONTRIBUTING.md

Install the necessary dependencies for the main project using yarn v1.

```bash
cd react-native-navigation-bar
yarn install
```

--------------------------------

### Clone the Repository

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/CONTRIBUTING.md

Clone your forked repository to your local machine to begin development.

```bash
git clone https://github.com/zoontek/react-native-navigation-bar.git
```

--------------------------------

### Run Pre-commit Checks

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/CONTRIBUTING.md

Execute pre-commit checks to ensure code quality, including formatting and typing.

```bash
yarn prepack
```

--------------------------------

### Configure Navigation Bar Contrast in Expo (Static)

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Configure navigation bar contrast using the static `app.json` configuration for Expo projects.

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

--------------------------------

### Configure Navigation Bar Contrast in Expo (Dynamic)

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use the library plugin in `app.config.js` or `app.config.ts` for dynamic Expo configuration to enforce navigation bar contrast.

```typescript
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 },
    }),
  ],
});
```

--------------------------------

### Push NavigationBar Stack Entry

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use `NavigationBar.pushStackEntry` to add a navigation bar configuration to the stack. Remember to pass the returned entry to `popStackEntry`.

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

```

--------------------------------

### NavigationBar.setHidden

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Shows or hides the navigation bar.

```APIDOC
## NavigationBar.setHidden

### Description
Show or hide the navigation bar.

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

--------------------------------

### Show or Hide Navigation Bar

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use `NavigationBar.setHidden` to control the visibility of the navigation bar.

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

```

--------------------------------

### NavigationBar.setBarStyle

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Sets the navigation bar style.

```APIDOC
## NavigationBar.setBarStyle

### Description
Set the navigation bar style.

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

--------------------------------

### NavigationBar.pushStackEntry

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

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

```APIDOC
## NavigationBar.pushStackEntry

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

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

--------------------------------

### NavigationBar.replaceStackEntry

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Replaces an existing NavigationBar stack entry with new props.

```APIDOC
## NavigationBar.replaceStackEntry

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

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

--------------------------------

### Enable Edge-to-Edge in Gradle Properties

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Set `edgeToEdgeEnabled` to true in your project's `gradle.properties` file to enable edge-to-edge display.

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

--------------------------------

### Set Navigation Bar Style

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use `NavigationBar.setBarStyle` to directly set the navigation bar's content style (e.g., light or dark).

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

```

--------------------------------

### Replace NavigationBar Stack Entry

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use `NavigationBar.replaceStackEntry` to update an existing navigation bar configuration on the stack with new props.

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

```

--------------------------------

### Pop NavigationBar Stack Entry

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Use `NavigationBar.popStackEntry` to remove a previously pushed navigation bar configuration from the stack.

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

```

--------------------------------

### Enforce Navigation Bar Contrast in styles.xml

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Add the `enforceNavigationBarContrast` item to your `android/app/src/main/res/values/styles.xml` to enforce a contrasting navigation bar background.

```xml
<resources>
  <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- … -->
    <!-- enforce a contrasting navigation bar background (optional) -->
    <item name="enforceNavigationBarContrast">true</item>
  </style>
</resources>
```

--------------------------------

### Basic NavigationBar Component Usage

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Import and use the NavigationBar component in your React Native application to control the navigation bar's appearance.

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

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

Removes an existing NavigationBar stack entry from the stack.

```APIDOC
## NavigationBar.popStackEntry

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

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

--------------------------------

### NavigationBar Component

Source: https://github.com/zoontek/react-native-navigation-bar/blob/main/README.md

The main NavigationBar component allows for controlling the Android button navigation bar. It can be used to set the color of the navigation bar content and to hide or show the navigation bar.

```APIDOC
## NavigationBar Component

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

### Usage
```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" />
    {/* ... */}
  </>
);
```
```
Tokens:
Raw