What is RNRF (react-native-router-flux)?
React Native is great product but lacks for stable, intuitive and easy navigation API during many years. Every year we see new, better API: Native Navigator, ex-Navigator, NavigationExperimental, ex-Navigation, wix native navigation, airbnb native navigation, ReactNavigation...
Once I've started React Native development, in 2015, I created RNRF - simple API for easy navigation. It was clear that better navigation instruments will come later but I didn't want to change my code again and again to switch for better API. Every new major version of RNRF is based on different navigation framework and mostly preserves own API.
Another goal was to represent all navigation flow within one place in clear, human-readable way - similar to iOS Storyboards concept. This way other engineers could understand your app flow faster.
I want to talk about latest version (v4) of RNRF based on ReactNavigation and MobX and provide best practices. New version provides not only navigation solution but also proposes a way to manage your app state.
- Why RNRF?
- New features (especially advanced state transitions)
- Comparision with ReactNavigation API core (best navigation so far):
- Navigation calls
Actions[routeName](params)
vsthis.props.navigation.navigate({key: routeName, params})
- Access your navigation properties
this.props
vsthis.props.navigation.state.params
- Declaration of your screens (JSX vs Javascript syntax, one place vs many files)
- Better customization of navbar (additional functionality of RNRF)
- More navigation actions (like
popTo
) (additional functionality of RNRF) - Custom navigators provided by RNRF (like
<Scene backButtonImage={..}
vsnot supported
) - Access to navigation state, current scene (
Actions.currentScene
vs... a lot of code...
) - Inheritance of parent Scene props, including navbar (DRY principle) (additional functionality of RNRF)
- 'Clone' scenes (scenes that could be pushed from any stack) (additional functionality of RNRF)
- Lightbox (overlay) custom navigator for popups/overlays (additional functionality of RNRF)
- Start develop your app with RNRF
- authentication flow
- nested scenes
- unit testing
- reactive programming with MobX/Redux
- Future directions
-Pavlo Aksonov (@PAksonov, a Software Engineer @Hippware, author of RNRF, react-native-xmpp and other open source components for React Native.
It's amazing you wrote RNRF just thinking about the future use of it.