{"id":4399,"url":"https://github.com/jbpin/react-native-router-sinux","last_synced_at":"2025-09-12T23:40:52.691Z","repository":{"id":137884705,"uuid":"65335329","full_name":"jbpin/react-native-router-sinux","owner":"jbpin","description":"React native router that use ExperimentalNavigation and sinux store","archived":false,"fork":false,"pushed_at":"2016-08-17T11:55:10.000Z","size":17,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T16:02:16.898Z","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/jbpin.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-08-09T23:36:42.000Z","updated_at":"2023-09-29T07:48:27.000Z","dependencies_parsed_at":"2024-01-27T01:20:37.196Z","dependency_job_id":"36c7e8af-13c9-4740-800b-6dea7fc498c3","html_url":"https://github.com/jbpin/react-native-router-sinux","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbpin%2Freact-native-router-sinux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbpin%2Freact-native-router-sinux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbpin%2Freact-native-router-sinux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbpin%2Freact-native-router-sinux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbpin","download_url":"https://codeload.github.com/jbpin/react-native-router-sinux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250257125,"owners_count":21400656,"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.690Z","updated_at":"2025-04-22T14:25:09.976Z","avatar_url":"https://github.com/jbpin.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Navigation"],"readme":"# reactNativeRouterSinux\n\nSimple wrapper to use React Native Experimental Navigation\n\n# How to use it\n\nThe first step is to create an initial component that use NavigationRoot. This is in general the first component that your application will load. (index.ios.js or whatever you decide).\n\nNavigationRoot is tacking a props named `initialRoute` that allow the router to display the first view.\n\nEveryChildren is considered in the stack if they have a props named `routeKey`. It's the key we will use in order to navigate.\n\n```javascript\n\nimport { NavigationRoot } from 'react-native-router-sinux';\n\n...\n\nrender() {\n  return (\n    \u003cNavigationRoot initialRoute=\"home\"\u003e\n      \u003cView routeKey=\"home\"\u003e\n        \u003cText\u003e This is the home page\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView routeKey=\"first\"\u003e\n        \u003cText\u003e This is the first page\u003c/Text\u003e\n      \u003c/View\u003e\n      \u003cView routeKey=\"second\"\u003e\n        \u003cText\u003e This is the second page\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/NavigationRoot\u003e\n  )\n}\n\n```\n\nNow we have our NavigationRoot setted we want to be able to navigate between views. For that we use `navigationStore`\n\n`navigationStore` is a store writen in [Sinux](https://github.com/jbpin/sinux) that duplicate the behavior of `ExperimentalNavigation` helper `NavigationStateUtils`.\n\nMethod available in `NavigationStateUtils` are accessible through `navigationStore`.\n\n```\n  * back: Sets the focused route to the previous route.\n  * forward: Sets the focused route to the next route.\n  * get: Gets a route by key\n  * has: Returns `true` at which a given route's key can be found in the routes of the navigation state.\n  * indexOf: Returns the first index at which a given route's key can be found in the routes of the navigation state, or -1 if it is not present.\n  * jumpTo: Sets the focused route of the navigation state by key.\n  * jumpToIndex: Sets the focused route of the navigation state by index.\n  * **pop**: Pops out a route from the navigation state. *Note that this moves the index to the positon to where the last route in the stack is at.*\n  * **push**: Pushes a new route into the navigation state. *Note that this moves the index to the positon to where the last route in the stack is at.*\n  * replaceAt: Replace a route by a key.\n  * replaceAtIndex: Replace a route by a index.\n  * reset: Resets all routes. *Note that this moves the index to the positon to where the last route in the stack is at if the param `index` isn't provided.*\n```\n\nIn order to navigate to a new view simply import navigationStore and call the push function.\n\n```javascript\nimport { navigationStore } from 'react-native-router-sinux';\n\n...\n\nnavigationStore.push({ key: 'first' });\n```\n\nThat's it.\n\nIn a same way to go back simply call pop function\n\n```javascript\nnavigationStore.pop();\n```\n\n\nYou can pass all the props supported by the `ExperimentalNavigation` component `NavigationCardStack` but `renderScene` and `navigationState` :\n\n```javascript\n{\n  direction: NavigationGestureDirection ('horizontal' | 'vertical'),\n  onNavigateBack?: Function,\n  renderHeader: ?NavigationSceneRenderer,\n  cardStyle?: any,\n  style: any,\n  gestureResponseDistance?: ?number,\n}\n```\n\n### This is a first shot, please don't hesitate to request support on Sinux or this component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbpin%2Freact-native-router-sinux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbpin%2Freact-native-router-sinux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbpin%2Freact-native-router-sinux/lists"}