drawer routes

Author: luiizsilverio

babel.config.js

@@ -4,6 +4,6 @@ module.exports = function (api) {
     presets: [
       ["babel-preset-expo", { jsxImportSource: "nativewind" }],
       "nativewind/babel",
-    ],
+    ]
   };
 };

package-lock.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@expo-google-fonts/roboto": "^0.2.3",
     "@expo/vector-icons": "^14.0.0",
+    "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.0.2",
     "clsx": "^2.1.0",
     "expo": "~50.0.14",
@@ -30,7 +31,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.73.6",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-reanimated": "^3.8.1",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6",

package.json

@@ -0,0 +1,9 @@
+import { DrawerNavigationOptions } from "@react-navigation/drawer"
+import { IconNameType } from "@/components/drawer-button"
+
+interface CustomOptions extends DrawerNavigationOptions {
+  iconName: IconNameType
+  isDivider?: boolean
+  notifications?: number
+  sectionTitle?: string
+}

src/@types/navigation.d.ts

@@ -0,0 +1,47 @@
+import { colors } from "@/styles/colors";
+import { MaterialIcons } from "@expo/vector-icons";
+import { Tabs } from "expo-router";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: colors.gray[600],
+          borderTopWidth: 0,
+          minHeight: 74,
+        },
+        tabBarShowLabel: false,
+        tabBarActiveTintColor: colors.orange[500],
+        tabBarInactiveTintColor: colors.gray[400],
+        tabBarItemStyle: {
+          paddingBottom: 34,
+          paddingTop: 14
+        }
+      }}
+    >
+      <Tabs.Screen name="index" 
+        options={{
+          tabBarIcon: ({ size, color }) => (
+            <MaterialIcons name="email" size={size} color={color} />
+          )
+        }}
+      />
+      <Tabs.Screen name="chat" 
+        options={{
+          tabBarIcon: ({ size, color }) => (
+            <MaterialIcons name="chat-bubble" size={size} color={color} />
+          )
+        }}
+      />
+      <Tabs.Screen name="meeting" 
+        options={{
+          tabBarIcon: ({ size, color }) => (
+            <MaterialIcons name="videocam" size={size + 4} color={color} />
+          )   
+        }}
+      />
+    </Tabs>
+  )
+}

src/app/(drawer)/(tabs)/_layout.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+export default function Chat() {
+  return (
+    <View className="flex-1 bg-gray-900 pt-14 p-4 items-center justify-center">
+      <Text className="text-white text-2xl font-heading">
+        Chat
+      </Text>
+    </View>
+  )
+}

src/app/(drawer)/(tabs)/chat.tsx

@@ -1,10 +1,11 @@
 import { View, FlatList, Text } from 'react-native';
 
-import Input from '../components/input';
-import { MenuButton } from '../components/menu-button';
-import { Avatar } from '../components/avatar';
-import { Email } from '../components/email';
+import Input from '../../../components/input';
+import { MenuButton } from '../../../components/menu-button';
+import { Avatar } from '../../../components/avatar';
+import { Email } from '../../../components/email';
 import { EMAILS } from '@/utils/emails';
+import { FloatButton } from '../../../components/float-button';
 
 export default function Home() {
   return (
@@ -29,6 +30,8 @@ export default function Home() {
           </Text>
         )}
       />
+
+      <FloatButton icon="edit" />
     </View>
   )
 }

src/app/(tabs)/index.tsx src/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+export default function Meeting() {
+  return (
+    <View className="flex-1 bg-gray-900 pt-14 p-4 items-center justify-center">
+      <Text className="text-white text-2xl font-heading">
+        Meeting
+      </Text>
+    </View>
+  )
+}