{"id":25003383,"url":"https://github.com/starlight36/react-native-navigator-router","last_synced_at":"2025-04-12T12:06:11.131Z","repository":{"id":57148563,"uuid":"58366920","full_name":"starlight36/react-native-navigator-router","owner":"starlight36","description":"Integration React Native and React Router with navigator.","archived":false,"fork":false,"pushed_at":"2017-01-18T00:57:10.000Z","size":96,"stargazers_count":70,"open_issues_count":3,"forks_count":15,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T10:01:44.394Z","etag":null,"topics":["navigator","react","react-native","react-router","redux"],"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/starlight36.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-05-09T10:00:35.000Z","updated_at":"2020-01-07T02:41:13.000Z","dependencies_parsed_at":"2022-08-31T23:50:27.176Z","dependency_job_id":null,"html_url":"https://github.com/starlight36/react-native-navigator-router","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Freact-native-navigator-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Freact-native-navigator-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Freact-native-navigator-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/starlight36%2Freact-native-navigator-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/starlight36","download_url":"https://codeload.github.com/starlight36/react-native-navigator-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248565060,"owners_count":21125415,"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":["navigator","react","react-native","react-router","redux"],"created_at":"2025-02-04T22:20:01.415Z","updated_at":"2025-04-12T12:06:11.112Z","avatar_url":"https://github.com/starlight36.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Navigator Router\n\nIntegration React Native Navigator with React Router.\n\n# Introduction\n\n[React Native](http://facebook.github.io/react-native/) is a powerful tool to build iOS and Android Apps by writing JavaScript code only once. As React works on web pages, React Native also has the same problem to navigating from different pages. [React Router](https://github.com/reactjs/react-router) is a good solution to manage page and navigate by URL addresses. React Native has a component named Navigator to manage pages. But it only provided original interfaces so managing pages is a headache problem in developing apps. If we only use React Router without Navigator, we should invent some \"wheels\" to solve animations, page stacks problems. So integration React Native Navigator with React Router is a reasonable way to go.\n\n# Installation\n\n```shell\nnpm install react-native-navigator-router --save\n```\n\n# Usage\n\n```js\nimport React, { Component } from 'react';\nimport { AppRegistry } from 'react-native';\nimport { createMemoryHistory, Router, IndexRoute, Route } from 'react-router';\nimport { createNavigatorRouter } from 'react-native-navigator-router';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cRouter history={createMemoryHistory('/')}\u003e\n        \u003cRoute path='/' component={createNavigatorRouter()}\u003e\n          \u003cIndexRoute component={Home} /\u003e\n          \u003cRoute path=\"/about\" component={About} /\u003e\n          \u003cRoute path=\"/detail\" component={Detail} /\u003e\n        \u003c/Route\u003e\n      \u003c/Router\u003e\n    );\n  }\n}\n\nAppRegistry.registerComponent('Example', () =\u003e App);\n```\n\nFor complete code, see [Example](https://github.com/starlight36/react-native-navigator-router/tree/master/Example).\n\n# Example\n\nTo run example project, you should run command as following lines:\n\n```shell\ncd Example\nnpm install\nreact-native run-ios\n```\n\n# API\n\nThis component only has one function. It's quite simple.\n\n## createNavigatorRouter\n\n```\ncreateNavigatorRouter(onBack: (index) =\u003e boolean[, style: StyleSheet])\n```\n\nUse this function to create React Router root component, pass `onBack` argument to it if you are planing to handle back by your self. `style` argument will apply to Navigator component's style prop. Use it if you want to define your Navigator styles.\n\n**Once you configured it, you can use URL to define your pages and navgating between them by simply push or back url. Enjoy it!**\n\n# Limition\n\n* Only `push`, `goBack` and `go` with negative index are fully support, `jump` havn't been tested yet, any other operations are not support.\n* Need more testing and feedback.\n* Not support persist/restore the page stack.\n\n# Use with Redux\n\nThis component is compatible with Redux, you can use [React Router Redux](https://github.com/reactjs/react-router-redux) to integration them. No special configurations is needed, just following the documents.\n\n# Showcase\n\nThe following Apps are using:\n\n* Uxiaor - [iOS](https://itunes.apple.com/cn/app/you-xiao-er-zhao-you-zhao/id1116038326?mt=8) [Android](http://static.uxiaor.com/app/app.html)\n\n# Feedback\n\nIf you any questions, use [Issues](https://github.com/starlight36/react-native-navigator-router/issues).\n\nSina Weibo: [@starlight36](http://weibo.com/starlight36)\n\n# License\n\nMIT Licence.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarlight36%2Freact-native-navigator-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstarlight36%2Freact-native-navigator-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstarlight36%2Freact-native-navigator-router/lists"}