title: How to open a drawer on click of a bottom tab in React Navigation?
body: <p>I am using React Navigation. I have a 'more' button as the last item of the bottom tab navigator and I want it to open a drawer when a user clicks on it. I have tried so many things and studied so many answers but nothing works. The closest I can get is below. It brings you to a page which contains a drawer that can be opened. However, I want it to be opened when it is clicked. </p>
  
  <p>So far I have this code...</p>
  
  <pre><code>const MoreStack = createDrawerNavigator({
    More: { screen: More }
  })
  
  const MainTabNavigator = createBottomTabNavigator({
      Home: { screen: HomeStack }
      ...
      More: { screen: MoreStack }
  })
  
  const MainStackNavigator = createStackNavigator({
      MainTabNavigator: MainTabNavigator,
  })
  
  const AppSwitchNavigator = createSwitchNavigator({
    Welcome: { screen: WelcomeScreen },
    Home: { screen: MainStackNavigator }
  })
  
  const AppContainer = createAppContainer(AppSwitchNavigator)
  
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So a possible solution is to open the MoreStack with an initial Route that renders a FlatList as opposed to a drawer. In the MoreStack I also create all the pages I need to be included in the More FlatList. Then in the More screen I create an array with each route as an object and I link to them from the FlatList using navigation.navigate(item.name)</p>
  
  <p>The problem with this, and the key to making it work like a drawer was setting the backBehavior: 'history', in the MainTabNavigator. Then, when you add a gesture handler to the 'More' screen onSwipeRight and set to navigation.goBack(null) it will return you to the previous route, making it feel like you are 'closing' the more screen.</p>
  
  <p>I am not sure how this will all work once I get into more navigation situations for routes within the MoreStack, but I guess I'll deal with that when I get to it.</p>