React Native Router

WARNING: react-native-router-flux v4 is in beta. Go here for v3. Docs could be found here

---

Define all your routes in one place...

class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="login" component={Login} title="Login"/>
          <Scene key="register" component={Register} title="Register"/>
          <Scene key="home" component={Home}/>
        </Scene>
      </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

# Get the code
git clone git@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 (former Switch replacement) - each ‘scene’ could have onEnter/onExit handlers. onEnter handler could be async. For successful termination of onEnter, success handler (if defined) will be executed (if success is string then router will navigation to that Scene), in case of handler's failure failure (if defined) will be run. It will allow to build authentication, data validation and conditional transitions in very easy way.
• MobX-powered, all used scenes are wrapped as 'observer' automatically. You may subscribe to navigationStore (former Actions), observe current navigation state, etc. If you are using Redux, skip this.
• Flexible nav bar customization, that is not allowed by react navigation right now: react-navigation/react-navigation#779
• Drawer support (provided by reactnavigation)
• 'Lightbox' support (used by popups like Error alert within Example project)

Breaking changes (compared to v3):

• No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop: https://reactnavigation.org/docs/navigators/custom
• No support for partial hiding of tab bar for some tabs because of react navigation bug: react-navigation/react-navigation#1584
• No possibility to skip animation during reset/replace: react-navigation/react-navigation#1493
• Switch is removed - you may use onEnter/onExit handlers for more flexible logic.
• getSceneStyle is removed (no needed in v4).
• Custom reducer (createReducer prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.)
• Drawer is 'drawer' attribute Scene
• Modal is 'modal' attribute for Scene
• No flux 'focus' actions - use onEnter/onExit handlers instead.
• Possible other stuff.

Migrating from v3

Coming soon

Production Apps using react-native-router-flux

• Buddify (iOS, Android) - helps travelers discover fun things to do locally.
• GuavaPass.com (iOS, Android) - offers convenient access to top classes at boutique fitness studios across Asia.
• Epic Fail Videos (iOS, Android) - The best Fail Videos Collection, never miss a laugh with your friends!
• Junk Free (iOS) - A simple way to find, share, and save recipes, workouts, and other healthy content with your friends, family and workmates.
• chozun (iOS, Android) - Your travel companion, matching your lifestyle on the go!
• Snappatizer (iOS) - Find and rank the best food around you.
• Look Lock (GitHub, iOS, Android) - Show photos without worries.
• BusDue, (iOS, Android) - London bus arrival time app

Support

Thanks to all who submitted PRs to 2.x/3.x releases. If you like the component and want to support it, feel free to donate any amount or help with issues.

Follow @PAksonov