What is RNRF?

Router solution for React Native

Transcript

1. PAVEL AKSONOV FRONT END DEVELOPER @ HIPPWARE.COM @PAKSONOV GITHUB.COM/AKSONOV Currently working on TinyRobot app
2. WHAT IS RNRF (REACT-NATIVE-ROUTER-FLUX)?
3. 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
4. WHAT IS RNRF? JSX VS JAVASCRIPT RNRF React Navigation
5. FILLING THE GAPS ▸ NavBar customisation ▸ ‘replace’ navigation action ▸ Avoid double tap actions ▸ ‘popTo’ navigation action ▸ Many others WHAT IS RNRF?
6. 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?
7. 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?
8. WHAT IS RNRF? APP STATE MANAGEMENT ▸ Define all transitions for the scene:
9. APP STATE MANAGEMENT ▸ How do you implement authentication? WHAT IS RNRF?
10. 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?
11. APP STATE MANAGEMENT ▸ Use RNRF’s onEnter and logical states! WHAT IS RNRF?
12. WHAT IS RNRF? EXAMPLE ▸ https://github.com/aksonov/react-native- starter-app
13. THANK YOU!