{"id":20579593,"url":"https://github.com/wolox/react-native-renavigate","last_synced_at":"2026-03-27T02:41:35.220Z","repository":{"id":16161835,"uuid":"79232797","full_name":"Wolox/react-native-renavigate","owner":"Wolox","description":"React native navigation made easy using redux :dizzy:","archived":false,"fork":false,"pushed_at":"2023-07-11T02:33:14.000Z","size":1100,"stargazers_count":9,"open_issues_count":46,"forks_count":2,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-13T10:07:25.953Z","etag":null,"topics":["navigation","react-native","router"],"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/Wolox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-01-17T13:58:06.000Z","updated_at":"2024-10-03T10:02:03.000Z","dependencies_parsed_at":"2024-01-05T06:47:19.715Z","dependency_job_id":null,"html_url":"https://github.com/Wolox/react-native-renavigate","commit_stats":{"total_commits":117,"total_committers":3,"mean_commits":39.0,"dds":"0.17948717948717952","last_synced_commit":"9ff7facb08da8d5f29f5712e1874be6963c088c7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wolox%2Freact-native-renavigate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wolox%2Freact-native-renavigate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wolox%2Freact-native-renavigate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wolox%2Freact-native-renavigate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wolox","download_url":"https://codeload.github.com/Wolox/react-native-renavigate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248943426,"owners_count":21186958,"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":["navigation","react-native","router"],"created_at":"2024-11-16T06:17:34.706Z","updated_at":"2026-03-27T02:41:35.162Z","avatar_url":"https://github.com/Wolox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# renavigate\n\n#### React native navigation made easy using redux\n\n## This project is no longer maintained. We highly recommend using [react-navigation](https://github.com/react-community/react-navigation) instead.\n\n[![CircleCI](https://circleci.com/gh/Wolox/react-native-renavigate.svg?style=svg)](https://circleci.com/gh/Wolox/react-native-renavigate)\n\n`renavigate` works with [react redux](https://github.com/reactjs/react-redux/) on top of react native's [navigator component](https://facebook.github.io/react-native/docs/navigator.html) to allow an easy navigation management in your react native apps.\n\n## Prerequisites\n- redux\n- react-redux\n\n## Preface\nIf you are used to handling your routes with react native's default navigator and also like using redux, you will love renavigate. This library will keep your app's component structure simple and make your transitions much easier to accomplish transforming the [Navigator API](https://facebook.github.io/react-native/docs/navigator.html#methods) into redux actions.  \nLast but not least, navigation related components like tab bar and navigation bar are easily pluggable and customizable.\n\n## Docs \u0026 Help\n- [Installation](#installation)\n- [Getting started](#getting-started)\n- [API](docs/API.md)\n- Examples\n  - [Running the examples](Examples)\n  - [Basic Usage](Examples/BasicExample)\n  - [Using tabs](Examples/TabsExample)\n  - [Customizing TabBar](Examples/CustomTabBar)\n\n## Installation\n\n#### npm\n```bash\nnpm install --save react-native-renavigate\n```\n\n#### yarn\n```bash\nyarn add react-native-renavigate\n```\n\n\n## Getting started\n\n#### 1- Declare your routes\n\n```js\nconst routeDefs = {\n  POST_DETAIL: (post) =\u003e ({\n    component: PostDetailContainer,\n    params: {\n      post\n    }\n  }),\n  POSTS_LIST: (posts) =\u003e ({\n    component: PostListContainer,\n    params: {\n      posts\n    }\n  })\n};\n```\n\nDefine each route in your app as a [function](docs/API.md#route-definitions) that returns a [plain object that will represent it](docs/API.md#route-instance).  \nAll your route definition functions must be contained in an object where each key is the route name (this name will be used with the redux actions later).\n\n#### 2- Mount the root scene\n\n```js\nimport { RootSceneContainer } from 'react-native-renavigate';\n\nimport store from './store';\nimport routeDefs from './routes';\nimport posts from './posts.json';\n\nexport default function index() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cRootSceneContainer\n        initialRoute={routeDefs.POSTS_LIST({ posts })}\n        routeDefs={routeDefs}\n      /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\nThe [RootSceneContainer](docs/API.md#rootscenecontainer) component is our wrapper of react native Navigator, and will properly transform store changes into routes transitions. These store changes are triggered by renavigate actions, stay tunned!\n\n###### * Using tabs\nOur root component will need the [tab definitions](docs/API.md#tab-definitions) to properly handle them.\n\n```js\nconst tabs = [\n  {\n    label: 'First tab',\n    initialRoute: routeDefs.FIRST_TAB_INITIAL_ROUTE()\n  },\n  {\n    label: 'Second tab',\n    initialRoute: routeDefs.SECOND_TAB_INITIAL_ROUTE()\n  },\n  {\n    label: 'Another tab',\n    initialRoute: routeDefs.ANOTHER_TAB_INITIAL_ROUTE()\n  }\n];\n```\nThen, use them as prop of the root component. This time, we will use [TabsContainer](docs/API.md#tabscontainer):\n\n```js\nimport { TabsContainer } from 'react-native-renavigate';\n\nimport store from './store';\nimport routeDefs from './routes';\nimport tabs from './tabs';\n\nexport default function index() {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cTabsContainer\n        tabs={tabs}\n        routeDefs={routeDefs}\n      /\u003e\n    \u003c/Provider\u003e\n  );\n}\n```\n\nrenavigate uses [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view) out of the box to implement tabs.\n\n#### 3- Give the navigation reducer to redux\nOur root components will listen to store changes to trigger transitions, but first we need to add the renavigate reducer to the store.\n\n```js\nimport { createStore, combineReducers } from 'redux'\nimport { reducer as renavigateReducer } from 'react-native-renavigate';\n\nconst reducers = {\n  // ... your other reducers here ...\n  navigation: renavigateReducer     // \u003c---- Mounted at 'navigation'\n}\nconst reducer = combineReducers(reducers)\nconst store = createStore(reducer)\n```\n\n#### 4- Navigate!\nAs mentioned before, `renavigate` transforms the Navigator API to redux [actions](docs/API.md#actions) so you can dispatch the following actions to trigger transitions.\n\n```js\nimport { actionCreators } from 'react-native-renavigate';\n\nclass MyComponent extends Component {\n\n  handleTransition = (post) =\u003e {\n    // Navigate forward to a new scene, squashing any scenes that you could jump forward to.\n    this.props.dispatch(actionCreators.push.ROUTE_NAME());\n\n    // Navigate to a new scene and reset route stack.\n    // this.props.dispatch(actionCreators.resetTo.ROUTE_NAME());\n\n    // Replace the current scene.\n    // this.props.dispatch(actionCreators.replace.ROUTE_NAME());\n\n    // Transition back and unmount the current scene.\n    // this.props.dispatch(actionCreators.pop());\n\n    // Pop to the first scene in the stack, unmounting every other scene.\n    // this.props.dispatch(actionCreators.popToTop());\n  }\n\n  render() {\n    return (\n      \u003cTouchableOpacity onPress={this.handleTransition}\u003e\n        \u003cText\u003eTransition!\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    );\n  }\n}\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\n## About\n\nThis project is maintained by [Sebastian Balay](https://github.com/sbalay) and it was written by [Wolox](http://www.wolox.com.ar).\n\n![Wolox](https://raw.githubusercontent.com/Wolox/press-kit/master/logos/logo_banner.png)\n\n## License\n\n**react-native-renavigation** is available under the MIT [license](LICENSE).\n\n    Copyright (c) 2016 Sebastián Balay \u003csebastian.balay@wolox.com.ar\u003e\n\n    Permission is hereby granted, free of charge, to any person obtaining a copy\n    of this software and associated documentation files (the \"Software\"), to deal\n    in the Software without restriction, including without limitation the rights\n    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n    copies of the Software, and to permit persons to whom the Software is\n    furnished to do so, subject to the following conditions:\n\n    The above copyright notice and this permission notice shall be included in\n    all copies or substantial portions of the Software.\n\n    THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n    THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolox%2Freact-native-renavigate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolox%2Freact-native-renavigate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolox%2Freact-native-renavigate/lists"}