title: React Navigation : Open drawer when I click on bottom tab navigator
body: <p>With React Navigation 5, I want to open Drawer when I click on bottom tab navigator (I use <a href="https://reactnavigation.org/docs/material-bottom-tab-navigator/" rel="nofollow noreferrer"><strong>material</strong> bottom navigator</a>).</p>
  <p>I manage to create the bottom tabs buttons and click on them, the home page opens for both tabs (<code>GymIndexScreen</code> or  <code>FoodIndexScreen</code>).</p>
  <p>When I am on the home pages (<code>GymIndexScreen</code> or <code>FoodIndexScreen</code>), I can open the different Drawers <strong>with my fingers</strong> (<code>GymDrawerNavigator</code> and <code>FoodDrawerNavigator</code> ) : <strong>everything works fine</strong>.</p>
  <p><a href="https://i.stack.imgur.com/EONwp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EONwp.png" alt="enter image description here" /></a></p>
  <p><strong>Question :</strong>
  I want the drawers to open / close (toggle) automatically when I click the bottom tabs buttons, without having to open them with my fingers.</p>
  <p><code>App.js</code> :</p>
  <pre><code>import { NavigationContainer } from '@react-navigation/native'
  
  const App = () =&gt; {
    return (
      &lt;NavigationContainer&gt;
        &lt;BottomTabNavigator /&gt;
      &lt;/NavigationContainer&gt;
    )
  }
  </code></pre>
  <p><code>BottomTabNavigator.js</code> :</p>
  <pre><code>import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
  
  const Tab = createMaterialBottomTabNavigator()
  
  const BottomTabNavigator = (props) =&gt; {
    return (
      &lt;Tab.Navigator&gt;
        &lt;Tab.Screen
          name=&quot;Gym&quot;
          component={GymDrawerNavigator}
          options={{
            tabBarLabel: &quot;Musculation&quot;,
          )}
        /&gt;
        &lt;Tab.Screen
          name=&quot;Food&quot;
          component={FoodDrawerNavigator}
          options={{
            tabBarLabel: &quot;Alimentation&quot;,
          )}
        /&gt;
      &lt;/Tab.Navigator&gt;
    )
  }
  </code></pre>
  <p><code>GymDrawerNavigator.js</code> :</p>
  <pre><code>import { createDrawerNavigator } from '@react-navigation/drawer'
  
  const Drawer = createDrawerNavigator()
  
  const GymDrawerNavigator = () =&gt; {
    return (
      &lt;Drawer.Navigator&gt;
        &lt;Drawer.Screen
          name=&quot;Gym&quot;
          component={GymStackNavigator}
        /&gt;
      &lt;/Drawer.Navigator&gt;
    )
  }
  </code></pre>
  <p><code>GymStackNavigator.js</code> :</p>
  <pre><code>import { createStackNavigator } from '@react-navigation/stack'
  
  const Stack = createStackNavigator()
  
  const GymStackNavigator = () =&gt; {
    return (
      &lt;Stack.Navigator initialRouteName=&quot;GymIndex&quot;&gt;
        &lt;Stack.Screen
          name=&quot;GymIndex&quot;
          component={GymIndexScreen}
          }}
        /&gt;
        &lt;Stack.Screen
          name=&quot;GymExerciseIndex&quot;
          component={GymExerciseIndexScreen}
          }}
        /&gt;
        ... list of screens
  </code></pre>