{"id":4384,"url":"https://github.com/xxsnakerxx/react-native-ya-navigator","last_synced_at":"2025-08-04T01:32:18.675Z","repository":{"id":57341631,"uuid":"54558196","full_name":"xxsnakerxx/react-native-ya-navigator","owner":"xxsnakerxx","description":"Yet another RN navigator component","archived":false,"fork":false,"pushed_at":"2018-05-11T10:34:36.000Z","size":13753,"stargazers_count":85,"open_issues_count":0,"forks_count":13,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-16T17:53:52.889Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xxsnakerxx.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":"2016-03-23T12:31:14.000Z","updated_at":"2023-09-08T17:08:27.000Z","dependencies_parsed_at":"2022-09-15T16:42:11.127Z","dependency_job_id":null,"html_url":"https://github.com/xxsnakerxx/react-native-ya-navigator","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxsnakerxx%2Freact-native-ya-navigator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxsnakerxx%2Freact-native-ya-navigator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxsnakerxx%2Freact-native-ya-navigator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xxsnakerxx%2Freact-native-ya-navigator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xxsnakerxx","download_url":"https://codeload.github.com/xxsnakerxx/react-native-ya-navigator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582487,"owners_count":17940587,"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.234Z","updated_at":"2024-12-07T08:30:35.430Z","avatar_url":"https://github.com/xxsnakerxx.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Navigation","UI"],"readme":"# The project is not maintained any more!!!\n\n# React Native Yet Another Navigator\n\n![preview_ios](images/ya_navigator_ios.gif)\n![preview_android](images/ya_navigator_android.gif)\n\n## Table of contents\n- [Main goals](#main-goals)\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [Copyright and license](#copyright-and-license)\n\n## Main goals\n- the scene can handle navigation bar items events\n- the scene can change navigation bar items dynamically\n- the scene can show/hide navigation bar dynamically\n- the scene itself defines a configuration of the navigation bar\n\n## Dependencies\n- React Native \u003e= `0.25.1`\n- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#readme)\n\n## Installation\n\nFirst of all, this component uses awesome [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#readme), so you need to install it (it's simple)...\n\nthen,\n\n```javascript\nnpm install react-native-ya-navigator --save\n```\n\n## Usage\n\n### YANavigator component\n\n```javascript\nimport YANavigator from 'react-native-ya-navigator';\n\nclass App extends React.Component {\n  render() {\n   return (\n     \u003cYANavigator\n       initialRoute={{\n         component: MyScene,\n       }}\n       navBarStyle={{\n         backgroundColor: 'green',\n       }}\n     /\u003e\n   )\n  }\n}\n```\n\n#### YANavigator [propTypes](https://github.com/xxsnakerxx/react-native-ya-navigator/blob/master/Navigator.js#L436):\n- `style`\n- `navBarStyle`\n- `sceneStyle`\n- `initialRoute`\n- `initialRouteStack`\n- `defaultSceneConfig` (default value is __Navigator.SceneConfigs.PushFromRight__ for `iOS`\n  and __Navigator.SceneConfigs.FadeAndroid__ for `Android`).\n- `useNavigationBar` (useful if you want to render your navBar component on each scene ([ToolbarAndroid](https://facebook.github.io/react-native/docs/toolbarandroid.html#content) for example) instead of the embedded navBar)\n- `navBarUnderlay` (the view that will be rendered under all navBar items ([react-native-blur](https://github.com/react-native-fellowship/react-native-blur) for example))\n- `navBarBackBtn`\n  - `icon`\n  - `iconWidth` (if you provide custom icon, set this for properly title animations on iOS)\n  - `textStyle`\n- `eachSceneProps` (these props will be passed to each scene, for example, if you are using YANavigator inside tabs, you can to pass 'selected' prop to each scene, so each scene can decide should it updated via shouldComponentUpdate if it was hidden)\n- `customEventedProps` (you can pass here array of prop names that you need for link your custom components rendered in navigation bar)\n- `navBarFixedHeight` (use this to set custom fixed nav bar height)\n- `navBarCrossPlatformUI` (this prop means that title on android will be in center)\n\nAlso `YANavigator` class has static property `navBarHeight` (you can use it in your styles)\n\n### Navigation bar configuration in a scene\n\nYour scene component should define `static` property `navigationDelegate`\n\n```javascript\nclass MyScene extends React.Component {\n  render() {\n    return \u003cView\u003e{this.props.children}\u003c/View\u003e\n  }\n\n  static navigationDelegate = {\n    /**\n     * if you want to listen nav bar items press events\n     * you must to provide id key\n     * @type {Something unique}\n     */\n    id: 'myScene',\n    sceneConfig: myCustomSceneConfig,\n    /**\n     * false by default\n     * @type {bool}\n     */\n    navBarIsHidden: true|false,\n    /**\n     * @type {String}\n     */\n    navBarBackgroundColor: 'red',\n    /**\n     * @param  {object} props [route props]\n     * @return {Class|JSX}\n     */\n    renderTitle(props) {\n      return MyTitleComponent\n      // or\n      return \u003cMyTitleComponent title={props.title || 'Title'}/\u003e\n    },\n    /**\n     * @param  {object} props [route props]\n     * @return {Class|JSX}\n     */\n    renderNavBarLeftPart(props) {\n      return MyButtonComponent\n      // or\n      return \u003cMyButtonComponent {...props}/\u003e\n    },\n    /**\n     * @param  {object} props [route props]\n     * @return {Class|JSX}\n     */\n    renderNavBarRightPart(props) {\n      return MyButtonComponent\n      // or\n      return \u003cMyButtonComponent {...props}/\u003e\n    },\n    /**\n     * will be called first on back android button press\n     * @param  {object} navigator [navigator instance]\n     */\n    onAndroidBackPress(navigator) {\n      navigator.popToPop();\n    }\n    /**\n     * If it's true, 'onNavBarBackBtnPress' method will be called on backBtnPress instead\n     * of navigator.pop()\n     * false by default\n     * @type {bool}\n     */\n    overrideBackBtnPress: true|false,\n    /**\n     * Tint color of backBtn (applies to icon and text)\n     * @type {String}\n     */\n    navBarBackBtnColor: 'white',\n  }\n}\n```\n\n### Listening navigation bar items events\n\nYou should wrap your scene component with `YANavigator.Scene` component and set __this__ to `delegate` prop.\n__Don't forget to define `id` in the `navigationDelegate`__\n\n```javascript\nclass MyScene extends React.Component {\n  render() {\n    return (\n      \u003cYANavigator.Scene\n        delegate={this}\u003e\n        {this.props.children}\n      \u003c/YANavigator.Scene\u003e\n    )\n  }\n```\n\nAlso `YANavigator.Scene` has `style` prop and `paddingTop` (if it's true(__default value__) then scene will have top padding equals height of the navigation bar, also you can use `YANavigator.navBarHeight` in your styles)\n\nAnd one more thing... ;-)\n\nYou can listen when a scene will lose focus via route prop `onSceneWillBlur`\n\n```javascript\n...\nonLinkPress = (link) =\u003e {\n  tabBar.hide(),\n\n  this.props.navigator.push({\n    component: Browser,\n    props: {\n      url: link,\n      /**\n       * @param {Boolean} true means the scene was popped, false means a new scene was pushed\n       */\n      onSceneWillBlur: (isBack) =\u003e tabBar.show(),\n    },\n  })\n}\n...\n```\n\n### How to handle navigation bar items events?\n\nThere are a few simple rules\n\n- if you pass as navBar item just a `class`, it should have `propTypes` with prop that you want to listen, then you should define method that will be called (`onNavBarTitlePress`, `onNavBarLeftPartPress`, `onNavBarRightPartPress`, `onNavBarTitleChange`, `onNavBarTitleValueChange`, etc...)\n- if you pass as navBar item `JSX`, then props that you want to listen should return just a string - __name of the delegate method that will be called__\n- currently supported props `onPress`, `onChange`, `onValueChange`, `onSelection`, `onBlur`, `onFocus`, `onSelectionChange`, `onSubmitEditing`\n\n```javascript\nclass MyNavBarTitle extends React.Component {\n  render() {\n    return (\n      \u003cTouchableOpacity onPress={this.props.onPress}\u003e\n        \u003cText\u003e{'Default Text'}\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    )\n  }\n\n  static propTypes = {\n    onPress: React.PropTypes.func, // required\n  }\n}\n\nclass MyScene extends React.Component {\n  onNavBarTitlePress(e) {\n    // press event\n    console.log(e)\n  }\n\n  onFirstBtnPress(e) {\n    alert('Right side - first btn press');\n  }\n\n  onSecondBtnPress(e) {\n    alert('Right side - second btn press');\n  }\n\n  onSceneWillFocus() {\n    console.log('Scene will focus');\n  }\n\n  onSceneDidFocus() {\n    console.log('Scene did focus');\n  }\n\n  render() {\n    return (\n      \u003cYANavigator.Scene\n        delegate={this}\u003e\n        {this.props.children}\n      \u003c/YANavigator.Scene\u003e\n    )\n  }\n\n  static navigationDelegate = {\n    id: 'myScene',\n    renderTitle() {\n      return MyNavBarTitle;\n    },\n    renderNavBarLeftPart() {\n      return (\n        \u003cView style={{flexDirection: 'row'}}\u003e\n          \u003cTouchableOpacity onPress={() =\u003e 'onFirstBtnPress'}\u003e\n            \u003cText style={{fontSize: 16, paddingLeft: 20, color: '#fff'}}\u003e{'1'}\u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n          \u003cTouchableOpacity onPress={() =\u003e 'onSecondBtnPress'}\u003e\n            \u003cText style={{fontSize: 16, paddingLeft: 20, color: '#fff'}}\u003e{'2'}\u003c/Text\u003e\n          \u003c/TouchableOpacity\u003e\n        \u003c/View\u003e\n      )\n    }\n  }\n```\n\n### How to change navigation bar items dynamically?\n\nThere are two options:\n\n1. Each scene can access to navBar items via `ref` and modify its state using standard `setState` method, or can call other methods provided by your component.\n\n   __ref__ generated from the template\n\n   ```javascript\n   const ref = `${navigationDelegate.id || `${navigator.state.presentedIndex + 1}_scene`}_leftPart|rightPart|title`;\n\n   // usage\n   this.props.navigator.navBarParts['navDelegateId_rightPart'].doSmth()\n   // or if navigationDelegate id is not defined\n   this.props.navigator.navBarParts['1_scene_rightPart'].doSmth()\n   ```\n\n   ​\n\n2. If you want re-render your navBar component with new props or just re-render use the template\n\n```javascript\nYourComponentClass.navigationDelegate.renderTitle = () =\u003e // return component here with the new props\n\nthis.props.navigator.forceUpdateNavBar();\n```\n\nAlso NavBar component has some helpful methods\n- `show`('fade'|'slide') __default behavior is `fade`__\n- `hide`('fade'|'slide') __default behavior is `fade`__\n\n```javascript\nthis.props.navigator.showNavBar('slide');\nthis.props.navigator.hideNavBar('fade');\n```\n\n```javascript\nclass MyNavBarTitle extends React.Component {\n  constructor(props) {\n    super(props)\n\n    this.state = {\n      text: props.text\n    }\n  }\n  render() {\n    return (\n      \u003cTouchableOpacity onPress={this.props.onPress}\u003e\n        \u003cText\u003e{this.state.text}\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    )\n  }\n\n  static propTypes = {\n    onPress: React.PropTypes.func,\n    text: React.PropTypes.string,\n  }\n\n  static defualtProps = {\n    text: 'Default Text',\n  }\n}\n\nclass MyScene extends React.Component {\n  onBtnPress() {\n    MyScene.navigationDelegate.renderTitle = () =\u003e \u003cMyNavBarTitle text={'Re rendered'} /\u003e\n    MyScene.navigationDelegate.renderNavBarRightPart = () =\u003e (\n      \u003cTouchableOpacity onPress={() =\u003e 'onBtnPress'}\u003e\n        \u003cText style={{fontSize: 12}}\u003e{'Updated btn'}\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    );\n\n    this.props.navigator.forceUpdateNavBar();\n  }\n\n  onNavBarTitlePress() {\n    this.props.navigator.navBarParts.myScene_title.setState({\n      text: 'Other title',\n    })\n  }\n\n  render() {\n    return (\n      \u003cYANavigator.Scene\n        delegate={this}\u003e\n        {this.props.children}\n      \u003c/YANavigator.Scene\u003e\n    )\n  }\n\n  static navigationDelegate = {\n    id: 'myScene',\n    renderTitle() {\n      return MyNavBarTitle;\n    },\n    renderNavBarRightPart() {\n      return (\n        \u003cTouchableOpacity onPress={() =\u003e 'onBtnPress'}\u003e\n          \u003cText style={{fontSize: 16, paddingLeft: 20, color: '#fff'}}\u003e{'Btn'}\u003c/Text\u003e\n        \u003c/TouchableOpacity\u003e\n      )\n    }\n  }\n```\n\n#### Feel free to go to [example](example) and explore it for more details\n\n## Contributing\n\nJust submit a pull request!\n\n## Copyright and license\n\nCode and documentation copyright 2015 Dmitriy Kolesnikov. Code released under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxxsnakerxx%2Freact-native-ya-navigator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxxsnakerxx%2Freact-native-ya-navigator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxxsnakerxx%2Freact-native-ya-navigator/lists"}