How to create a Drawer navigation in react native - react-native

Question

I am trying to create a Stack navigation, A Drawer navigation and a Bottom Tab navigation. My Stack navigation and Bottom Tab navigation is working fine, but Can't make the Drawer Navigation. Could you tell me what I am missing here? It seems to me Drawer navigation and Tab navigation has a conflict in my code...but can't find why ??? Please help.
My App.js
import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView,DrawerItemList,DrawerItem, } from '#react-navigation/drawer';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';
function DetailsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Details!</Text>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings screen</Text>
<Button
title="Go to Cards"
onPress={() => navigation.navigate('Cards')}
/>
</View>
);
}
const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName="Home">
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="FeedScreen" component={FeedScreen} />
<HomeStack.Screen name="Message" component={Message} />
</HomeStack.Navigator>
);
}
const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} />
<SettingsStack.Screen name="Cards" component={Cards} />
</SettingsStack.Navigator>
);
}
const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen(){
return (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={ProfileScreen}/>
{/* <ProfileStack.Screen name="Cards" component={Cards}/> */}
</ProfileStack.Navigator>
)
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator screenOptions={{ drawerPosition: 'left' }}>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Message" component={Message} />
</Drawer.Navigator>
);
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Answer 1

I Have found the solutions, I just entered tab navigation into drawer navigation and now it's working fine
import 'react-native-gesture-handler';
import Animated, {
useSharedValue,
withTiming,
useAnimatedStyle,
Easing,
} from 'react-native-reanimated';
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView,
DrawerItemList,
DrawerItem, } from '#react-navigation/drawer';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
function Tabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<Tab.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
<Tab.Screen name="Message" component={Message} options={{ headerShown: false }} />
</Tab.Navigator>
);
}
function StackNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Message" component={Message} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Stack">
<Drawer.Screen name="Tabs" component={Tabs} />
</Drawer.Navigator>
</NavigationContainer>
);
}