React Native Navigation Bar Customizer

A React Native module for Android that allows you to customize and interact with the navigation bar. Features include setting the color, theme, visibility, button state, retrieving properties, and synchronizing with the status bar.

Installation

To install the package, use one of the following commands:

1npm install react-native-navigation-bar-customizer

Features

Available Methods

1import NavigationBar from 'react-native-navigation-bar-customizer';
2
3// Changes the navigation bar's color.
4NavigationBar.setColor('#FF5733');
5
6//Sets the theme of the navigation bar to either light or dark.
7NavigationBar.setBarTheme('dark');
8
9// Shows or hides the navigation bar.
10NavigationBar.setVisible(false);
11
12// Enables or disables the navigation bar buttons.
13NavigationBar.setButtonEnabled(false);
14
15// Retrieves the current color of the navigation bar as a hex string.
16NavigationBar.getColor().then((color) => console.log(color));
17
18// Retrieves the height of the navigation bar in pixels.
19NavigationBar.getHeight().then((height) => console.log(height));
20
21// Animates the navigation bar color over the specified duration (in milliseconds).
22NavigationBar.setColorWithAnimation("#00FF00", 1000);
23
24// Synchronizes the navigation bar's color with the status bar.
25NavigationBar.syncWithStatusBar();
26
27// Sets the navigation bar's color and theme in one call.
28NavigationBar.setColorAndTheme("#123456", "light");

Example Usage

Here’s a full example of how to use the module:

1import React from "react";
2import { View, Button } from "react-native";
3import NavigationBar from "react-native-navigation-bar-customizer";
4
5const App = () => {
6  const changeColor = () => NavigationBar.setColor("#FF0000");
7  const toggleTheme = () => NavigationBar.setBarTheme("dark");
8  const toggleVisibility = () => NavigationBar.setVisible(false);
9  const disableButtons = () => NavigationBar.setButtonEnabled(false);
10  const syncWithStatusBar = () => NavigationBar.syncWithStatusBar();
11  const getNavigationBarColor = async () => {
12    const color = await NavigationBar.getColor();
13    console.log("Current Color:", color);
14  };
15  const getNavigationBarHeight = async () => {
16    const height = await NavigationBar.getHeight();
17    console.log("Navigation Bar Height:", height);
18  };
19
20  return (
21    <View>
22      <Button title="Change Color" onPress={changeColor} />
23      <Button title="Set Dark Theme" onPress={toggleTheme} />
24      <Button title="Hide Navigation Bar" onPress={toggleVisibility} />
25      <Button title="Disable Buttons" onPress={disableButtons} />
26      <Button title="Sync with Status Bar" onPress={syncWithStatusBar} />
27      <Button title="Get Color" onPress={getNavigationBarColor} />
28      <Button title="Get Height" onPress={getNavigationBarHeight} />
29    </View>
30  );
31};
32export default App;