Navigation in React Native

73 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
73
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Navigation in React Native

  1. 1. Navigation in React Native Dani Akash, Software Engineer at RedBlackTree
  2. 2. Three Navigation Components ▪ NavigatorIOS ▪ Navigator ▪ NavigationExperimental
  3. 3. NavigatorIOS ▪ Works only on IOS ▪ Similar to UINavigationController
  4. 4. Navigator ▪ Widely used Navigation Component. ▪ Works on Both Android and IOS ▪ Easy and Predictable Navigation
  5. 5. NavigationExperimental ▪ Currently under development ▪ Has Stateless Navigation Capabilities ▪ Uses Redux style implementation
  6. 6. Navigator ▪ Initial Route ▪ Routestack ▪ RenderScene
  7. 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. 8. The Navigator object ▪ Navigator object is passed by reference across all scenes and can be used to edit navigation scenarios
  9. 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. 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. 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. 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. 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

×