Skip to content

Instantly share code, notes, and snippets.

Last active Oct 29, 2021
What would you like to do?
Proposal for lightning talk at ReactiveConf 2017: What is RNRF (react-native-router-flux)?

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.

The talk contents:

  1. Why RNRF?
  2. New features (especially advanced state transitions)
  3. Comparision with ReactNavigation API core (best navigation so far):
  • Navigation calls Actions[routeName](params) vs this.props.navigation.navigate({key: routeName, params})
  • Access your navigation properties this.props vs this.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={..} vs not 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)
  1. Start develop your app with RNRF
  • authentication flow
  • nested scenes
  • unit testing
  • reactive programming with MobX/Redux
  1. Future directions

About me

-Pavlo Aksonov (@PAksonov, a Software Engineer @Hippware, author of RNRF, react-native-xmpp and other open source components for React Native.

Copy link

HarshitChhipa commented Jun 14, 2018

It's amazing you wrote RNRF just thinking about the future use of it.

Copy link

daviscabral commented Jun 17, 2018

@aksonov Very nice Pavlo. Have you presented it already anywhere? It would be great if you could make an online seminar for the RNRF users someday. Record and make it available in the README.

Copy link

vonwao commented Aug 29, 2019

I was confused, because this is the outline to a talk but no link to the talk. I found a youtube which seems like is the talk that this document refers to! Here it is for anyone else who is interested:

Copy link

JanithaR commented Apr 3, 2020

Thanks, @vonwao.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment