React Native Navigation Router

React Native has gone through iterations of its navigation router. The latest play coming in the form of React Navigation and it honestly is a really good approach. The paradigms and overall approach make clear sense and things fall in place perfectly.

Think of the stack as ideally, well a stack, a pile of screens sitting on top of each other, implicitly forming a “history”. Since this is a single page we can easily go ahead and assume that the HomeScreen is the landing screen ( this may change, and we’ll look into that soon ). But ideally its as such, your stack is key value pairs, with the key being the name of your Screen, you use this for navigating through the app from one screen to another, and the value is an object where you need to specify what screen you’d like attached to this key you just placed.

StackNavigator is a function as you can notice, the first argument is the navigatingRoutes and the second being the configurations

StackNavigator(stackRoutes, stackConfig);

In the stackConfig, we can go ahead and set things like the initialRouteName, which has to match with the key of the screen you set up in your stackRoutes object. Other things you can set in the stackConfig include navigationOptions, configuration for invoking functions after a screen loads, controlling custom animation for screen entries and exits.

By screenNavigation options, we can go as deep as setting the headers, the headerBackTitle, the headerStyles, colours — basically heaps of flexibility.

Navigating between screens

We wouldn’t want to make an app with just one screen, that would be boring. Every screen placed on our “stack” is injected with the navigation prop, this contains heaps of information and powerful functionality to allow easy navigation.

Here assume “Button” is a component imported, as TouchableHighlight is the default for React Native. By simply accessing “navigate” we can invoke the function with the key name of the relevant screen we want navigate to and boom, winner!

Passing Params

Sometimes just changing screens isn’t enough, you’d like to pass some relevant data from one user screen to another to keep context alive, things like a users name, their colour preference, and so forth.

The navigate function takes in an object as a second argument which maps keys and prop values accordingly, this information is available in the state attribute of the navigation props that is injected into each screen.

The state contains three attributes, the current screen name, a key ( a unique identifier to sort routes ) and params. Params are where information sent during a navigation transition is found.

navigationOptions which we’ve seen before helps render the title, can also double as a function instead of a constant value, that function is invoked with an object containing the navigation prop as well as a custom screenProps sent to the screen each key containing relevant information. The ‘navigation’ prop, inherently contains the state and therefore the relevant information we sent across the screen! The screenProps prop contains custom props sent to that screen by the user or whatever you would want to send:

<SimpleApp
  screenProps={{tintColor: 'blue'}}
  // navigation={{state, dispatch}} // optionally control the app
/>

This returns an object with the title in this case, but we can certainly add custom components for the header, the back button

More to come on this, next Pt2 will be on the various ‘actions’ available and the power of using these actions to navigate, mutate and manipulate the project to your requirements.

www.Five2One.com.au is a software consultancy based in Sydney, we’ve built products for start ups and large tech firms. We’ve worked with global startups and multi-national companies ranging from the Insurance, Aviation, Law, Car Manufacturing all the way to the Betting industry. Get in touch and lets make software development collaborative, sensible and great!