The document provides an overview of navigation in React Native, focusing on three components: navigatorios, navigator, and navigationexperimental. It discusses the features and functionalities of each component, including methods for route management and data passing across scenes. Additionally, it covers handling back button actions on Android and provides links to source code and contact information.

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