React Native setting header title and back button

Question

I have nested navigation, which it seems is blocking me from managing header, title and back options on each page. I am using react-navigation 4.x.

I have following items on AppNavigator, first a Drawer:

const DashboardDrawerAgent = createDrawerNavigator(
    {
        DashboardScreenAgent: {
            screen: DashboardScreenAgent,
        },
        ContactsScreen: {
            screen: ContactsScreen,
        },
        ContactGlobalFormScreen: {
            screen: ContactGlobalFormScreen,
        },
})

Then I have a Stack, mixing one screen and drawer:

const InvestorStack = createStackNavigator({
    SelectProfileScreen: {
        screen: SelectProfileScreen,
    },
    DashboardDrawerInvestor: {
        screen: DashboardDrawerInvestor,
    }
}, {
    initialRouteName: 'DashboardDrawerInvestor',
})

Then I use SwitchNavigator:

const AppNavigator = createSwitchNavigator({
        GuestStack: {
            screen: GuestStack
        },
        WelcomeStack: {
            screen: WelcomeStack
        },
        InvestorStack: {
            screen: InvestorStack,
        }
    }, {
        initialRouteName: 'GuestStack',
        headerMode: 'none'
    });

export default createAppContainer(AppNavigator);

Drawer requires a component to list the menu items, on each menu item, method "navigateToScreen" is used to open next screen:

navigateToScreen = ( route ) =>(
        () => {
            const navigateAction = NavigationActions.navigate({
                routeName: route
            });
            this.props.navigation.dispatch(navigateAction);
        }
    )

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={[
                    styles.menuItem
                ]} onPress={this.navigateToScreen("ProfileStack")}>
                    <Text style={[
                        styles.menuItemText 
                    ]}>My Profile</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[
                    styles.menuItem
                ]} onPress={this.navigateToScreen("ContactsScreen")}>
                    <Text style={[
                        styles.menuItemText 
                    ]}>Contacts</Text>
                </TouchableOpacity>
             </View>
          )
      }

I want to be able to set title, hide header, show/hide back button on specific screens, but I am not able, not sure if this nested structure is blocking/overriding some configuration.

I have tried "navigationOptions" on each screen, on each stack too but id did not work, any ideas?

Also I have tried calling directly a specific screen (which belongs to the drawer) directly from a button, just in case "navigateToScreen" is affecting, but no luck either.

Answer 1

Solution was to move the Contact List and Contact Form screen to its own Stack: ContactStack:

const ContactStack = createStackNavigator({
    ContactsScreen: {
        screen: ContactsScreen,
    },
    ContactGlobalFormScreen: {
        screen: ContactGlobalFormScreen
    }
}, {
    initialRouteName: 'ContactsScreen',
});

Then use it in the Drawer and in the Left Sidebar:

const DashboardDrawerInvestor = createDrawerNavigator(
    {
        ...
        ContactStack: {
            screen: ContactStack,
        },
    })