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