Navigation in React Native
0 likes1,146 views
There are three main navigation components in React Native: NavigatorIOS, Navigator, and NavigationExperimental. Navigator is the most widely used and supports navigation on both Android and iOS with easy and predictable navigation. It uses an initial route, route stack, and render scene method. The Navigator object is passed by reference and can be used to edit navigation and pass data between scenes using methods like push, pop, and replace. Back button handling on Android can be done through the BackAndroid component as an event listener.
Navigation in React Native
- 1. Navigation in React Native Dani Akash, Software Engineer at RedBlackTree
- 2. Three Navigation Components ▪ NavigatorIOS ▪ Navigator ▪ NavigationExperimental
- 3. NavigatorIOS ▪ Works only on IOS ▪ Similar to UINavigationController
- 4. Navigator ▪ Widely used Navigation Component. ▪ Works on Both Android and IOS ▪ Easy and Predictable Navigation
- 5. NavigationExperimental ▪ Currently under development ▪ Has Stateless Navigation Capabilities ▪ Uses Redux style implementation
- 6. Navigator ▪ Initial Route ▪ Routestack ▪ RenderScene
- 7. RenderScene ▪ Route Object contains properties of the route such as transitions and gestures ▪ Need to disable gestures to prevent swipe back (Route can be used as a separate file and can be deep copied into the React Project)
- 8. The Navigator object ▪ Navigator object is passed by reference across all scenes and can be used to edit navigation scenarios
- 9. Navigation Methods ▪ Push ▪ Pop ▪ Replace Push - adds new route to the routestack Pop - exactly reverses the previous push action Replace - replaces the last route in the routestack (Replace actions cannot have transition effects)
- 10. Passing data along the Scenes ▪ We can use the Navigator object to pass data across the scenes ▪ Data can be passed from any scene to successive scenes
- 11. Handling Back Button Action in Android BackAndroid component: ▪ It’s an event listener ▪ Used outside of the react component ▪ Handles props by reference ▪ Can be used to exit the app
- 12. Handling Back Button Action in Android BackAndroid component: ▪ It’s an event listener ▪ Used outside of the react component ▪ Handles props by reference ▪ Can be used to exit the app
- 13. Thanks! Source Code: https://github.com/RedBlackTreeSourceCode/ReactNative-MeetUp/tree/Navigation-Demo-App Slide Deck: http://www.redblacktree.com/events Contacts: Dani Akash, Software Engineer, RedBlackTree - @DaniAkashS Facebook: https://www.facebook.com/groups/ReactNativeChennai