https://github.com/BhavanPatel/react-native-navbar-color
Module for change color of react-native footer navigation bar and Statusbar
https://github.com/BhavanPatel/react-native-navbar-color
Last synced: 3 months ago
JSON representation
Module for change color of react-native footer navigation bar and Statusbar
- Host: GitHub
- URL: https://github.com/BhavanPatel/react-native-navbar-color
- Owner: BhavanPatel
- License: mit
- Created: 2018-03-12T10:03:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-06T07:09:57.000Z (about 6 years ago)
- Last Synced: 2024-11-25T04:37:32.961Z (11 months ago)
- Language: Java
- Homepage:
- Size: 86.9 KB
- Stars: 53
- Watchers: 1
- Forks: 20
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-navbar-color ★12 - Change Navigationbar Color in Android (Components / UI)
- awesome-reactnative-ui - react-native-navbar-color - native footer navigation bar and Statusbar|<ul><li>Last updated : This week</li><li>Stars : 19</li><li>Open issues : 4</li></ul>|| (Others)
- awesome-react-native - react-native-navbar-color ★12 - Change Navigationbar Color in Android (Components / UI)
- awesome-reactnative-ui - react-native-navbar-color - native footer navigation bar and Statusbar|<ul><li>Last updated : This week</li><li>Stars : 19</li><li>Open issues : 4</li></ul>|| (Others)
- awesome-react-native - react-native-navbar-color ★12 - Change Navigationbar Color in Android (Components / UI)
- awesome-react-native - react-native-navbar-color ★12 - Change Navigationbar Color in Android (Components / UI)
README
# React Native Footer Navigation Bar Color and Status Bar
[](https://www.npmjs.com/package/react-native-navbar-color) [](https://github.com/BhavanPatel/react-native-navbar-color/issues) [](https://github.com/BhavanPatel/react-native-navbar-color/network) [](https://github.com/BhavanPatel/react-native-navbar-color/stargazers)
[](https://nodei.co/npm/react-native-navbar-color/)
# react-native-navbar-color
Simple package that will set footer navigation bar color.
### Do you need this?
if yes you are at right place!!!
# Installation
Install the dependencies and then after start the packager.
```sh
$ npm install --save react-native-navbar-color
```
# Linking library
You need to register package in your app.
follow steps
#### Automatic
Use react-native link command to link library.
```sh
react-native link react-native-navbar-color
```
#### Manual
1. [`REACT_NATIVE_PROJECT/android/app/src/main/java/PROJECT_ID/MainApplication.java`]
Make sure you include in `MainApplication.java` file.
```
import com.bhavan.RNNavBarColor.RNNavBarColor;
```
In the ***getPackages*** method, add the following instantiation to the returned list.
```
new RNNavBarColor()
```
2. [`REACT_NATIVE_PROJECT/android/app/build.gradle`]
In the `build.gradle` file add inside ***dependencies { .... }***
```
compile project(':react-native-navbar-color')
```
3. [`REACT_NATIVE_PROJECT/android/settings.gradle`]
In the `settings.gradle` file add
```
include ':react-native-navbar-color'
project(':react-native-navbar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navbar-color/android')
```
# API
| Method | Parameters | Default | Type | Description | Platform
| ------ | ------ | ------ |------ |------ | ----- |
| setColor | hexcolor | - | *String* | Navbar color in **hex format** in string| **Android** and **API_Level >=21** |
| setStatusBarColor| hexcolor, animation | - , `true` | *String,Boolean* | Statusbar color in **hex format**, Show animation **true/false** | **Android**|
| setStatusBarTheme | one of `light`/`dark`/`default` , animation | `default`,`true` | *String*, *Boolean* | Theme of Statusbar Light/Dark/Default in **String**, Show animation **true/false** | **Android/iOS**|
# Example
This is how you can set footer navigationbar color in android.
import package from node_modules
```
import NavigationBar from 'react-native-navbar-color'
```
method to **set nav color**
```
NavigationBar.setColor('#ffab8e')
```
method to **set statusbar color**
```
NavigationBar.setStatusBarColor('#ffab8e',false)
```
method to **set statusbar theme**
```
NavigationBar.setStatusBarTheme('dark',true)
```
### Here it is full example.
```
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import NavigationBar from 'react-native-navbar-color'
export default class App extends Component {
componentDidMount() {
NavigationBar.setColor('#ffab8e')
}
render() {
return (
This is how we can set the navigation bar color!
)
}
}
```
#### Output
# Todos
- Write MORE good methods
License
----
MIT