React Native: How to remove the current stack navigator from the navigation-stack

Question

I am struggling with a situation. So I have three stack navigators.

navigator1 => screen1
navigator2 => screen2
navigator3 => screen3, screen4, screen5

I navigate from screen1 to screen2. And then from screen2 to screen3 then screen4 then screen5 and then navigate to screen2 again. But now when I am on screen2, onBack press I don't want to go on screen5, instead want to go directly on screen1.

When I tried to pop screen5, screen4 and screen3 from stack just before navigating to screen2 from screen5 using the follwing code. It didn't work, still screen3 remains on stack.

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

  navigation.dispatch(
       StackActions.popToTop()
  );

OR

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

  navigation.dispatch(
       StackActions.pop(3)
  );

How to remove the navigator3 from the navigation stack? So that I would not go on screen5 from screen2 again onBackPress

I am using react-navigation version 5.x.

So, does it rewind the stack or not? (Currently on my phone so cannot test myself. Just gave it a try) — Putte, Aug 19 '20 at 06:12
That's what the problem is. It goes back to ``screen5`` on back back press from ``screen2``. I want it to navigate on ``screen1`` on back press. — Mani Kant Tiwari, Aug 19 '20 at 06:27
It's probably a bad idea to override the expected behavior of the back button - you'll just confuse your users. Why not implement a dedicated button for this ("back to main menu" etc.) inside the app UI? — Lionel Rowe, Aug 25 '20 at 05:24
Should I block the back button behaviour here on this screen with BackHandler? If the navigator could be removed from the screen, my problem is completely solved. But I am not able to do that. — Mani Kant Tiwari, Aug 25 '20 at 08:12

score 2 · Answer 1 · answered Aug 26 '20 at 01:59

Check out this example it works as you want

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const A = ({ navigation }) => {
  return (
    <View>
      <Text>A</Text>
      <Button title={'Next'} onPress={() => navigation.navigate('Second')} />
    </View>
  );
};
const B = ({ navigation }) => {
  return (
    <View>
      <Text>B</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'C' })}
      />
    </View>
  );
};
const C = ({ navigation }) => {
  return (
    <View>
      <Text>C</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'D' })}
      />
    </View>
  );
};
const D = ({ navigation }) => {
  return (
    <View>
      <Text>D</Text>
      <Button
        title={'Next'}
        onPress={() => navigation.navigate('Third', { screen: 'E' })}
      />
    </View>
  );
};
const E = ({ navigation }) => {
  return (
    <View>
      <Text>E</Text>
      <Button title={'Next'} onPress={() => navigation.navigate('Second')} />
    </View>
  );
};

const FirstStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="A" component={A} />
    </Stack.Navigator>
  );
};

const SecondStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="B" component={B} />
    </Stack.Navigator>
  );
};
const ThirdStackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="C" component={C} />
      <Stack.Screen name="D" component={D} />
      <Stack.Screen name="E" component={E} />
    </Stack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="First" component={FirstStackScreen} />
        <Stack.Screen name="Second" component={SecondStackScreen} />
        <Stack.Screen name="Third" component={ThirdStackScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

So in this example, once you are on ``Screen-E`` then again navigate to ``Screen-B``. When u r on ``Screen-B`` then back press. On back press it **should not go again** on ``Screen-E`` but ``Screen-A``. So this will be resolved if you can remove the whole navigator ``ThirdStackScreen `` . — Mani Kant Tiwari, Aug 26 '20 at 08:40
it's working as you want in your question. When you are in screen-E and u navigate to screen-B.Then on the back press is going back to screen-A, not to screen-E — rishikesh_07, Aug 26 '20 at 09:55

score 2 · Answer 2 · answered Sep 01 '20 at 03:46

2

Why don't you navigate to directly Screen1 when user click back button?

const onBack = () => {
   navigation.navigate('Screen1');
}

answered Sep 01 '20 at 03:46

Shing Ho Tan

931
11
30

Actually sometimes I need to go on some other screen(which is in the stack) from ``Screen2`` depending on from which screen I have previously navigated to ``Screen2``. – Mani Kant Tiwari Sep 01 '20 at 06:00
this is wrong answer if screen1 need route params and you dont store it's before navigate – famfamfam Feb 15 '23 at 02:59

React Native: How to remove the current stack navigator from the navigation-stack

2 Answers2