Follow author @PAksonov

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

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'})

# Get the code
git clone [email protected]:aksonov/react-native-router-flux.git`
cd react-native-router-flux/Example

# Install dependencies
yarn

# Run it
react-native run-ios

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

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

Coming soon

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]