Need help with react-native-navigation-bar-color?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

thebylito
202 Stars 36 Forks MIT License 58 Commits 23 Opened issues

Description

React Native component to change bottom bar/navigation bar color on Android

Services available

!
?

Need anything else?

Contributors list

React Native Navigation Bar Color Change

FOSSA Status

React Native Navigation Bar Color Change is a React Native library for change color of navigation/Bottom bar on Android.

Android Only

Table of Contents

Support

Installation

react-native >= 0.60.0

1 - Install the package:

$ yarn add react-native-navigation-bar-color

or

$ npm install react-native-navigation-bar-color --save

That's is all!

react-native <= 0.59.0

1 - Install the package:

$ yarn add react-native-navigation-bar-color

or

$ npm install react-native-navigation-bar-color --save

2 - Configure package:

  1. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import com.thebylito.navigationbarcolor.NavigationBarColorPackage; to the imports at the top of the file
  • Add new NavigationBarColorPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-navigation-bar-color'
    project(':react-native-navigation-bar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation-bar-color/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    implementation project(':react-native-navigation-bar-color')

Example

**Android Implementation**
import React from 'react';
import {View, Text, Button} from 'react-native';
import changeNavigationBarColor, {
  hideNavigationBar,
  showNavigationBar,
} from 'react-native-navigation-bar-color';

export default function App() {
  const setNavigationColor = color =&gt; {
    changeNavigationBarColor(color);
  };
  const hideNavigation = () =&gt; {
    hideNavigationBar();
  };

  const showNavigation = () =&gt; {
    showNavigationBar();
  };

  const testSetTranslucent = () =&gt; {
    changeNavigationBarColor('translucent', false);
  };

  const testSetTransparent = () =&gt; {
    changeNavigationBarColor('transparent', true);
  };

  return (
    <view style="{{" flex: justifycontent: aligncontent: alignitems: backgroundcolor:>
      <button title="Set transparent" onpress="{testSetTransparent}"></button>
      <button title="Set translucent" onpress="{testSetTranslucent}"></button>
      <button title="Set color red" onpress="{()"> {
          setNavigationColor('red');
        }}
      /&gt;
      <button title="Set color blue" onpress="{()"> {
          setNavigationColor('blue');
        }}
      /&gt;
      <button title="Set color ligth" onpress="{()"> {
          changeNavigationBarColor('#ffffff', true);
        }}
      /&gt;
      <button title="Hide bar" onpress="{hideNavigation}"></button>
      <button title="Show bar" onpress="{showNavigation}"></button>
      <text>Hello Word!</text>
    </button></button></button></view>
  );
}

API

changeNavigationBarColor(color, Boolean(light icon color), Boolean(animated - default is true))
: (Android)

Change color of Navigation/Bottom bar. color can be a "translucent" | "transparent" | HEX color, or name.

ex: green, blue, #80b3ff, #ffffff....

Light is true? icons will be dark.

  • Returns a
    Promise
  example = async () => {
      try{
          const response = await changeNavigationBarColor('#80b3ff');
          console.log(response)// {success: true}
      }catch(e){
          console.log(e)// {success: false}
      }

};

OR

  example = async () => {
      try{
          const response = await changeNavigationBarColor('#80b3ff', true);
          console.log(response)// {success: true}
      }catch(e){
          console.log(e)// {success: false}
      }

};

hideNavigationBar()
: (Android)

Hide Navigation Bar

  import { hideNavigationBar } from 'react-native-navigation-bar-color';
 ...
  hide = () => {
      hideNavigationBar();
  };

showNavigationBar()
: (Android)

Show Navigation Bar

  import { showNavigationBar } from 'react-native-navigation-bar-color';
 ...
  show = () => {
      showNavigationBar();
  };

License

MIT

FOSSA Status

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.