{"id":4302,"url":"https://github.com/BhavanPatel/react-native-navbar-color","last_synced_at":"2025-08-04T01:31:56.288Z","repository":{"id":47164601,"uuid":"124869314","full_name":"BhavanPatel/react-native-navbar-color","owner":"BhavanPatel","description":"Module for change color of react-native footer navigation bar and Statusbar","archived":false,"fork":false,"pushed_at":"2019-08-06T07:09:57.000Z","size":89,"stargazers_count":53,"open_issues_count":5,"forks_count":20,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-25T04:37:32.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BhavanPatel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-12T10:03:21.000Z","updated_at":"2024-04-05T15:26:20.000Z","dependencies_parsed_at":"2022-09-05T01:00:55.622Z","dependency_job_id":null,"html_url":"https://github.com/BhavanPatel/react-native-navbar-color","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavanPatel%2Freact-native-navbar-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavanPatel%2Freact-native-navbar-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavanPatel%2Freact-native-navbar-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavanPatel%2Freact-native-navbar-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BhavanPatel","download_url":"https://codeload.github.com/BhavanPatel/react-native-navbar-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228339333,"owners_count":17904513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:17:07.413Z","updated_at":"2024-12-07T08:30:28.771Z","avatar_url":"https://github.com/BhavanPatel.png","language":"Java","funding_links":[],"categories":["Components","Others"],"sub_categories":["UI"],"readme":"# React Native Footer Navigation Bar Color and Status Bar\n[![NPM version](https://img.shields.io/npm/v/react-native-navbar-color.svg)](https://www.npmjs.com/package/react-native-navbar-color) [![GitHub issues](https://img.shields.io/github/issues/BhavanPatel/react-native-navbar-color.svg)](https://github.com/BhavanPatel/react-native-navbar-color/issues) [![GitHub forks](https://img.shields.io/github/forks/BhavanPatel/react-native-navbar-color.svg)](https://github.com/BhavanPatel/react-native-navbar-color/network) [![GitHub stars](https://img.shields.io/github/stars/BhavanPatel/react-native-navbar-color.svg)](https://github.com/BhavanPatel/react-native-navbar-color/stargazers)\n\n[![NPM](https://nodei.co/npm/react-native-navbar-color.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-native-navbar-color/)\n\n# react-native-navbar-color\n\nSimple package that will set footer navigation bar color.\n\n### Do you need this?\nif yes you are at right place!!!\n\n![actual](/screenshot/actual.png)\n\n# Installation\n\nInstall the dependencies and then after start the packager.\n\n```sh\n$ npm install --save react-native-navbar-color\n```\n\n\n# Linking library\nYou need to register package in your app.\nfollow steps\n\n#### Automatic\nUse react-native link command to link library.\n```sh\nreact-native link react-native-navbar-color\n```\n\n#### Manual\n1. [`REACT_NATIVE_PROJECT/android/app/src/main/java/PROJECT_ID/MainApplication.java`]\n\n    Make sure you include in `MainApplication.java` file. \n\n    ```\n    import com.bhavan.RNNavBarColor.RNNavBarColor;\n    ```\n\n    In the ***getPackages*** method, add the following instantiation to the returned list.\n    ```\n    new RNNavBarColor()\n    ```\n\n2. [`REACT_NATIVE_PROJECT/android/app/build.gradle`]\n\n    In the `build.gradle` file add inside ***dependencies { .... }*** \n    ```\n    compile project(':react-native-navbar-color')\n    ```\n\n3. [`REACT_NATIVE_PROJECT/android/settings.gradle`]\n\n    In the `settings.gradle` file add \n    ```\n    include ':react-native-navbar-color'\n    project(':react-native-navbar-color').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navbar-color/android')\n    ```\n    \n# API\n\n| Method | Parameters  | Default | Type | Description | Platform\n| ------ | ------ |  ------ |------ |------ | ----- |\n| setColor | hexcolor | - | *String* | Navbar color in **hex format** in string| **Android** and **API_Level \u003e=21** |\n| setStatusBarColor| hexcolor, animation | -  , `true` | *String,Boolean* |  Statusbar color in **hex format**, Show animation **true/false** | **Android**|\n| 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**|\n\n# Example\nThis is how you can set footer navigationbar color in android.\n\nimport package from node_modules\n```\nimport NavigationBar from 'react-native-navbar-color'\n```\n\nmethod to **set nav color**\n```\nNavigationBar.setColor('#ffab8e')\n```\nmethod to **set statusbar color**\n```\nNavigationBar.setStatusBarColor('#ffab8e',false)\n```\nmethod to **set statusbar theme**\n```\nNavigationBar.setStatusBarTheme('dark',true)\n```\n\n### Here it is full example.\n\n```\nimport React, { Component } from 'react'\nimport { View, Text } from 'react-native'\nimport NavigationBar from 'react-native-navbar-color'\n\nexport default class App extends Component {\n    componentDidMount() {\n        NavigationBar.setColor('#ffab8e')\n    }\n\n    render() {\n        return (\n            \u003cView\u003e\n                \u003cText\u003e\n                    This is how we can set the navigation bar color!\n                \u003c/Text\u003e\n            \u003c/View\u003e\n        )\n    }\n}\n```\n\n#### Output\n\n![example](/screenshot/example.png)\n\n\n\n\n# Todos\n\n - Write MORE good methods\n\nLicense\n----\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBhavanPatel%2Freact-native-navbar-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBhavanPatel%2Freact-native-navbar-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBhavanPatel%2Freact-native-navbar-color/lists"}