feat(ui): basic styling done tab bar

Author: shanuvr

frontend/app/(tabs)/_layout.tsx

@@ -1,26 +1,58 @@
 import { Tabs } from 'expo-router';
-import {Home,Search,Ticket,User } from 'lucide-react-native'
+import { Home, Search, Ticket, User } from 'lucide-react-native';
 
 export default function TabLayout() {
   return (
-    <Tabs 
-    screenOptions={{ 
-      headerShown: false,
-      tabBarShowLabel:false,
-      tabBarStyle:{
-        height:60,
-        paddingTop:6,
-        paddingBottom:6,
-      },
-      tabBarActiveTintColor:'#22c55e',
-      tabBarInactiveTintColor:'#9ca3af'
-       }}>
-      <Tabs.Screen name="home/index" options={{title: 'Home', tabBarIcon:({color,size})=>(<Home color={color} size={size} strokeWidth={1}/>)
-                                                 }} />
-      <Tabs.Screen name="search/index" options={{ title: 'Search',tabBarIcon:({color,size})=>(<Search color={color} size={size} strokeWidth={1} />) }} />
-      <Tabs.Screen name="events/index" options={{ title: 'Events',tabBarIcon:({color,size})=>(<Ticket color={color} size={size} strokeWidth={1}/>) }} />
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarShowLabel: false,
+        tabBarStyle: {
+          height: 60,
+          paddingTop: 6,
+          paddingBottom: 6,
+        },
+        tabBarActiveTintColor: '#22c55e',
+        tabBarInactiveTintColor: '#9ca3af',
+      }}
+    >
+      <Tabs.Screen
+        name="home/index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Home color={color} size={size} strokeWidth={1} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="search/index"
+        options={{
+          title: 'Search',
+          tabBarIcon: ({ color, size }) => (
+            <Search color={color} size={size} strokeWidth={1} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="events/index"
+        options={{
+          title: 'Events',
+          tabBarIcon: ({ color, size }) => (
+            <Ticket color={color} size={size} strokeWidth={1} />
+          ),
+        }}
+      />
       <Tabs.Screen name="events/[id]" options={{ href: null }} />
-      <Tabs.Screen name="profile/index" options={{ title: 'Profile', tabBarIcon:({color,size})=>(<User color={color} size={size} strokeWidth={1}/>) }} />
+      <Tabs.Screen
+        name="profile/index"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, size }) => (
+            <User color={color} size={size} strokeWidth={1} />
+          ),
+        }}
+      />
     </Tabs>
   );
 }

frontend/screens/auth/PhoneScreen.tsx

@@ -23,13 +23,12 @@ export default function PhoneScreen() {
           params: { phone: fullPhoneNumber },
         });
       }
-    }catch(err:any){
-      const data  = err?.response?.data
-      if(data.next=="login"){
-        router.push("/(auth)/login")
+    } catch (err: any) {
+      const data = err?.response?.data;
+      if (data.next == 'login') {
+        router.push('/(auth)/login');
       }
-    }
-     finally {
+    } finally {
       setLoading(false);
     }
   };

frontend/screens/auth/RegisterScreen.tsx

@@ -87,7 +87,7 @@ export default function RegisterScreen() {
 
       if (res?.success) {
         router.replace('/(tabs)/home');
-        storeTokens(res.accesstoken,res.refreshtoken)
+        storeTokens(res.accesstoken, res.refreshtoken);
       } else {
         Alert.alert('Registration failed', res?.message || 'Try again');
       }

frontend/screens/auth/loginScreen.tsx

@@ -20,12 +20,10 @@ export default function LoginScreen() {
   async function handleLogin() {
     const res = await loginUser({ phoneNumber, password });
     console.log(res);
-    
 
     if (res?.success) {
       router.replace('/(tabs)/home');
-      storeTokens(res.accesstoken,res.refreshtoken)
-    
+      storeTokens(res.accesstoken, res.refreshtoken);
     }
   }