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.