work on profile page

app.json

@@ -4,7 +4,7 @@
     "slug": "mobilemkv2",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/phone.png",
+    "icon": "./assets/images/bad.png",
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,

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

@@ -0,0 +1,67 @@
+import {View, Text, Image} from 'react-native'
+import React from 'react'
+import {Tabs} from "expo-router";
+import icons from "@/constants/icons"
+
+const TabIcon = ({focused, icon, title }: {focused: boolean, icon: any, title: string}) => (
+    <View className={"flex-1 mt-3 flex flex-col items-center"}>
+        <Image source={icon} tintColor={focused ? '#0061ff' : 'black'}
+        resizeMode={'contain'} className={'size-6'}
+        />
+        <Text className={'text-xs text-center w-full mt-1'}>{title}</Text>
+    </View>
+)
+
+const TabsLayout = () => {
+    // @ts-ignore
+    return (
+        <Tabs screenOptions={{
+            tabBarShowLabel: false,
+            tabBarStyle : {
+            backgroundColor: 'white',
+                position: 'absolute',
+                borderTopColor: 'blue',
+                borderTopWidth: 1,
+                minHeight: 70,
+        }
+        }}
+        >
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: 'home',
+                    headerShown: false,
+                    tabBarIcon: (focused) => (
+                        <TabIcon icon={icons.home} focused={true} title={'home'}/>
+                    )
+
+                }}
+            />
+
+            <Tabs.Screen
+                name="explore"
+                options={{
+                    title: 'explore',
+                    headerShown: false,
+                    tabBarIcon: (focused) => (
+                        <TabIcon icon={icons.search} focused={true} title={'explore'}/>
+                    )
+
+                }}
+            />
+
+            <Tabs.Screen
+                name="profile"
+                options={{
+                    title: 'profile',
+                    headerShown: false,
+                    tabBarIcon: (focused) => (
+                        <TabIcon icon={icons.person} focused={true} title={'profile'}/>
+                    )
+
+                }}
+            />
+        </Tabs>
+    )
+}
+export default TabsLayout

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

@@ -4,7 +4,7 @@ import React from "react";
 const Explore = () => {
   return (
     <View>
-      <Text>SignIn</Text>
+      <Text>explore</Text>
     </View>
   );
 };

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

@@ -11,10 +11,10 @@ export default function Index() {
       }}
     >
       <Text className="font-bold my-10 uppercase">Welcome to mobile.mk</Text>
-      <Link href="/signin">SignIn</Link>
-      <Link href="/explore">explore</Link>
-      <Link href="/profile">profile</Link>
-      <Link href="/cars/1">car</Link>
+      {/*<Link href="/signin">SignIn</Link>*/}
+      {/*<Link href="/explore">explore</Link>*/}
+      {/*<Link href="/profile">profile</Link>*/}
+      {/*<Link href="/cars/1">car</Link>*/}
     </View>
   );
 }

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

@@ -1,11 +1,30 @@
-import { View, Text } from "react-native";
+import {View, Text, SafeAreaView, ScrollView, Image, TouchableOpacity} from "react-native";
 import React from "react";
+import icons from "@/constants/icons"
+import images from "@/constants/images";
 
 const Profile = () => {
+    const handleLogout = async () => {};
   return (
-    <View>
-      <Text>profile</Text>
-    </View>
+    <SafeAreaView className={'h-full bg-white'}>
+        <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerClassName={'pb-32 px-7'}>
+            <View className={'flex flex-row items-center justify-between mt-5'}>
+                <Text className={'text-2xl text-bold'}>Profile</Text>
+                <Image source={icons.bell} className={'size-5'}/>
+            </View>
+            <View className={'flex flex-row justify-center mt-5'}>
+                <View className={'flex flex-col items-center relative mt-5'}>
+                    <Image source={images.car1} className={'size-44 relative rounded-full'}/>
+                    <TouchableOpacity className={'absolute bottom-11 right-2'}>
+                        <Image source={icons.edit} className={'size-9'}/>
+                    </TouchableOpacity>
+                    <Text>Dimitar -- test</Text>
+                </View>
+            </View>
+        </ScrollView>
+    </SafeAreaView>
   );
 };
 

app/(root)/_layout.tsx

@@ -0,0 +1,19 @@
+import {useGlobalContext} from "@/lib/globalProvider";
+import {ActivityIndicator, SafeAreaView} from "react-native";
+import React from "react";
+import {Redirect, Slot} from "expo-router";
+
+export default function AppLayout() {
+    const { loading, isLoggedIn} = useGlobalContext();
+
+    if (loading) {
+        return (
+            <SafeAreaView className={"bg-white h-full flex justify-center items-center"}>
+                <ActivityIndicator className={"text-blue-500"} size={"large"}/>
+            </SafeAreaView>
+        )
+
+    }
+    if(!isLoggedIn) return <Redirect href={"/signin"}/>
+    return <Slot/>
+}

app/signin.tsx

@@ -4,12 +4,15 @@ import images from "@/constants/images";
 import icons from "@/constants/icons";
 import {login} from "@/lib/appwrite";
 import {useGlobalContext} from "@/lib/globalProvider";
+import {Redirect} from "expo-router";
 
 const SignIn = () => {
     const {refetch, loading, isLoggedIn} = useGlobalContext();
+    if(!loading && isLoggedIn) return <Redirect href={"/"}/>;
     const handleLogin = async () => {
         const result = await login();
         if (result) {
+            await  refetch();
             console.log('logon successful');
         } else {
             Alert.alert('Login failed')

constants/images.ts

@@ -17,5 +17,5 @@ export default {
   car1,
   car2,
   onboarding,
-  collage
+  collage,
 };