Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is RNRF?

What is RNRF?

Router solution for React Native

Pavel Aksonov

February 07, 2018
Tweet

Other Decks in Programming

Transcript

  1. WHAT IS RNRF? ▸ The first declarative JSX React Native

    router ▸ Hide underlying navigation implementation complexity, stable and simple API ▸ Wrap the best existing navigation library and fill the gaps ▸ Separate navigation logic from UI MOTIVATION
  2. FILLING THE GAPS ▸ NavBar customisation ▸ ‘replace’ navigation action

    ▸ Avoid double tap actions ▸ ‘popTo’ navigation action ▸ Many others WHAT IS RNRF?
  3. SIMPLE API ▸ this.props vs this.props.navigation.state.params ▸ Actions.login({ … })

    vs this.props.navigation.navigate({ key: ‘login’, params: { … } }) ▸ One place to see your app navigation logic similar to iOS Storyboards WHAT IS RNRF?
  4. ADDITIONAL FUNCTIONALITY ▸ Access to current state from anywhere (Actions.currentScene)

    ▸ ‘Clone’ scenes ▸ Lightbox and Overlay custom navigators ▸ Access to component instance from NavBar (like Actions.refs.login) ▸ Full MobX/Redux integration WHAT IS RNRF?
  5. WHAT IS RNRF? APP STATE MANAGEMENT ▸ App flow logic

    and navigation calls (if (isLogged) { navigate to main } else { navigate to login} ) within componentDidMount is anti-pattern - mixing UI and business logic ▸ You must use Redux and maintain logic there… Too complex?