A short presentation on Navigation in React Native done at the first react Native Chennai Meetup on Saturday, the 4th of feb at @Works, KRDS facility.

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