React Native clear the previous screen from the navigation stack

Question

I am developing a React native application for learning purposes. I am now implementing navigation using React Navigation. I am using stack navigation. But I cannot find a way to remove the previous screen from navigation history and kill the app.

I set up my navigation like this.

const AppStack = createStackNavigator({
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Events: {
    screen: Events
  }
});

As you can see in the above code, I open the log in screen by default. After login, I open the Events screen like this.

this.props.navigation.navigate('Events');

The problem is that, When I am on the events page, I can see the back button in the navigation bar. When I press on it, I was brought back to the sign in page.

But what I want is that, after login, I want to remove the sign-in page from the stack. When I am on the events page, when I click on the back button, the app should be closed. Maybe it might not have the back button. It will just act like a first screen in that case. How can I do that?

looking for a similar but I want to navigate to the first screen. not to reset all the screens. for example, if the user accepts the privacy policy and goes to the permission screen then i want to go back to the getstartedscren. and similar from register screen to get started screen. — , Apr 16 '21 at 11:10

score 28 · Accepted Answer · answered Jun 08 '19 at 11:56

28

When Login or Register is completed successfully you have to reset your navigation stack like below,

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Events' })],
});
this.props.navigation.dispatch(resetAction)

and additionally in your Event page you have to add one static method if you don't want header there.

static navigationOptions = navigation => ({
        header: null
});

Hope it will help you.

answered Jun 08 '19 at 11:56

Hardik Virani

1,687
7
23
36

@Wai Yan Hein Accept answer if it resolved your issue so, other people get right answers in future uses. – Hardik Virani Jun 08 '19 at 12:08
Hi, this solves the problem. But can I ask for more? It is not opening the events page with animation. Normally it opens the new screen with slide animation in IOS. – Wai Yan Hein Jun 08 '19 at 12:10
if you reset stack then it can not animate. animation work only with navigation.navigate – Hardik Virani Jun 08 '19 at 12:11

Rajesh N · Answer 2 · 2021-02-22T10:37:26.433

23

In Version V5 onwards

this.props.navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

Using hook in functional componant,

import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();

navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

edited Feb 22 '21 at 10:37

answered Jul 24 '20 at 04:51

Rajesh N

6,198
2
47
58

Caio Mar · Answer 3 · 2021-11-24T21:29:27.427

15

2021 update:

Here's a much easier solution:

this.props.navigation.replace("Events");

This will replace the current screen with a new one while keeping any previous screens in the navigation stack.

Food for thought

Ideally you'd use best practices and do something like:

import * as ROUTES from "../routes/constants"

this.props.navigation.replace(ROUTES.EVENTS);

where routes/constants.js,

const EVENTS = "Events";
...

export {
    EVENTS,
    ...
};

edited Nov 24 '21 at 21:29

answered Sep 30 '21 at 20:43

Caio Mar

2,344
5
31
37

1

Hi, yes this is indeed the easier solution. – Wai Yan Hein Oct 01 '21 at 08:21
1

thanks! I believe the documentation is not very clear on the other props for navigation, and is not covered enough. Thank you Caio! https://reactnavigation.org/docs/stack-actions#replace – Hugo Gresse Dec 09 '21 at 09:41
Hi i had to switch from navigate to replace but that also breaks my screen that i moved to logic for navigation.goBack(). Is this correct? – Huy Tran Aug 12 '23 at 22:46
Yeah, that should work, goBack() pops the last screen from the navigation stack and goes back to the previous screen. But in certain use cases you want to move the user forward down the screen navigation without allowing to go back to the previous screen, like a password reset or after sending a payment or something. – Caio Mar Aug 16 '23 at 21:11

score 11 · Answer 4 · answered Nov 18 '20 at 23:53

11

In V5.x we have reset method

navigation.reset({
  index: 0,
  routes: [{ name: 'ScreenName' }],
});

answered Nov 18 '20 at 23:53

Vikas Sharma

685
8
18

score 0 · Answer 5 · answered Jun 08 '19 at 11:55

0

What you need is the reset functionality

import {NavigationActions} from 'react-navigation';

this.props.navigation.dispatch(NavigationActions.reset({
     index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
 }));

answered Jun 08 '19 at 11:55

DNA.h

823
8
17

score -2 · Answer 6 · edited Nov 25 '19 at 09:38

-2

import {StackActions, NavigationActions} from 'react-navigation';

this.props.navigation.dispatch(StackActions.reset({
     index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
 }));

edited Nov 25 '19 at 09:38

lczapski

4,026
3
16
32

answered Nov 25 '19 at 08:22

FreakyLime

11
1

1

While this answer may be up to date or answer the question without any explanation it still a low quality answer. Please provide explanation in order to let others learn from it.. – Greco Jonathan Nov 25 '19 at 10:41

React Native clear the previous screen from the navigation stack

6 Answers6