react-native-router-flux: IMPORTANT: v4 beta release is ready (v3 is not supported anymore)

Please check latest 4.0.0-beta.* , Example as demo:

V4 Features:

  • Based on latest API
  • Separated 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’ has onEnter/onExit handlers.
  • 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, you still could pass your reducer factory to createReducer param for Router.
  • Flexible nav bar customization, that is not allowed by react navigation right now:
  • Built-in reactnavigation drawer support (use drawer attribute for Scene and contentComponent to use your own Drawer)
  • ‘Lightbox’ support (used by popups like Error alert within Example project)

Breaking changes (comparing to v3):

  1. No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop:

  2. No support for partial hiding of tab bar for some tabs because of react navigation bug:

  3. No possibility to skip animation during reset/replace:

  4. Switch is removed - you may use onEnter (or just on) / onExit handlers for more flexible logic. They could be async functions. Success termination of onEnter will run success handler, failure handler will be run otherwise. You can pass just state keys to success/failure too. This way you can create very complex state machine and don’t use Switch or navigation from componentDidMount.

  5. getSceneStyle is removed (no needed in v4).

  6. Custom reducer (‘createReducer prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.)

  7. Drawer is ‘drawer’ attribute Scene

  8. Modal is ‘modal’ attribute for Scene

  9. No flux ‘focus’ actions - use onEnter/onExit handlers instead.

As you can see React Navigation still contains some issues, but anyway it is more stable than obsolete ‘react-native-experimental-navigation’ used by v3 now.

Here is link about road to v1 (so you can see all issues at one place):

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 25
  • Comments: 27 (10 by maintainers)

Most upvoted comments

@waqas19921, @Dictory Yes, v4 lacks of documentation and we are trying to improve it. Unfortunately we have lack of maintainers now.

Guys, this project is open source, feel free to check sources and submit PR for docs. Guys, let’s improve open source, not just use it for free.

@tejacoder Check Example project and existing docs. If still not clear, create separate issue.

All, I’m closing this ticket (original aim was just to make announce), create issue (and better with PRs) if any.

@bragur Check beta.7, you could define it as Scene props for drawer now


  1. We will start working on it next week. Yes, eventually migration tutorial will be created too - actually most API is the same, differences are already listed. Feel free to submit PRs, it is open-source project. Follow me on github/twitter to get updates.

  2. If community will submit PR/patch I will publish new v3 revision.

i love you.