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.

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