Navigation in React Native

Dani Akash, Software Engineer at RedBlackTree

Three Navigation Components

▪ NavigatorIOS

▪ Navigator

▪ NavigationExperimental

NavigatorIOS

▪ Works only on IOS

▪ Similar to UINavigationController

Navigator

▪ Widely used Navigation Component.

▪ Works on Both Android and IOS

▪ Easy and Predictable Navigation

NavigationExperimental

▪ Currently under development

▪ Has Stateless Navigation Capabilities

▪ Uses Redux style implementation

Navigator

▪ Initial Route

▪ Routestack

▪ RenderScene

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)

The Navigator object

▪ Navigator object is passed by reference across all

scenes and can be used to edit navigation scenarios

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)

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

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

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

Thanks!Source Code: https://github.com/RedBlackTreeSourceCode/ReactNative-MeetUp/tree/Navigation-Demo-App

Slide Deck: http://www.redblacktree.com/eventsContacts:Dani Akash, Software Engineer, RedBlackTree - @DaniAkashSFacebook: https://www.facebook.com/groups/ReactNativeChennai