React navigation cheatsheet

Sometimes we just need to know the fundamentals of a topic of interest but not the details or explanation. Here we shall talk about some key points of react-navigation library. Details will be found here . (I’m writing according to version 3.x)

Installation

npm install — save react-navigation (using npm)

yarn add react-navigation (using yarn)

Stack navigator creation

createStackNavigator function is used to a create stack navigator. createStackNavigator takes a router configuration object and (optionally) an options object. createStackNavigator function return a React component. So we can export it from App.js .

Defining initial route

We can explicitly define initial route using initialRouteName in createStackNavigator, like :

Moving among screens

Let, we defined a stack navigator with two routes Home and Details . We can navigate to screens using :

this.props.navigation.navigate("Home");

this.props.navigation.navigate("Details");

Or,

this.props.navigation.push("Home");

this.props.navigation.push("Details");

Difference between navigate and push :

Let, we are in Home screen and then if we call this.props.navigation.navigate("Home") nothing will happen. navigate function means "go to the specific screen" and if we are already on that screen then it makes no sense going there again (in majority cases) .

Now let, we actually want to add another Details screen. And we want to pass some unique data to each route. To do this, we need to change navigate to push. This allows us to express the intent to add another route regardless of the existing navigation history.

Going back to previous screens

To go back to the immediate previous screen we need to use this.props.navigation.goBack();

To go back to the first screen in the stack we can use navigation.popToTop(); .

Passing parameters to routes

It is recommended, that passed parameters should be JSON-serializable .

To pass parameters to a route we need to put them in an object as a second parameter of navigation.navigate function: this.props.navigation.navigate('RouteName', {firstParam: 1, secondParam : 2});

Reading parameters from routes

this.props.navigation.getParam(paramName, defaultValue);

Or,

this.props.navigation.state.params;

The first approach is recommended, because for the second approach we may get null if no parameter is supplied.

Setting header title of a screen

We need to use navigationOptions here. navigationOptions can be both an object or a function.

static navigationOptions = { title: "My Title", };

To set title from supplied parameters we can write like this :

static navigationOptions = ({ navigation }) => { return { title: navigation.getParam("param", "Default title"), }; };

Updating navigationOptions

setParams function is used to update navigationOptions .

this.props.navigation.setParams({param: "Updated value"})

Sharing common navigationOptions

We can share common navigationOptions among screens.

Title with a custom component

We can use custom components in the title using navigationOptions :

Logo and button together in custom title :

Controlling Drawer in drawer navigation

To open drawer:

this.props.navigation.openDrawer();

To close drawer :

this.props.navigation.closeDrawer();

To toggle drawer :

this.props.navigation.toggleDrawer();

Navigation Events trick

Suppose, you want to perform something after every time navigating to a component using drawernavigator or stacknavigator ; for this purpose NavigationEvents fits better than componentDidMount .

import {NavigationEvents} from "react-navigation";
<NavigationEvents onDidFocus={()=>alert("Hello, I'm focused!")} />

Note : If you want to do the task every time after focusing on a component using drawer navigation or stack navigation then using NavigationEvents is better idea. But if you want to do the task once then you need to use componenetDidMount .

Conclusion

These are some basic usage of react-navigation . Gradually, I shall update this cheatsheet.

Happy scripting! :)

You can also read :

1. Understanding Python decorators
2. Functions as first class object in Python
3. Playing with inheritance in Python
4. Closure in Python and Javascript
5. Min priority-queue in C++

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.