The first declarative React Native router
Latest commit 1a1d0f6 Nov 10, 2018
Permalink
Failed to load latest commit information.
.circleci Release 4.0.2 Aug 21, 2018
.github README and ISSUE_TEMPLATE updated to reflect decision about 4.0.0-bet… Sep 3, 2018
__tests__ [Fix #3194 #3176] Adjust reset to work with nested routes (#3237) Sep 3, 2018
docs Closes #3153: Bring headerLayoutPreset and headerBackTitleEnabled fro… Sep 13, 2018
examples fix demo build Sep 28, 2018
images fix typos Jul 5, 2017
packages/react-native-router-flux-cli Examples: move to its own folder (#3288) Sep 21, 2018
src Update navigationStore.js (#3329) Oct 22, 2018
test [Fix #3194 #3176] Adjust reset to work with nested routes (#3237) Sep 3, 2018
.babelrc.js [Fix #3194 #3176] Adjust reset to work with nested routes (#3237) Sep 3, 2018
.codeclimate.yml Code Climate config (#1542) Jan 13, 2017
.editorconfig ADD .editorconfig Apr 26, 2016
.eslintrc.js hotfix: Example, ReduxExample and depencies fixes for Android (#3195) Aug 21, 2018
.github_changelog_generator CHANGELOG update and version bumping "revertion" (#3211) Aug 25, 2018
.gitignore Updated API docs to add missing attributes (#2315) Sep 1, 2017
.npmignore Add 'ReduxExample' to .npmignore (#3210) Aug 24, 2018
.prettierrc migration to react-navigation v2.x (#3068) (#3141) Aug 8, 2018
.travis.yml fix travis yml Jul 12, 2017
CHANGELOG.md Fix example and add more info to README (#3295) Sep 27, 2018
CONTRIBUTING.md Add CodeTriage badge to aksonov/react-native-router-flux (#2904) Aug 8, 2018
HISTORY.md Fix example and add more info to README (#3295) Sep 27, 2018
LICENSE license update (#2044) Jul 16, 2017
README.md Fix example and add more info to README (#3295) Sep 27, 2018
README2.md Update titles of different README's (#2463) Oct 10, 2017
README3.md Update titles of different README's (#2463) Oct 10, 2017
babel.config.js hotfix: Example, ReduxExample and depencies fixes for Android (#3195) Aug 21, 2018
index.d.ts Added missing indicatorStyle to TypeScript definition (#3320) Oct 23, 2018
package.json bump version Nov 10, 2018
yarn.lock support newer react-navigation, bump version Sep 24, 2018

README.md

React Native Router (v4.x) Backers on Open Collective Sponsors on Open Collective Join the chat at https://gitter.im/aksonov/react-native-router-flux Codacy Badge npm version CircleCI

Follow author @PAksonov

react-native-router-flux is a different API over react-navigation. It helps users to define all the routes in one central place and navigate and communicate between different screens in an easy way. But it also means that react-native-router-flux inherits all limitations and changes from updated versions.

IMPORTANT NOTES

v4 is based on React Navigation v2.x. See this branch and docs for v3 based on deprecated React Native Experimental Navigation API. It is not supported and may not work with latest React Native versions.

v4.0.0-beta.x is based on React Navigation v1.5.x. See this branch for this version. It is also not supported and may not work with the latest React Native versions.


Usage

Define all your routes in one React component...

const App = () => (
  <Router>
    <Stack key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="register" component={Register} title="Register"/>
      <Scene key="home" component={Home}/>
    </Stack>
  </Router>
);

...and navigate from one scene to another scene with a simple and powerful API.

// Login.js

// navigate to 'home' as defined in your top-level router
Actions.home(PARAMS)

// go back (i.e. pop the current screen off the nav stack)
Actions.pop()

// refresh the current Scene with the specified props
Actions.refresh({param1: 'hello', param2: 'world'})

API

For a full listing of the API, view the API docs.

Try the example apps

rnrf

# Get the code
git clone https://github.com/aksonov/react-native-router-flux.git
cd react-native-router-flux/examples/[expo|react-native|redux]

# Installing dependencies
yarn

# Run it
yarn start

v4 Features

  • Based on latest React Navigation API
  • Separate navigation logic from presentation. You may now change navigation state directly from your business logic code - stores/reducers/etc. navigationStore
  • Built-in state machine (v3 Switch replacement)
    • Each Scene with component defined can have onEnter/onExit/on handlers.
    • onEnter/on handler can be async.
    • For 'truthy' return of onEnter/on, success handler (if defined) will be executed
      • if success is a string then router will navigate to the Scene with that key
    • in case of handler's failure, failure prop (if defined) will be run.
    • Combining onEnter, onExit, success, and failure makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
  • MobX-friendly: all scenes are wrapped with observer. You may subscribe to navigationStore (Actions in v3) and observe current navigation state. Not applicable to Redux.
  • Flexible Nav bar customization, currently not allowed by React Navigation: https://github.com/react-community/react-navigation/issues/779
  • Drawer support (provided by React Navigation)
  • Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding rightTitle to a scene will apply to all child scenes simultaneously. See example app.
  • Access to your app navigations state as simple as Actions.state.
  • Use Actions.currentScene to get name of current scene.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]