React Navigation 5 POP, PUSH & POPTOPOP Ultimate Guide

Handling routes on react native makes things look cool, especially when you want to navigate. React Navigation 5 is one of the best routes I have used, I used it while creating a react native expense tracker application. But one thing can still get you confusing, that is how to pop from any stack to the root stack here is a good example on how to do it.

Before we proceed further, we need to get familiar with StackActions. 

StackActions  is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in CommonActions.

With the help of StackActions we can perform several operations with react navigation 5 sub methods. Below is a list of methods which we can use with StackActions.

#replace

The replace action allows to replace a route in the navigation state. It takes the following arguments:

name - string - A destination name of the route that has been registered somewhere.

params - object - Params to merge into the destination route.

Here is a good example on using the replace.

import { StackActions } from '@react-navigation/native';
navigation.dispatch(
  StackActions.replace('AmazonClone', {
    user: 'bolskills',
  })
);

Here is an example of replacing a particular route using the navigation state route key

import { StackActions } from '@react-navigation/native';
navigation.dispatch({
  ...StackActions.replace('AmazonCloneApp', {
    user: 'boltskills',
  }),
  source: route.key,
  target: navigation.dangerouslyGetState().key,
});

Note:  If you forgot the set the source of with the route key, it will replace the route you are currently focused.

#push

The push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back to earlier in the stack if a route of the given name is already present there. push will always add on top, so a route can be present multiple times.

name - string - Name of the route to push onto the stack.

params - object - Screen params to merge into the destination route .

import { StackActions } from '@react-navigation/native';
const pushAction = StackActions.push('Profile', { name: 'boltskills' });
navigation.dispatch(pushAction);

#pop

The pop action takes you back to the previous route, it also takes in a count which is a number specifying which how many screens you want to pop back to. Take for example I have up to 10 screens in a stack and am currently at that 10th stack, if I want to jump directly to the first stack, I will just use the count and specify exactly the number of stack I want to get at. 

import { StackActions } from '@react-navigation/native';
const popAction = StackActions.pop(1);
navigation.dispatch(popAction);

#popToTop

popTopop takes you back to the first screen in the stack, is also identical to pop as you can also specify the index you want to pop to.

import { StackActions } from '@react-navigation/native';
navigation.dispatch(StackActions.popToTop());


The above examples are a good way to pop, push and much more, is not only limited to using the StackActions, you also get this from the props of every screen you are actively at.

ProductCheckOut({navigation}: ProductDetailsProps) {

  const onBack = () => {
    navigation.pop();
  };
  const onContinue = () => {
    navigation.replace('ProductList');
  };


The code above is coming from a component directly, and we are making use of the navigation from the prop of our component.

Here is a react native Expense tracker app built with react navigation hope you can check it out.


Thank you :D