user section implemented

app/(auth)/sign-in.tsx

@@ -1,20 +1,45 @@
-import { Link, router } from "expo-router";
+import { Link, router, useRouter } from "expo-router";
 import { useState } from "react";
 import { Alert, Image, ScrollView, Text, View } from "react-native";
 
 import CustomButton from "@/components/CustomButton";
 import InputField from "@/components/InputField";
 import { icons, images } from "@/constants";
 import OAuth from "@/components/OAuth";
+import { useSignIn } from "@clerk/clerk-expo";
+import React from "react";
 
 const SignIn = () => {
     const [form, setForm] = useState({
         email: '',
         password: '',
     })
-    const onSignInPress = async () => {
+    const { signIn, setActive, isLoaded } = useSignIn()
+    const router = useRouter()
+    const onSignInPress = React.useCallback(async () => {
+        if (!isLoaded) {
+            return
+        }
+
+        try {
+            const signInAttempt = await signIn.create({
+                identifier: form.email,
+                password: form.password,
+            })
+
+            if (signInAttempt.status === 'complete') {
+                await setActive({ session: signInAttempt.createdSessionId })
+                router.replace('/')
+            } else {
+                // See https://clerk.com/docs/custom-flows/error-handling
+                // for more info on error handling
+                console.error(JSON.stringify(signInAttempt, null, 2))
+            }
+        } catch (err: any) {
+            console.error(JSON.stringify(err, null, 2))
+        }
+    }, [isLoaded, form.email, form.password])
 
-    }
     return (
         <ScrollView className="flex-1 bg-white">
             <View className="flex-1 bg-white">
@@ -43,7 +68,7 @@ const SignIn = () => {
                         onChangeText={(value) => setForm({ ...form, password: value })}
                     />
                     <CustomButton title="Sign In" onPress={onSignInPress} className="mt-6" />
-                    
+
                     <OAuth />
 
                     <Link href="/sign-up" className="text-lg text-center-general-200 mt-10">

app/(root)/(tabs)/_layout.tsx

@@ -0,0 +1,95 @@
+import { Tabs } from "expo-router";
+import { Image, ImageSourcePropType, View } from "react-native";
+
+import { icons } from "@/constants";
+
+const TabIcon = ({
+  source,
+  focused,
+}: {
+  source: ImageSourcePropType;
+  focused: boolean;
+}) => (
+  <View
+    className={`flex flex-row justify-center items-center rounded-full ${focused ? "bg-general-300" : ""}`}
+  >
+    <View
+      className={`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-general-400" : ""}`}
+    >
+      <Image
+        source={source}
+        tintColor="white"
+        resizeMode="contain"
+        className="w-7 h-7"
+      />
+    </View>
+  </View>
+);
+
+export default function Layout() {
+  return (
+    <Tabs
+      initialRouteName="index"
+      screenOptions={{
+        tabBarActiveTintColor: "white",
+        tabBarInactiveTintColor: "white",
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          backgroundColor: "#333333",
+          borderRadius: 50,
+          paddingBottom: 0, // ios only
+          overflow: "hidden",
+          marginHorizontal: 20,
+          marginBottom: 20,
+          height: 78,
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexDirection: "row",
+          position: "absolute",
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="home"
+        options={{
+          title: "Home",
+          headerShown: false,
+          tabBarIcon: ({ focused }) => (
+            <TabIcon source={icons.home} focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="rides"
+        options={{
+          title: "Rides",
+          headerShown: false,
+          tabBarIcon: ({ focused }) => (
+            <TabIcon source={icons.list} focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="chat"
+        options={{
+          title: "Chat",
+          headerShown: false,
+          tabBarIcon: ({ focused }) => (
+            <TabIcon source={icons.chat} focused={focused} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: "Profile",
+          headerShown: false,
+          tabBarIcon: ({ focused }) => (
+            <TabIcon source={icons.profile} focused={focused} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(root)/(tabs)/home.tsx

@@ -1,11 +1,13 @@
 import { SignedIn, SignedOut, useUser } from '@clerk/clerk-expo'
 import { Link } from 'expo-router'
 import { Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 export default function Page() {
   const { user } = useUser()
 
   return (
+    <SafeAreaView>
     <View>
       <SignedIn>
         <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
@@ -19,5 +21,6 @@ export default function Page() {
         </Link>
       </SignedOut>
     </View>
+    </SafeAreaView>
   )
 }

app/(root)/_layout.tsx

@@ -0,0 +1,14 @@
+import { Stack } from 'expo-router';
+import 'react-native-reanimated';
+
+
+const Layout=()=> {
+
+    return (
+        <Stack>
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        </Stack>
+    );
+}
+
+export default Layout;

app/_layout.tsx

@@ -6,6 +6,7 @@ import 'react-native-reanimated';
 
 import { ClerkProvider, ClerkLoaded } from '@clerk/clerk-expo'
 import { Slot } from 'expo-router'
+import { tokenCache } from '@/lib/auth';
 
 const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!
 
@@ -43,7 +44,7 @@ export default function RootLayout() {
   }
 
   return (
-    <ClerkProvider publishableKey={publishableKey}>
+    <ClerkProvider publishableKey={publishableKey} tokenCache={tokenCache}>
       <ClerkLoaded>
         <Stack>
           <Stack.Screen name="index" options={{ headerShown: false }} />