CODEWITHSUNDEEP
react-nativereact-navigationreact-navigation-stack
Joshua Augustinus
Joshua Augustinus

Reputation: 1670

Navigating to a nested screen with react navigation but using a reset/replace action?

I have an app with multiple stack navigators (nested). The docs say that you navigate to a nested screen like:

navigation.navigate('Root', { screen: 'Settings' });

However, in my situation I don't want to allow the user to go back so I want to use a reset/replace action. How would you do that?

The documentation says how to do a reset to a route, but doesn't give info on how to specify the screen e.g.

navigation.reset({
        index: 0,
        routes: [{name: 'Root'}], //Where to put screen?
      });

EDIT Here is my setup On the top level I have 3 screens in a stack:

    <Stack.Navigator
      initialRouteName="HiddenScreen"
      screenOptions={{headerShown: false}}>
      <Stack.Screen
        name="HiddenScreen"
        component={HiddenScreen}
      />
      <Stack.Screen
        name="VideoConferenceIncoming"
        component={VideoConferenceIncoming}
        }}
      />
      <Stack.Screen name="CreateUser" component={CreateUser} />
    </Stack.Navigator>

Now the CreateUser Screen has a stack inside it too:

          <Stack.Navigator
            initialRouteName={initialRoute}
            screenOptions={{
              headerShown: false,
            }}>
            <Stack.Screen name="Step1" component={CreateUserStep1} />
            <Stack.Screen name="Step2" component={CreateUserStep2} />
            <Stack.Screen name="UserRegistered" component={UserRegistered} />
            <Stack.Screen name="ChangePassword" component={ChangePassword} />
            <Stack.Screen name="WaitingRoom" component={WaitingRoom} />
          </Stack.Navigator>

Let's say I am currently inside the VideoConferenceIncoming screen. I want to navigate to the CreateUser>Waiting Room screen. However, I do not want the allow the user to go back.

Currently I have this solution which is not quite right:

      navigation.reset({
        index: 0,
        routes: [{name: 'CreateUser'}],
      });
      navigation.navigate('CreateUser', {
        screen: 'WaitingRoom',
        params: {queuePosition: qPos, ticketNumber: ticketNumber},
      });

It's not right because the user from the WaitingRoom screen can still go back a step.

Upvotes: 0

Views: 2857

Answers (1)

Nishant Nair
Nishant Nair

Reputation: 2020

The documentation here tells you how to do it. But can be a bit difficult to understand if you are new to react-navigation and how it works.

What it says is that you can now set the state of the nested navigator when using reset. So you can specify the specific screen you want to navigate to in the navigator state that you are setting.

So in your case, resetting would be like below.

navigation.dispatch(
 CommonActions.reset({
    index: 0,
    routes: [
        {
            name: 'CreateUser',
            state: {
                routes: [{name: 'WaitingRoom'}],
            },
        },
    ],
  }),
);

Upvotes: 5

Related Questions