The first declarative React Native router
Clone or download
Pull request Compare This branch is 127 commits behind aksonov:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Native Router v4.x Backers on Open Collective Sponsors on Open Collective Join the chat at Codacy Badge npm version CircleCI

Follow author @PAksonov

NOTE: v4 (based on React Navigation) is in beta. See this branch and docs for v3.

Define all your routes in one React component...

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

...and navigate from scene to scene with a simple, powerful API

// Login.js

// navigate to 'home' as defined in your top-level router

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

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

Try the example app


# Get the code
git clone
cd react-native-router-flux/Example

# Install dependencies

# 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:
  • 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.


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


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


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