How to access navigation props of a stack navigator from another

Question

I'm struggling with a navigation problem in React Navigation 5.x I have the following project structure , where (1) is a Stack Navigator, (2, 3 and 4) are different stacks nested in (1).

What I want to achieve: I want (1) header buttons to: go back a screen and go back to home.

(1):

<NavigationContainer>
        <Stack.Navigator screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS, gestureDirection: 'vertical'}} >
            <Stack.Screen
                name='Home' 
                component={Pages.Home} 
                options={({navigation}: any) => ({ 
                    headerLeft: () => 
                        <TouchableOpacity onPress={() => navigation.navigate('Menu')}>
                            <Icon name='menu' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginLeft: 20}}/>
                        </TouchableOpacity>,
                    headerRight: props => <Icon name='bell' size={Mixins.scaleHeight(20)} color={Colors.WHITE} style={{marginRight: 20}}/>,
                    headerTitle: '',
                    headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
                    cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
                    
                })}
            />
            <Stack.Screen
                name='Menu'
                component={Pages.Menu}
                options={({navigation}: any) => ({
                    headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
                    headerRight: () => 
                        <TouchableOpacity onPress={() => navigation.popToTop()}>
                            <Icon name='close' size={Mixins.scaleHeight(25)} color={Colors.WHITE} style={{marginRight: 20}}/>
                        </TouchableOpacity>,
                    headerTitle: '',
                    headerLeft: () => <></>,
                })}
            />
            <Stack.Screen
                name='Stack2'
                component={Stack2}
                options={({route, navigation}: any) =>( {
                    headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
                    headerBackTitle: ' ',
                    headerTitle: '',
                    headerBackTitleStyle: {color: '#fff'},
                    headerLeft: () =>
                        <TouchableOpacity onPress={() => navigation.goBack()}>
                            <HeaderBackImage textRegular='Stack' textBold='2'/>
                        </TouchableOpacity>,
                    headerRight: props => 
                        <TouchableOpacity onPress={() => navigation.popToTop()}>
                            <Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
                        </TouchableOpacity>,
                })}
            />
            <Stack.Screen
                name='Stack3'
                component={Stack3}
                options={({route, navigation}: any) =>( {
                    headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
                    headerBackTitle: ' ',
                    headerTitle: '',
                    headerBackTitleStyle: {color: '#fff'},
                    headerLeft: () =>
                        <TouchableOpacity onPress={() => navigation.goBack()}>
                            <HeaderBackImage textRegular='Stack' textBold='3'/>
                        </TouchableOpacity>,
                    headerRight: props => 
                        <TouchableOpacity onPress={() => navigation.popToTop()}>
                            <Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
                        </TouchableOpacity>,
                })}
            />
            <Stack.Screen
                name='Stack4'
                component={Stack4}
                options={({route, navigation}: any) =>( {
                    headerStyle: [{elevation: 0, borderWidth: 0, shadowOpacity: 0, borderColor: Colors.TRANSPARENT, backgroundColor: Colors.PRIMARY}],
                    headerBackTitle: ' ',
                    headerTitle: '',
                    headerBackTitleStyle: {color: '#fff'},
                    headerLeft: () =>
                        <TouchableOpacity onPress={() => navigation.goBack()}>
                            <HeaderBackImage textRegular='Stack' textBold='4'/>
                        </TouchableOpacity>,
                    headerRight: props => 
                        <TouchableOpacity onPress={() => navigation.popToTop()}>
                            <Icon name='close' size={Mixins.scaleHeight(24)} color={Colors.WHITE} style={{marginRight: 20}}/>
                        </TouchableOpacity>,
                })}
            />
        </Stack.Navigator>
    </NavigationContainer>

(2):

const Stack2 = () => (
<Stack.Navigator screenOptions={{gestureDirection: 'horizontal'}}>
    <Stack.Screen
        name='ScreenA'
        component={Pages.ScreenA}
        options={{
            headerShown: false,
        }}
    />
    <Stack.Screen
        name='ScreenB'
        component={Pages.ScreenB}
        options={{
            headerShown: false,
        }}
    />
    <Stack.Screen
        name='ScreenC'
        component={Pages.ScreenC}
        options={{
            headerShown: false,
        }}
    />
    <Stack.Screen
        name='ScreenD'
        component={Pages.ScreenD}
        options={{
            headerShown: false,
        }}
    />
</Stack.Navigator>);

Problem: The (1) header navigation.goBack() won't go back a single screen on (2, 3 or 4) stack, it's going back from (2, 3 or 4) to (1) directly.

Is there a way to access (2, 3 or 4) navigation props from (1) header?

Answer 1

Try putting the back buttons in the screens of stacks 2,3,4.