CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
Wai Yan Hein
Wai Yan Hein

Reputation: 14791

React Native clear the previous screen from the navigation stack

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?

Upvotes: 25

Views: 47056

Answers (6)

Caio Mar
Caio Mar

Reputation: 2624

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,
    ...
};

Upvotes: 15

Rajesh N
Rajesh N

Reputation: 6683

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'}],
      });

Upvotes: 24

Vikas Sharma
Vikas Sharma

Reputation: 735

In V5.x we have reset method

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

Upvotes: 11

FreakyLime
FreakyLime

Reputation: 11

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

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

Upvotes: -2

Hardik Virani
Hardik Virani

Reputation: 1755

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.

Upvotes: 30

DNA.h
DNA.h

Reputation: 863

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' })]
 }));

Upvotes: 0

Related Questions