React Native Router

Follow author @PAksonov

Please 🌟 my talk proposal for ReactiveConf 2017 - What is RNRF?

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

---

• Example
• Motivation
• v4 Features
• API
• Migrating from v3
• Sponsors/Backers/Contributors

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

# 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: react-navigation/react-navigation#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]