How to call a function in a child navigator's screen from a parent navigator's header icon

Question

I'm using react navigation. My top level navigator is a StackNavigator. Within this StackNavigator I have a nested DrawerNavigator. I really want this implementation because I don't want the Navigation Drawer to overlap the header.

In the StackNavigator I have placed an icon (headerRight) in the header. I have a MapView as the first screen route in the nested DrawerNavigator. I want to zoom to the user's current location (which is held globally in a Context) when the icon is pressed.

I can't figure out how to do this. In order for it to work I would need a reference the MapView from the icon's onPress so I can zoom to a specific location. I don't want the DrawerNavigator to be my top-level navigator. What can I do? Here is the code for my navigators:

const DrawerNavigator = createDrawerNavigator({
    "Search Locations": {
        screen: (props) => (
            <CurrentLocationProvider>
                <BusinessLocationsProvider>
                    <SearchLocationsScreen {...props}/>
                </BusinessLocationsProvider>
            </CurrentLocationProvider>
        ),
    },
    "About": {
        screen: AboutScreen,
    },
    "Favorites": {
        screen: FavoritesScreen
    },
    "Profile": {
        screen: ProfileScreen
    },
    "Issues": {
        screen: ReportIssueScreen
    }
}, {
    contentComponent: props => <CustomDrawerComponent {...props} />,
});


const MainStackNavigator = createStackNavigator({
    DrawerNavigator: {
        screen: DrawerNavigator,
    },
    "Checkin": {
        screen: CheckInScreen,
    },
    "Confirmation": {
        screen: (props) => (
            <CurrentLocationProvider>
                <CheckInConfirmationScreen {...props}/>
            </CurrentLocationProvider>
        ),

        navigationOptions: {
            header: null,
        }
    }

}, {
    defaultNavigationOptions: ({navigation}) => configureNavigationOptions(navigation)
});

const LoadingNavigator = createSwitchNavigator({
    "LoadingScreen": LoadingScreen,
    MainStackNavigator: MainStackNavigator,
}, {
    initialRouteName: "LoadingScreen",
});

export default createAppContainer(LoadingNavigator);

Here is the configuration I use for the defaultNavigationOptions in the StackNavigator:

export default (navigation) => {
    const {state} = navigation;
    let navOptions = {};

    // navOptions.header = null;

    navOptions.headerTitle = <Text style={styles.headerTitle}>Nail-Queue</Text>;
    navOptions.headerStyle = {
        backgroundColor: colors.primary
    };

    if (state.index === 0) {
        navOptions.headerRight = (
            <TouchableOpacity onPress={() => {

            }}>
                <MaterialIcons
                    name="my-location"
                    size={32}
                    color="#fff"
                    style={{paddingRight: 10}}
                />
            </TouchableOpacity>
        )
    }

    if (state.isDrawerOpen) {
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(DrawerActions.toggleDrawer())
                }}>
                    <Ionicons name="ios-close" style={styles.menuClose} size={38} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    } else {
        navOptions.headerLeft = (
            <>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity onPress={() => {
                    navigation.dispatch(DrawerActions.toggleDrawer())
                }}>
                    <Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={'#fff'}/>
                </TouchableOpacity>
            </>
        )
    }
    return navOptions;
};

It shouldn't be this difficult to perform such a basic operation but I've been reading documentation for 2 days and getting nowhere.

I was wondering if I could store a ref for the map in a global Context. I already have the user's current position in a Context object. I don't know if it's a bad idea, or if it's even possible to store a ref in a Context object — Jo Momma, Nov 07 '19 at 01:32

score 0 · Answer 1 · answered Nov 08 '19 at 03:10

0

Use a global variable so store map view reference value, and access that reference in you custom header component to zoom to your position.

answered Nov 08 '19 at 03:10

Nguyễn Nam

1
1

You can add your explain in comment section. For answer, you should add example code instead – Huy Nguyen Nov 08 '19 at 03:18

How to call a function in a child navigator's screen from a parent navigator's header icon

1 Answers1