{"id":4169,"url":"https://github.com/gxsshallot/react-native-pure-navigation-bar","last_synced_at":"2026-03-07T08:34:17.810Z","repository":{"id":32687491,"uuid":"120123214","full_name":"gxsshallot/react-native-pure-navigation-bar","owner":"gxsshallot","description":"A fully customizable navigation bar in React Native.","archived":false,"fork":false,"pushed_at":"2022-12-03T16:11:04.000Z","size":1819,"stargazers_count":95,"open_issues_count":16,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-26T22:46:40.612Z","etag":null,"topics":["customizable","navigation-bar","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/gxsshallot.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-02-03T19:37:38.000Z","updated_at":"2025-03-05T07:56:43.000Z","dependencies_parsed_at":"2023-01-14T22:00:17.773Z","dependency_job_id":null,"html_url":"https://github.com/gxsshallot/react-native-pure-navigation-bar","commit_stats":null,"previous_names":["gaoxiaosong/react-native-pure-navigation-bar"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-pure-navigation-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-pure-navigation-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-pure-navigation-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gxsshallot%2Freact-native-pure-navigation-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gxsshallot","download_url":"https://codeload.github.com/gxsshallot/react-native-pure-navigation-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251063706,"owners_count":21530840,"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":["customizable","navigation-bar","react-native"],"created_at":"2024-01-05T20:17:03.258Z","updated_at":"2026-03-07T08:34:12.783Z","avatar_url":"https://github.com/gxsshallot.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"# react-native-pure-navigation-bar\n\n[![npm version](https://img.shields.io/npm/v/react-native-pure-navigation-bar.svg?style=flat)](https://www.npmjs.com/package/react-native-pure-navigation-bar)\n[![Build Status](https://travis-ci.org/gaoxiaosong/react-native-pure-navigation-bar.svg?branch=master)](https://travis-ci.org/gaoxiaosong/react-native-pure-navigation-bar)\n\n[中文说明](https://www.jianshu.com/p/d805e022c236)\n\nHere is a fully customizable navigation bar in React-Native. You can set the global unified style of navigation bar and add it as a react component in each page.\n\nIt supports:\n\n* Absolute position style.\n* Safe Area Inset style.\n* Portrait and Landscape mode.\n* Translucent property for Android.\n* Do go back action automatically.\n* Title center or uncenter.\n* Seperator under navigation bar.\n* Button type of string, number or react element.\n* Go back button with image or text.\n* Customize style globally and in each view.\n\n## ScreenShots\n\n### iPhone X\n\n\u003cp float=\"left\"\u003e\n\n\u003cimg src=\"/resource/1-X.png\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/2-X.png\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/3-X.png\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/4-X.png\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/5-X.png\" width=\"18%\"\u003e\n\n\u003c/p\u003e\n\n### Android\n\n\u003cp float=\"left\"\u003e\n\n\u003cimg src=\"/resource/1-A.jpg\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/2-A.jpg\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/3-A.jpg\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/4-A.jpg\" width=\"18%\"\u003e\n\n\u003cimg src=\"/resource/5-A.jpg\" width=\"18%\"\u003e\n\n\u003c/p\u003e\n\n## Install\n\nInstall by Yarn:\n\n```shell\nyarn add react-native-pure-navigation-bar\n```\n\nInstall by NPM:\n\n```shell\nnpm install --save react-native-pure-navigation-bar\n```\n\n## Usage\n\nFirst import in the file:\n\n```jsx\nimport NaviBar from 'react-native-pure-navigation-bar';\n```\n\nThen add component in `render()` function:\n\n```jsx\nrender() {\n  return (\n    \u003cView style={{flex: 1}}\u003e\n      \u003cNaviBar\n        title='CustomTitle'\n        {/* other properties if you want to specify it */}\n      /\u003e\n      {/* other components */}\n    \u003c/View\u003e\n  );\n}\n```\n\n## Export\n\n| Name | Description |\n| :-: | :-: |\n| DEFAULT_NAVBAR_HEIGHT | Default navigation bar height |\n| GOBACK_BUTTON | An identifier when you set 'leftElement' or 'rightElement' to identify the button as GoBack button |\n| GOBACK_IMAGE | An default image for GOBACK_BUTTON |\n| forceInset | A function to generate `forceInset` options easilly |\n| getSafeAreaInset | Get safe area inset with landscape and translucent params |\n\n## Global Settings\n\nYou can change the navigation bar settings at the startup, include navigation bar style, and other default props.\n\nYou can set options like this:\n\n```jsx\nimport {InnerNaviBar} from 'react-native-pure-navigation-bar';\n\nInnerNaviBar.defaultProps.isTranslucent = true;\nInnerNaviBar.defaultProps.style.titleContainer = {...};\n```\n\n## Custom Setting\n\nYou can control the action or style of navigation bar by passing 'props'.\n\n| PropName | Description |\n| :-: | :-: |\n| title | Title view of text style or user custom view |\n| titleCenter | Title is must at center or not |\n| hasSeperatorLine | Bottom of navigation bar has a seperator line or not |\n| leftElement | Left buttons, a string or a number means a button of text style, an element means a button view, an array means an array of button which maybe text or custom view |\n| rightElement | Right buttons, same format as 'leftElement' |\n| onLeft | Left button click function, param is button index in 'leftElement', from 0 on. If return is false and button is goback button, then do not call the default goback action |\n| onRight | Right button click function, same format as 'onLeft' |\n| autoCloseKeyboard | Auto dismiss keyboard when click button or not |\n| autoHardwareBack | Auto listen hardware back event on Android or not |\n| disableLock | Enable or disable button clicking lock to avoid clicking multi times |\n| gobackImage | Image of goback button |\n| gobackText | Text of goback button |\n| isAbsolute | Enable absolute style or not |\n| isTranslucent | Translucent mode in Android |\n| safeOptions | Safe area option of navigation bar. Use 'false' to disable |\n| navbarHeight | Navigation bar height. Default is `DEFAULT_NAVBAR_HEIGHT` |\n| style | A custom style which has highest priority, object's key is in following 'Style' section |\n\nYou can see `index.d.ts` for their types and `src/index.js` for their default values.\n\n## Style\n\nThe component style is consist of three part:\n\n* User custom style, passed by component props, is highest level.\n* Global setting style, set with `defaultProps` in `InnerNaviBar`, is medium level, can be override by User custom style.\n* Inner style, written in `src/style.js`, is lowest level, can be overrided by the two styles above.\n\nAll the key you can customize in Global or Custom settings list below:\n\n| Key | Description |\n| :-: | :-: |\n| safeView | Safe area view |\n| absoluteView | Absolute view |\n| normalView | Not safe area or absolute view |\n| container | The whole navigation bar |\n| seperator | Seperator line at the bottom |\n| titleContainer | Title container off center |\n| title | Inner title text |\n| leftView | Left view contains all left buttons |\n| rightView | Right view contains all right buttons |\n| buttonView | Text-type button touchable view |\n| buttonText | Text-type button text |\n| gobackView | Goback button touchable view |\n| gobackImage | Goback button image |\n| gobackText | Goback button text |\n\n## FAQ\n\nYou can see [Wiki](https://github.com/gaoxiaosong/react-native-pure-navigation-bar/wiki/) for questions. And if not found, you can commit a issue to me.\n\n## Example Project\n\nYou can open the example project by following steps:\n\n1. Enter `example`. Use `yarn` or `npm install` to install the modules. Run `npm start` in a seperate terminal.\n1. Create a example project with entry file `index` and module name `test`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxsshallot%2Freact-native-pure-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgxsshallot%2Freact-native-pure-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgxsshallot%2Freact-native-pure-navigation-bar/lists"}