How do I add toggle drawer to my navigation?

Question

I am trying to add burger menu button to my navigation but everytime I try to do this it can't find toggleDrawer() or openDrawer() it works well when swiping but I would like to also toggle it with button also. Where do i need to add this functionality that it would work and I am using the v5 of react-navigation

My navigation file is as following.

function DrawerScreen() {
  return (
    <DrawerStack.Navigator
      drawerContent={(props) => <DrawerContent {...props} />}>
      <DrawerStack.Screen name="Home" component={GamesScreen} />
    </DrawerStack.Navigator>
  );
}

export function MainPage() {
  return (
    <MainStack.Navigator initialRouteName="SplashPage">
      <MainStack.Screen
        name="SplashPage"
        component={SplashPage}
        options={{
          headerShown: false,
        }}
      />
      <MainStack.Screen
        name="Home"
        component={Home}
        options={() => {
          return {
            headerTitle: '',
            headerTransparent: true,
            headerShown: false,
            //  headerLeft: (navigation) => (
            //   <Icon
            //   name={'menu'}
            //   style={styles.hamburgerMenu}
            //   onPress={() => toggleDrawer()}
            // /> 
            // ),
          }
        }}
      />
      <MainStack.Screen 
        name="Games"
        component={DrawerScreen}
        options={{
          headerTitle: 'Games',
          headerTransparent: true,
          headerShown: true,
          headerLeft: () => (null),
          headerTitleStyle: {
            color: '#fff',
            fontSize: 30,
            textAlign: 'center'
          }
        }}
      />
           <MainStack.Screen
        name="Kings"
        component={Kings}
        options={{
          headerTitle: 'Kings',
          headerTransparent: true,
          headerShown: true,
          headerBackTitleVisible: false,
          headerTintColor: "#fff",
          headerTitleStyle: {
            color: '#fff',
            fontSize: 30,
            textAlign: 'center'
          },
        }}
      />
      <MainStack.Screen
        name="Centurions"
        component={Centurions}
        options={{
          headerTitle: 'Centurions',
          headerTransparent: true,
          headerShown: true,
          headerTintColor: "#fff",
          headerTitleStyle: {
            color: '#fff',
            fontSize: 36,
            textAlign: 'center'
          },
        }}
      />
      <MainStack.Screen
        name="DrinkOrDare"
        component={DrinkOrDare}
        options={{
          headerTitle: 'Drink Or Dare',
          headerTransparent: true,
          headerShown: true,
          headerTintColor: "#fff",
          headerTitleStyle: {
            color: '#fff',
            fontSize: 30,
            textAlign: 'center'
          },
        }}
      />
      <MainStack.Screen
        name="MostLikely"
        component={MostLikely}
        options={{
          headerTitle: 'Most likely...',
          headerTransparent: true,
          headerShown: true,
          headerTintColor: "#fff",
          headerTitleStyle: {
            color: '#fff',
            fontSize: 30,
            textAlign: 'center'
          },
        }}
      />
      <MainStack.Screen
        name="NeverHaveIEver"
        component={NeverHaveIEver}
        options={{
          headerTitle: 'Never have I ever...',
          headerTransparent: true,
          headerShown: true,
          headerTintColor: "#fff",
          headerTitleStyle: {
            color: '#fff',
            fontSize: 30,
            textAlign: 'center'
          },
        }}
      />
    </MainStack.Navigator>
  );
}

Answer 1

If you make your stack navigator a screen of your drawer navigator instead of the other way around you have access to the navigation object of the drawer, which allows you to call navigation.toggleDrawer() inside the MainPage component.

Here's an example:

const MainStack = createStackNavigator();
const DrawerStack = createDrawerNavigator();

// ...

function DrawerScreen() {
  return (
    <DrawerStack.Navigator
      drawerContent={(props) => <DrawerContent {...props} />}>
      <DrawerStack.Screen name="MainPage" component={MainPage} />
    </DrawerStack.Navigator>
  );
}

export function MainPage({navigation}) {
  return (
    <MainStack.Navigator initialRouteName="SplashPage">
      <MainStack.Screen
        name="Games"
        component={Home}
        options={({navigation}) => ({
          headerLeft: () => (
            <Icon
              name={'menu'}
              onPress={() => {
                navigation.toggleDrawer();
              }}
            />
          ),
        })}
      />
    </MainStack.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <DrawerScreen />
    </NavigationContainer>
  );
};

export default App;

I left out some imports, styles and screens to make the code easier to read.