//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;