The first declarative React Native router
JavaScript Objective-C Python Java
Clone or download
MaxInMoon and aksonov Update API.md: add upperCaseLabel in Tabs (#2925)
From [react-navigation doc](https://reactnavigation.org/docs/tab-navigator.html#tabbaroptions-for-tabbartop-default-tab-bar-on-android), `upperCaseLabel` allow us to disable the default uppercase for tab labels

(Tested with `4.0.0-beta.28`)
Latest commit 5895939 Jul 11, 2018
Permalink
Failed to load latest commit information.
.circleci Migrate to CircleCI 2.0 (#2046) Jul 17, 2017
.github Update ISSUE_TEMPLATE.md Jul 27, 2017
Example popTo causes an infinite loop when route is not found (as seen on #3026 Jun 6, 2018
__tests__ popTo causes an infinite loop when route is not found (as seen on #3026 Jun 6, 2018
dist popTo causes an infinite loop when route is not found (as seen on #3026 Jun 6, 2018
docs Update API.md: add upperCaseLabel in Tabs (#2925) Jul 11, 2018
images fix typos Jul 5, 2017
src popTo causes an infinite loop when route is not found (as seen on #3026 Jun 6, 2018
test fix unit tests, Example Jul 3, 2017
.babelrc 4.0.0.beta.9 (#2025) Jul 14, 2017
.codeclimate.yml Code Climate config (#1542) Jan 13, 2017
.editorconfig ADD .editorconfig Apr 26, 2016
.eslintrc.js - Fix: ‘clone’ scenes declared at the end and were not visible for sc… Jul 12, 2017
.gitignore Updated API docs to add missing attributes (#2315) Sep 1, 2017
.npmignore Fix npm test Apr 11, 2016
.travis.yml fix travis yml Jul 12, 2017
CHANGELOG.md CHANGELOG Nov 8, 2017
CONTRIBUTING.md Update CONTRIBUTING.md Nov 5, 2017
LICENSE license update (#2044) Jul 16, 2017
README.md Update README.md Jun 6, 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
index.d.ts Add "none" to type HeaderModeType. (#2998) Apr 24, 2018
package.json migrate mobx to peer and dev dependencies (#2979) Jun 7, 2018
yarn.lock migrate mobx to peer and dev dependencies (#2979) Jun 7, 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

NOTE: v4 based on React Navigation v1.5.6. 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.


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 scene to scene with a simple, 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'})

Try the example app

rnrf

# Get the code
git clone https://github.com/aksonov/react-native-router-flux.git
cd react-native-router-flux/Example

# Install dependencies
yarn

# Run it
react-native run-ios

v4 Features

  • Based on latest React Navigation API
  • Separate navigation logic from presentation. You may change now 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 not currently 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. 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]