{"id":4390,"url":"https://github.com/beefe/react-native-navigation-bar","last_synced_at":"2025-07-14T15:07:11.910Z","repository":{"id":57338603,"uuid":"47462170","full_name":"beefe/react-native-navigation-bar","owner":"beefe","description":"NavigationBar written in pure javascript for cross-platform support","archived":false,"fork":false,"pushed_at":"2017-04-17T06:40:58.000Z","size":212,"stargazers_count":61,"open_issues_count":6,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-09T15:11:22.229Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beefe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-05T15:58:09.000Z","updated_at":"2024-05-13T06:44:56.000Z","dependencies_parsed_at":"2022-09-07T09:01:30.949Z","dependency_job_id":null,"html_url":"https://github.com/beefe/react-native-navigation-bar","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/beefe/react-native-navigation-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-navigation-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-navigation-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-navigation-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-navigation-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beefe","download_url":"https://codeload.github.com/beefe/react-native-navigation-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beefe%2Freact-native-navigation-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265311822,"owners_count":23745148,"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:10.420Z","updated_at":"2025-07-14T15:07:11.881Z","avatar_url":"https://github.com/beefe.png","language":"JavaScript","readme":"# react-native-navigation-bar\n\n\n\nNavigationBar written in pure javascript for cross-platform support\n\nSince most of our apps have a similar navigationBar, we made it to be a common component\n\nNeeds react-native \u003e= 0.14.2\n\n![ui](./doc/ui.jpg)\n\n###Documentation\n```\n\ttitle: PropTypes.string.isRequired,\n\t//not include the height of statusBar on ios platform\n\theight: PropTypes.number,\n\ttitleColor: PropTypes.string,\n\tbackgroundColor: PropTypes.string,\n\tleftButtonTitle: PropTypes.string,\n\tleftButtonTitleColor: PropTypes.string,\n\tonLeftButtonPress: PropTypes.func,\n\trightButtonTitle: PropTypes.string,\n\trightButtonTitleColor: PropTypes.string,\n\tonRightButtonPress: PropTypes.func\n```\n\n###Usage\n\n####Step 1 - install\n\n```\n\tnpm install react-native-navigation-bar --save\n```\n\n####Step 2 - import and use in project\n```javascript\n\timport NavigationBar from 'react-native-navigation-bar';\n\n\t\u003cNavigationBar \n\t\ttitle={'this is a test'}\n\t\theight={44}\n\t\ttitleColor={'#fff'}\n\t\tbackgroundColor={'#149be0'}\n\t\tleftButtonIcon={}\n\t\tleftButtonTitle={'back'}\n\t\tleftButtonTitleColor={'#fff'}\n\t\tonLeftButtonPress={onBackHandle} \n\t\trightButtonIcon={}\n\t\trightButtonTitle={'forward'}\n\t\trightButtonTitleColor={'#fff'}\n\t\tonRightButtonPress={onForwardHandle}\n\t/\u003e\n```\n\n","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["Navigation","UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeefe%2Freact-native-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeefe%2Freact-native-navigation-bar/lists"}