Download as PDF, PPTX
More Related Content
Similar to Navigating Navigation in React Native
Navigating Navigation in React Native
- 1.
- 2. This is meon the internet @spencer_carli handlebarlabs.com
- 3. Which navigator doI use in React Native? React Navigation Navigator NavigatorIOS React Native Navigation Ex-Navigation NavigationExperimental React Router Native React Native Router Flux Native Navigation
- 4. Assumption: App Was Startedwith React Native • Greenfield app • I’m only talking about what we can do with an app that is based on React Native, not an existing native app with React Native added to it • Existing iOS or Android app will be limited by what’s available there
- 5. JavaScript or Native? •Navigator • Navigation Experimental • Ex-navigation • React Native Router Flux • React Navigation • NavigatorIOS • NativeNavigation • React Native Navigation
- 6. Why is itlike this?! A brief (personal) history lesson…
- 7. At the start:NavigatorIOS • Birth: React Native was released! • Pro: Used the “real” iOS native navigator • Con: iOS only • Death: React Native added Android support
- 8. Navigator • Birth: ReactNative release/death of NavigatorIOS • Pro: Cross platform • Cons: Somewhat confusing, easy mess up, performance • Death: Community take over/NavigationExperimental
- 9. Ex-navigation • Birth: Navigationcomponent wasn’t great • Pros: Cross platform, great defaults, easy to use • Cons: Limited, potential performance issues • Death: React Navigation
- 10. NavigationExperimental • Birth: Needfor a more configurable navigator • Pros: Highly configurable • Cons: CONFUSING, experimental • Death: React Navigation
- 11.
- 12.
- 13.
- 14. The Reality React Navigation Navigator NavigatorIOS ReactNative Navigation Ex-Navigation NavigationExperimental React Router Native React Native Router Flux Native Navigation
- 15. Today’s Primary Contenders •JavaScript: React Navigation • Native: React Native Navigation *Not just because of the naming
- 16. Which do Ichoose?
- 17. Environment Considerations • Using Expoor Create React Native App • React Navigation • “Normal” React Native App • React Navigation • React Native Navigation
- 18. Features: React Navigation •Simple installation • Navigators are components • Stack navigator, tab navigator, drawer navigator • Platform components • Customizable
- 19. Features: React Native Navigation •Performant • Uses the “real thing” - not replication • Simple to use • Minimal boilerplate once installed
- 20. Drawbacks: React Navigation • Easierto make a poor performance app • Can be confusing
- 21. Drawbacks: React Native Navigation •Complex installation for non-native developers • Limited state management solutions (Redux only)
- 22.
- 23.
- 24.