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 :
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.