How to reset the first screen in a navigator?

Question

In my react native app I am navigating from one navigator to a screen in another navigator like this

navigation.navigate(Screens.EXPLORE, {
                  screen: Screens.BRIEF,
                  params: {
                    briefId: briefInfo.campaign_id,
                  },
                });

However once I do this and tap the back button and which returns me the the screen before in its own navigator, if I try to navigate to the other navigator by clicking the icon which should navigate to the home screen of that navigator, it navigates still to the screen I navigated before, within the navigator. Is it possible in any way that when I click the back button in the screen to reset the navigator so that when I normally navigate to it again, it shows me the first screen within the navigator?

You can refer to this answer here: https://stackoverflow.com/a/73027563/7438254 — Sikander Bakht, Jul 18 '22 at 21:47

score 3 · Answer 1 · answered Mar 10 '22 at 07:55

Hey if you are using @react-navigation/native then just import it in your component like this

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

const navigation = useNavigation();

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

it will reset your stacks and also you can you replace instead of navigate that will replace current to new screen

navigation.replace('LoginScreen')

I'm just putting Image over here for your reference.

score 0 · Answer 2 · answered Mar 09 '22 at 15:45

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

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',     // your screen name
    params: {
      user: 'jane',     //your params
    },
  })
);

For reference:- https://reactnavigation.org/docs/navigation-actions/#navigate

score 0 · Answer 3 · answered Mar 09 '22 at 16:21

@this.arjun answer did not help. I managed to fix my problem by changing my above code to this

navigation.navigate(Screens.EXPLORE, {
                  screen: Screens.BRIEF,
                  initial: false,
                  params: {
                    briefId: briefInfo.campaign_id,
                    withPop: true,
                  },
                });

Then in the screen I was navigating to I added this code instead of just doing navigation.goBack()

I added the withPop conditional logic.

onPress={() => {
                        if (withPop) {
                          navigation.pop();
                        }
                        navigation.goBack();
                      }}

I am still missing an animation when I am going back from that screen. But I can live with that.

How to reset the first screen in a navigator?

3 Answers3