how to open react native navigation drawer from every bottom tab bar button

219 Views Asked by At

i am new at react native. I am using react native navigation and i am trying to open drawer from bottom tab bar. What i want to do is, i want to open drawer. It is working with one bottom tab button. When i click the bottom tab button from different screen, its not working.

import * as React from 'react';
import { DrawerActions, NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import jwt from 'jwt-decode'
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Home, LoginPage, Scanner, ItemList, DetailForm } from '../componenets';
import { View } from 'react-native';
import { Image } from 'react-native';
import { Text } from 'react-native';
import { ModuleList } from '../componenets/module-list';
import { useSelector } from 'react-redux';

export const Route = () => {
 

  const Tab = createBottomTabNavigator();
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();

  function StackScreens() {
    return (
      
      <Stack.Navigator screenOptions={{ headerShown: false }} >
        //screens i want to go when click on the drawer menu item
        <Stack.Screen name="Modulelist" component={ModuleList} />
        <Stack.Screen name="DetayList" component={ItemList} />
        <Stack.Screen name="DetailForm" component={DetailForm} />
      </Stack.Navigator>
      
    );
  }


  const DrawerMenu = () => {
    return (

      <Drawer.Navigator screenOptions={{ headerShown: false }} >
        <Drawer.Screen name="ModuleStackScreens" component={StackScreens} />
      </Drawer.Navigator>
      
    );
  }



  return (
    <NavigationContainer >
      
      <Tab.Navigator
        initialRouteName='DrawerMenu'

        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarStyle: { height: 70, paddingBottom: -30, display: "flex", alignItems: "center", flexDirection: "column" },
          tabBarActiveBackgroundColor: "#2D2A35",
          tabBarInactiveBackgroundColor: "#2D2A35",
          tabBarLabelStyle: {
            display: "none",
          }
        })}
      >

//tab button which i want to open drawer 
        <Tab.Screen name="DrawerMenu" component={DrawerMenu} options={{  

          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: "center", width: 64, height: 64 }} >
              <Image source={require('../../assets/modules.png')} resizeMode='contain' style={{ tintColor: focused ? "#e32f45" : "#748c94", width: 35, height: 35, top: 15 }} />
            </View>
          )
        }}
          listeners={({ navigation }) => ({
            tabPress: e => {
              e.preventDefault();
              navigation.dispatch(DrawerActions.openDrawer());

            }
          })}
        />


        <Tab.Screen name="Scanner" component={Scanner} options={{

          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: "center", bottom: 30, backgroundColor: "#474747", borderRadius: 35, width: 70, height: 70 }}>
              <Image source={require('../../assets/camera.png')} resizeMode='contain' style={{ tintColor: focused ? "#e32f45" : "#748c94", width: 35, height: 35, top: 15 }} />
            </View>
          )
        }} />


        <Tab.Screen name="Home" component={Home} options={{

          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: "center", width: 64, height: 64 }}>
              <Image source={require('../../assets/home.png')} resizeMode='contain' style={{ tintColor: focused ? "#e32f45" : "#748c94", width: 35, height: 35, top: 15 }} />

            </View>
          )
        }} />

      </Tab.Navigator>
    </NavigationContainer>

  );
};

I want to open drawer with first tab bottom item and open drawer even if i am on different screen for example scanner, and go to module list component when i click on the item of the drawer.

0

There are 0 best solutions below