React Native Router

Please 🌟 my proposal talk for ReactiveConf 2017 What is RNRNF?

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 (v3 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)
Inheritance of scene attributes allow you to avoid any code/attribute duplications. If you send rightTitle it will be shown in all children.
Access to your app navigations state as simple as Actions.state, use Actions.currentScene to get name of current scene.

Breaking changes (compared to v3):

Actions.create (alternative syntax to define scenes) is not available (for simplicity) - just use <Router> as top component for your App. You may wrap it with Redux as well.
No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop https://reactnavigation.org/docs/navigators/custom. You could still pass panHandlers={null} to disable gestures or gesturedEnabled={false}
No component support for scene containers (that contains children Scene) - you have to use custom navigator
No support for partial hiding of tab bar for some tabs because of react navigation bug (react navigation issue): react-navigation/react-navigation#1584
No possibility to skip animation during reset/replace (react navigation issue): 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, you may pass any values to Router now and they will be inherited by all scenes).
Custom reducer is supported (createReducer prop for Router) but Redux actions now are passed directly from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.)
Drawer is 'drawer' attribute Scene
Modal is 'lightbox' attribute for Scene (used for popups, like Error)
Container scenes (that has children) cannot have component (or it will be considered as child!). If you want to customize containers, use react navigation custom navigators and pass it as navigator prop.
No position attribute is supported for custom transitions. For vertical transition add modal to parent Scene.
No flux 'focus' actions - use onEnter/onExit handlers instead.
tabBarSelectedItemStyle is not supported. Instead please use React Navigation TabBar params for tabs Scene: activeTintColor, inactiveTintColor, etc (https://reactnavigation.org/docs/navigators/tab)
Possible other stuff.

Migrating from v3

Coming soon

Contributors

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

Backers

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

snibug / react-native-router-flux