/react-native-router-flux

React Native Router based on new ReactNavigation.org API

Primary LanguageJavaScriptMIT LicenseMIT

React Native Router Backers on Open Collective Sponsors on Open Collective Join the chat at https://gitter.im/aksonov/react-native-router-flux Codacy Badge npm version CircleCI

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.


Define all your routes in one React component...

const App = () => (
  <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

rnrf

# 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 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]