3

With React Navigation 5, I want to open Drawer when I click on bottom tab navigator (I use material bottom navigator).

I manage to create the bottom tabs buttons and click on them, the home page opens for both tabs (GymIndexScreen or FoodIndexScreen).

When I am on the home pages (GymIndexScreen or FoodIndexScreen), I can open the different Drawers with my fingers (GymDrawerNavigator and FoodDrawerNavigator ) : everything works fine.

enter image description here

Question : I want the drawers to open / close (toggle) automatically when I click the bottom tabs buttons, without having to open them with my fingers.

App.js :

import { NavigationContainer } from '@react-navigation/native'

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

BottomTabNavigator.js :

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

const Tab = createMaterialBottomTabNavigator()

const BottomTabNavigator = (props) => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Gym"
        component={GymDrawerNavigator}
        options={{
          tabBarLabel: "Musculation",
        )}
      />
      <Tab.Screen
        name="Food"
        component={FoodDrawerNavigator}
        options={{
          tabBarLabel: "Alimentation",
        )}
      />
    </Tab.Navigator>
  )
}

GymDrawerNavigator.js :

import { createDrawerNavigator } from '@react-navigation/drawer'

const Drawer = createDrawerNavigator()

const GymDrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Gym"
        component={GymStackNavigator}
      />
    </Drawer.Navigator>
  )
}

GymStackNavigator.js :

import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

const GymStackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="GymIndex">
      <Stack.Screen
        name="GymIndex"
        component={GymIndexScreen}
        }}
      />
      <Stack.Screen
        name="GymExerciseIndex"
        component={GymExerciseIndexScreen}
        }}
      />
      ... list of screens
Gaylord.P
  • 1,539
  • 2
  • 24
  • 54

2 Answers2

1

If I understood your problem correctly you want to open the drawer automatically when you navigate to the screen? Add this to the screen components you wish to open the drawer when navigated to.

import {useEffect} from 'react'

...

useEffect(()=>{
  navigation.addListener('focus', () => {
     // when screen is focused (navigated to)
     navigation.openDrawer();
  });  
},[navigation])``
Erik Dreifaldt
  • 773
  • 7
  • 13
  • Thank you very much for your answer. I want to open `Drawer` as soon as I click, without going through the home pages with a listener. I created the home pages with links for testing, but they will be removed (the links will be integrated directly into the `Drawer`). – Gaylord.P Nov 26 '20 at 17:04
1

This answer helped me. Just use the listeners prop to preventDefault behaviour and then open the drawer.

<Tabs.Screen 
  name={"More"} 
  listeners={({ navigation }) => ({
    tabPress: e => {
      e.preventDefault();
      navigation.openDrawer();
    }
  })}
  component={Home} 
/>
Manil Malla
  • 133
  • 8