{"id":21174799,"url":"https://github.com/mindinventory/react-native-top-navbar","last_synced_at":"2026-03-04T09:31:16.113Z","repository":{"id":65922780,"uuid":"386532869","full_name":"Mindinventory/React-Native-top-navbar","owner":"Mindinventory","description":"This reactnative package provides custom header component for mobile apps. also providing utility method to change statusbar color.","archived":false,"fork":false,"pushed_at":"2023-12-20T10:21:01.000Z","size":2626,"stargazers_count":32,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-28T00:49:46.115Z","etag":null,"topics":["actionbar","header","mobile-app","navigation-header","reactnative","top-navigation-bar"],"latest_commit_sha":null,"homepage":"https://www.mindinventory.com","language":"TypeScript","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/Mindinventory.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":"2021-07-16T06:24:48.000Z","updated_at":"2025-01-06T09:18:42.000Z","dependencies_parsed_at":"2023-02-16T12:01:18.418Z","dependency_job_id":null,"html_url":"https://github.com/Mindinventory/React-Native-top-navbar","commit_stats":null,"previous_names":["mindinventory/rn-top-navbar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mindinventory/React-Native-top-navbar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReact-Native-top-navbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReact-Native-top-navbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReact-Native-top-navbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReact-Native-top-navbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/React-Native-top-navbar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReact-Native-top-navbar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264503949,"owners_count":23618762,"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":["actionbar","header","mobile-app","navigation-header","reactnative","top-navigation-bar"],"created_at":"2024-11-20T16:56:19.239Z","updated_at":"2026-03-04T09:31:15.907Z","avatar_url":"https://github.com/Mindinventory.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native top-navbar🚀\n\n[![npm version](https://img.shields.io/npm/v/@mindinventory/rn-top-navbar.svg)](\u003c[https://www.npmjs.com/package/@mindinventory/rn-top-navbar](https://www.npmjs.com/package/@mindinventory/rn-top-navbar)\u003e)\n![@mindinventory/rn-top-navbar Top Language](https://img.shields.io/github/languages/top/Mindinventory/rn-top-navbar)\n![@mindinventory/rn-top-navbar TypeScript](https://badgen.net/npm/types/tslib)\n![@mindinventory/rn-top-navbar License](https://img.shields.io/github/license/Mindinventory/rn-top-navbar)\n\nA **@mindinventory/rn-top-navbar** package is used to create custom navigation for React native apps.\nUsers can fully customize the navbar. you can change the background color of the status bar. Navigation can contain components like icons, images, and text.\n\n![navbar](media/navbar.png)\n![navbar_1](media/navbar_1.png)\n![navbar_2](media/navbar_2.png)\n![navbar_3](media/navbar_3.png)\n![navbar_4](media/navbar_4.png)\n\n### Installation\n\nusing npm:\n\n```\nnpm install @mindinventory/rn-top-navbar\n```\n\nusing yarn:\n\n```\nyarn add @mindinventory/rn-top-navbar\n```\n\n### Supported platform\n\n- Android\n- Ios\n\n### Usage\n\n```js\nimport Header from '@mindinventory/rn-top-navbar';\n...\n\u003cHeader style={{ backgroundColor: '#009999' }} statusBarBackground='#008080' barStyle='light-content'\u003e\n    \u003cHeader.Left style={{ backgroundColor: '#009999', width: \"15%\" }}\u003e\n        \u003cIcon name='arrow-left' style={{color: '#fff', fontSize: 18}} /\u003e\n    \u003c/Header.Left\u003e\n    \u003cHeader.Body style={{ backgroundColor: '#009999', width: \"70%\" }}\u003e\n        \u003cText style={{color: '#fff'}}\u003eHeader Title\u003c/Text\u003e\n    \u003c/Header.Body\u003e\n    \u003cHeader.Right style={{ backgroundColor: '#009999', flexDirection: 'row', width: '15%' }}\u003e\n        \u003cIcon name='bars' style={{color: '#fff', fontSize: 18}} /\u003e\n    \u003c/Header.Right\u003e\n\u003c/Header\u003e\n```\n\n### Documentation\n\n**Navbar container props**\n| Prop | Type | description |\n| --- | --- | --- |\n| statusBarBackground | string | use for change background color of status bar. |\n| barStyle | string | use for change content of status bar. |\n| style | style | apply styles on navbar container. |\n\n**Left container props**\n| Prop | Type | description |\n| --- | --- | --- |\n| style | style | apply styles on left container. |\n\n**Body container props**\n| Prop | Type | description |\n| --- | --- | --- |\n| style | style | apply styles on body container. |\n\n**Right container props**\n| Prop | Type | description |\n| --- | --- | --- |\n| style | style | apply styles on right container. |\n\n### LICENSE!\n\n@mindinventory/rn-top-navbar is [MIT-licensed](https://github.com/Mindinventory/rn-top-navbar/blob/master/LICENSE).\n\n# Let us know\n\nIf you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com\n\n\u003cp\u003e\u003ch4\u003ePlease feel free to use this component and Let us know if you are interested to building Apps or Designing Products.\u003c/h4\u003e\n\u003ca href=\"https://www.mindinventory.com/contact-us.php?utm_source=gthb\u0026utm_medium=repo\u0026utm_campaign=circular-cards-stack-view\" target=\"__blank\"\u003e\n\u003cimg src=\"./media/hire_button.png\" width=\"203\" height=\"43\"  alt=\"app development\"\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-top-navbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindinventory%2Freact-native-top-navbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freact-native-top-navbar/lists"}