React-native: Go back to a specific screen in stack

Question

This is the root navigator

export const AppNavigator = StackNavigator({
        Splash: { screen: Splash },
        Dashboard: { screen: DashboardDrawer }
    });

const DashboardDrawer = DrawerNavigator({ DashboardScreen: {
        screen: StackNavigator({
            A: { screen: A },
            B: { screen: B },
            C: { screen: C },
            D: { screen: D },
        }
    }, {
        contentComponent: DashboardDrawerComponent,
        drawerWidth: 280
    });

I have 4 screens - A, B, C, D in my stack. I want to jump from D to A. (or D to any screen) I referred to the following react-navigation documentation-https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back

The above doc. states that to go from screen D to screen A (popping D, C, and B) you need to supply a key to goBack FROM, in my case B, like this

navigation.goBack(SCREEN_KEY_B)

So, my question is from where should I get the key for a specific screen? I checked my root navigation object, and it shows me some dynamically generated key for each screen. How can I specify my own keys for the screens?

Answer 1

It was tricky!

I referred to this section of react-navigation documentation, and have achieved the above! https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions

And this is how,

1. Altered my DrawerNavigator in the question, a little (to fit in the the following stacknavigator)

const DrawerStackNavigator = new StackNavigator({
        A: { screen: A },
        B: { screen: B },
        C: { screen: C },
        D: { screen: D },
    }
});

const DashboardDrawer = DrawerNavigator({
        DashboardScreen: DrawerStackNavigator,
}, { 
       contentComponent: DashboardDrawerComponent,
       drawerWidth: 280
});

2. Dispatched an action in screen D

const {navigation} = this.props;
navigation.dispatch({
    routeName: 'A',
    type: 'GoToRoute',
});

3. Listened to this action on my stack navigator

const defaultGetStateForAction = DrawerStackNavigator.router.getStateForAction;
DrawerStackNavigator.router.getStateForAction = (action, state) => {            
    if (state && action.type === 'GoToRoute') {           
        let index = state.routes.findIndex((item) => {
            return item.routeName === action.routeName
        });
        const routes = state.routes.slice(0, index+1);
        return {
            routes,
            index
        };    
    }       
    return defaultGetStateForAction(action, state);
};