Lets take following as my stack

 -Welcome
  -A
    -B
    -C
    -D
    -E

I want to navigate back from E to C so that when user clicks on back button from the app they see B. For this I am using following code

    export let _navigator = React.createRef();
    ...
    export resetNavigation=()=>{
      _navigator.current.dispatch(
        CommonActions.reset({
          index: 0,
          routes: [
            {
              name: C,
            },
          ],
        })
      ) 
}

Right now this code takes me back to C but when I click back it takes me to Welcome stack. What am I doing wrong here. Thanks in advance.

CodePudding user response：

Here is the Example. You can check the code below:

App.js

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
import ThirdPage from './pages/ThirdPage';
import VeryFirstPage from './pages/VeryFirstPage';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="VeryFirstPage">
                <Stack.Screen
                    name="VeryFirstPage"
                    component={VeryFirstPage}
                    options={{
                        title: 'Very First Page', //Set Header Title
                        headerStyle: {
                            backgroundColor: '#f4511e', //Set Header color
                        },
                        headerTintColor: '#fff', //Set Header text color
                        headerTitleStyle: {
                            fontWeight: 'bold', //Set Header text style
                        },
                    }}
                />
                <Stack.Screen
                    name="FirstPage"
                    component={FirstPage}
                    options={{
                        title: 'First Page', //Set Header Title
                        headerStyle: {
                            backgroundColor: '#f4511e', //Set Header color
                        },
                        headerTintColor: '#fff', //Set Header text color
                        headerTitleStyle: {
                            fontWeight: 'bold', //Set Header text style
                        },
                    }}
                />
                <Stack.Screen
                    name="SecondPage"
                    component={SecondPage}
                    options={{
                        title: 'Second Page', //Set Header Title
                        headerStyle: {
                            backgroundColor: '#f4511e', //Set Header color
                        },
                        headerTintColor: '#fff', //Set Header text color
                        headerTitleStyle: {
                            fontWeight: 'bold', //Set Header text style
                        },
                    }}
                />
                <Stack.Screen
                    name="ThirdPage"
                    component={ThirdPage}
                    options={ThirdPage.navigationOptions}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

VeryFirstPage.js

import React, {useEffect, useState} from 'react';
import {Button, View, Text, SafeAreaView} from 'react-native';

const VeryFirstPage = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            This is the Very First Page of the app
          </Text>
          <Button
            title="Go to First Sreen"
            onPress={() => navigation.navigate('FirstPage')}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default VeryFirstPage;

FirstPage.js

import React, {useEffect, useState} from 'react';
import {Button, View, Text, SafeAreaView} from 'react-native';

const FirstPage = ({navigation}) => {

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            This is the First Page of the app
          </Text>
          <Button
            title="Go to Second Sreen"
            onPress={() => navigation.navigate('SecondPage')}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default FirstPage;

SecondPage.js

import React from 'react';
import {View, Text, SafeAreaView,Button} from 'react-native';

const SecondPage = ({navigation}) => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1, padding: 16}}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text
            style={{
              fontSize: 25,
              textAlign: 'center',
              marginBottom: 16,
            }}>
            This is Second Page of the App
          </Text>
           <Button
            title="Go to Third Sreen"
            onPress={() => navigation.navigate('ThirdPage')}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

export default SecondPage;

ThirdPage.js

import React from 'react';
import { View, Text, SafeAreaView, Button } from 'react-native';
import { HeaderBackButton } from '@react-navigation/elements';

const ThirdPage = ({ navigation }) => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={{ flex: 1, padding: 16 }}>
                <View
                    style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>
                    <Text
                        style={{
                            fontSize: 25,
                            textAlign: 'center',
                            marginBottom: 16,
                        }}>
                        This is Third Page of the App
                    </Text>
                </View>
            </View>
        </SafeAreaView>
    );
};

ThirdPage.navigationOptions = ({ navigation }) => {
    return {
        title: 'Third Page', 
        headerLeft: () => (<HeaderBackButton tintColor='#FFF' onPress={() => { navigation.navigate('FirstPage') }} />),
        headerStyle: {
            backgroundColor: '#f4511e', 
        },
        headerTitleStyle: {
            fontWeight: 'bold',
            color: '#FFF'
        },

    }
}

export default ThirdPage;

CodePudding user response：

You can use pop action provided by react navigation.

const popAction = StackActions.pop(count);

navigation.dispatch(popAction);

here count is the number of screens you want to go back.

For more info - https://reactnavigation.org/docs/stack-actions/#pop