Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigation in React Native

113 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
  • Be the first to comment

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

×