Drawer Navigator

//src/components/DrawerButton.js
import { TouchableOpacity } from "react-native";
import React from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useNavigation } from "@react-navigation/native";

const DrawerButton = () => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigation.openDrawer()}>
      <Ionicons name={"menu"} size={28} color={"#000"} />
    </TouchableOpacity>
  );
};

export default DrawerButton;

//src/components/DrawerContent.js
import { View, Text, SafeAreaView } from "react-native";
import React from "react";

const DrawerContent = () => {
  return (
    <SafeAreaView>
      <Text>DrawerContent</Text>
    </SafeAreaView>
  );
};

export default DrawerContent;

//src/navigation/DrawerNavigator.js
import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";

import { USersStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";
import DrawerContent from "../components/DrawerContent";
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        drawerPosition: "right",
        drawerType: "front",
        swipeEnabled: true, // elle kaydırma
        drawerStyle: { width: 150 },
      }}
      drawerContent={() => <DrawerContent />}
    >
      <Drawer.Screen
        name="HomeDrawer"
        options={{ title: "Home" }}
        component={TabNavigator}
      />
      <Drawer.Screen
        name="UsersDrawer"
        options={{ title: "Users" }}
        component={USersStackNavigator}
      />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

//src/navigation/StackNavigator.js
import React from "react";
import { View, Text, Button } from "react-native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Ionicons from "@expo/vector-icons/Ionicons";

// screens
import HomeScreen from "../screens/Home";
import UsersScreen from "../screens/Users";
import UserDetail from "../screens/UsersDetail";
import DrawerButton from "../components/DrawerButton";

//Home Stack
const HomeStack = createNativeStackNavigator();

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="Home"
        component={HomeScreen}
        options={() => ({
          headerLeft: () => <DrawerButton />,

          //   (
          // <Button
          //   title="Open Drawer"
          //   onPress={() => navigation.toggleDrawer()}
          // //   onPress={() => navigation.openDrawer()}
          // />
          //   ),
        })}
      />
    </HomeStack.Navigator>
  );
}

//Settings Stack
const UsersStack = createNativeStackNavigator();

function USersStackNavigator() {
  return (
    <UsersStack.Navigator>
      <UsersStack.Screen name="Users" component={UsersScreen} />
      <UsersStack.Screen name="UserDetail" component={UserDetail} />
    </UsersStack.Navigator>
  );
}

export { HomeStackNavigator, USersStackNavigator };

//src/navigation/TabNavigator.js
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";
import { HomeStackNavigator, USersStackNavigator } from "./StackNavigator";

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => (
  <Tab.Navigator
    screenOptions={({ route }) => ({
      headerShown: false,
      tabBarIcon: ({ color, size }) => {
        let iconName;

        if (route.name === "HomeTab") {
          iconName = "home-outline";
        } else if (route.name === "UsersTab") {
          iconName = "people-outline";
        }
        return <Ionicons name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: "tomato",
      tabBarInactiveTintColor: "gray",
    })}
  >
    <Tab.Screen
      name="HomeTab"
      component={HomeStackNavigator}
      options={{ title: "Home" }}
    />
    <Tab.Screen
      name="UsersTab"
      component={USersStackNavigator}
      options={{ tabBarBadge: 3, title: "Users" }}
    />
  </Tab.Navigator>
);

export default BottomTabNavigator;

// App.js
import * as React from "react";
import { View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import BottomTabNavigator from "./src/navigation/TabNavigator";
import DrawerNavigator from "./src/navigation/DrawerNavigator";

function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

export default App;