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: https://github.com/aksonov/react-native-router-flux/tree/v4
V4 Features:
- Based on latest https://reactnavigation.org 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’ hasonEnter
/onExit
handlers. - MobX-powered, all used scenes are wrapped as ‘observer’ automatically. You may subscribe to
navigationStore
(formerActions
), observe current navigation state, etc. If you are using Redux, you still could pass your reducer factory tocreateReducer
param for Router. - Flexible nav bar customization, that is not allowed by react navigation right now: https://github.com/react-community/react-navigation/issues/779
- Built-in reactnavigation drawer support (use
drawer
attribute forScene
andcontentComponent
to use your ownDrawer
) - ‘Lightbox’ support (used by popups like Error alert within Example project)
Breaking changes (comparing to v3):
-
No duration/panHandlers support - you have to implement custom navigator now instead and pass it as ‘navigator’ prop: https://reactnavigation.org/docs/navigators/custom
-
No support for partial hiding of tab bar for some tabs because of react navigation bug: https://github.com/react-community/react-navigation/issues/1584
-
No possibility to skip animation during reset/replace: https://github.com/react-community/react-navigation/issues/1493
-
Switch
is removed - you may useonEnter
(or juston
) /onExit
handlers for more flexible logic. They could be async functions. Success termination ofonEnter
will runsuccess
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 useSwitch
or navigation from componentDidMount. -
getSceneStyle is removed (no needed in v4).
-
Custom reducer (‘createReducer prop for Router) - Redux actions now are passed from React Navigation (‘Navigation/BACK’, ‘Navigation/NAVIGATE’, etc.)
-
Drawer is ‘drawer’ attribute
Scene
-
Modal is ‘modal’ attribute for
Scene
-
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): https://github.com/react-community/react-navigation/issues/723
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 25
- Comments: 27 (10 by maintainers)
@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
@guysegal
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.
If community will submit PR/patch I will publish new v3 revision.
i love you.