### 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
```
--------------------------------
### 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.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 = () => (
<>
{/* ... */}
>
);
```
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.