profile left

App.tsx

@@ -12,13 +12,16 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import AppNavigator from './src/navigation/AppNavigator';
+import { PaperProvider } from 'react-native-paper';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <SafeAreaProvider>
-      <AppNavigator />
+      <PaperProvider>
+        <AppNavigator />
+      </PaperProvider>
     </SafeAreaProvider>
   );
 }

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@react-native-vector-icons/ionicons": "^12.3.0",
+        "@react-native-vector-icons/material-icons": "^12.3.0",
         "@react-native/new-app-screen": "0.81.1",
         "@react-navigation/bottom-tabs": "^7.4.7",
         "@react-navigation/elements": "^2.6.4",
@@ -21,8 +22,11 @@
         "react": "19.1.0",
         "react-native": "0.81.1",
         "react-native-keychain": "^10.0.0",
+        "react-native-linear-gradient": "^2.8.3",
+        "react-native-paper": "^5.14.5",
         "react-native-safe-area-context": "^5.6.1",
-        "react-native-screens": "^4.16.0"
+        "react-native-screens": "^4.16.0",
+        "react-native-walkthrough-tooltip": "^1.6.0"
       },
       "devDependencies": {
         "@babel/core": "^7.25.2",
@@ -1994,6 +1998,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@egjs/hammerjs": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -3064,6 +3090,22 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-native-vector-icons/material-icons": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/@react-native-vector-icons/material-icons/-/material-icons-12.3.0.tgz",
+      "integrity": "sha512-W9rhgfc8zKKXhZa/099un/RSNFgO6aHhJR2r6rodvTlO+ZRXq2GbU38CMBwhomJxyErcfmlR7En6wSdtLykYVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native-vector-icons/common": "^12.3.0"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.81.1",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.1.tgz",
@@ -3700,7 +3742,6 @@
       "version": "19.1.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -5310,7 +5351,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-view-buffer": {
@@ -7209,7 +7249,6 @@
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "react-is": "^16.7.0"
       }
@@ -7218,8 +7257,7 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/html-escaper": {
       "version": "2.0.2",
@@ -12219,7 +12257,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -12769,7 +12806,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -12781,7 +12817,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/proxy-from-env": {
@@ -12946,6 +12981,12 @@
         }
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "license": "MIT"
+    },
     "node_modules/react-freeze": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz",
@@ -13060,6 +13101,61 @@
         "node": ">=16"
       }
     },
+    "node_modules/react-native-linear-gradient": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz",
+      "integrity": "sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-paper": {
+      "version": "5.14.5",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.14.5.tgz",
+      "integrity": "sha512-eaIH5bUQjJ/mYm4AkI6caaiyc7BcHDwX6CqNDi6RIxfxfWxROsHpll1oBuwn/cFvknvA8uEAkqLk/vzVihI3AQ==",
+      "license": "MIT",
+      "workspaces": [
+        "example",
+        "docs"
+      ],
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.2.3"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/react-native-paper/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "license": "MIT"
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.6.1.tgz",
@@ -13085,6 +13181,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-walkthrough-tooltip": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.6.0.tgz",
+      "integrity": "sha512-8DHpcqsF+2VULYnKJCSZtllhlFUFiZcWCwOlw5RLkS451ElxPWJn9ShOFVZtkPMcwQAirq3SovumVM7Y/li0Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.1",
+        "react-fast-compare": "^2.0.4"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.24"
+      }
+    },
     "node_modules/react-native/node_modules/commander": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-vector-icons/ionicons": "^12.3.0",
+    "@react-native-vector-icons/material-icons": "^12.3.0",
     "@react-native/new-app-screen": "0.81.1",
     "@react-navigation/bottom-tabs": "^7.4.7",
     "@react-navigation/elements": "^2.6.4",
@@ -23,8 +24,11 @@
     "react": "19.1.0",
     "react-native": "0.81.1",
     "react-native-keychain": "^10.0.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "^5.6.1",
-    "react-native-screens": "^4.16.0"
+    "react-native-screens": "^4.16.0",
+    "react-native-walkthrough-tooltip": "^1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/navigation/AppNavigator.tsx

@@ -6,6 +6,7 @@ import LoginScreen from "../screens/LoginScreen";
 import OtpVerificationScreen from "../screens/OtpVarificationScreen";
 import BottomTabs from "./BottomTabs";
 import SplashScreen from "../screens/SplashScreen";
+import OrganizerRegisterScreen from "../screens/OrgnizerRagister";
 
 const Stack = createNativeStackNavigator();
  export type RootStackParamList = {
@@ -14,6 +15,7 @@ const Stack = createNativeStackNavigator();
   Home:undefined
   HomeTabs:undefined
   splash: undefined
+  OrganizerRegister:undefined
 
 };
 
@@ -40,9 +42,10 @@ export default function AppNavigator() {
   return (
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Splash">
-        <Stack.Screen name="Splash" component={SplashScreen} />
+        <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }}  />
         <Stack.Screen name="HomeTabs" component={BottomTabs} options={{ headerShown: false }}  />
         <Stack.Screen name="Login" component={LoginScreen}   options={{ headerShown: false }} />
+         <Stack.Screen name="OrganizerRegister" component={OrganizerRegisterScreen}   options={{ headerShown: false }} />
         <Stack.Screen name="OtpVarify" component={OtpVerificationScreen}   options={{ headerShown: false }} />
         <Stack.Screen name="Profile" component={ProfileScreen} />
       </Stack.Navigator>

src/navigation/BottomTabs.tsx

@@ -1,31 +1,40 @@
 import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, Platform } from "react-native";
 import { Ionicons } from '@react-native-vector-icons/ionicons';
+import GroupScreen from "../screens/GroupScreen";
 
 const Tab = createBottomTabNavigator();
 
-// Dummy screens for now
+const TAB_CONFIG = {
+  activeColor: "#eb87a3ff", // coffee-like orange
+  inactiveColor: "#000000ff",
+  backgroundColor: "#e3e9efff",
+  height: 80,
+  iconSize: 30,
+  labelSize: 12,
+  labelWeight: "600",
+};
+
+// Dummy Screens
 function HomeScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View style={styles.screen}>
-      <Text>🏠 Home</Text>
+      <Text style={styles.text}>🏠 Home</Text>
     </View>
   );
 }
-
 function ProfileScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View style={styles.screen}>
-      <Text>👤 Profile</Text>
+      <Text style={styles.text}>👤 Profile</Text>
     </View>
   );
 }
-
 function SettingsScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+    <View style={styles.screen}>
-      <Text>⚙️ Settings</Text>
+      <Text style={styles.text}>⚙️ Settings</Text>
     </View>
   );
 }
@@ -35,24 +44,64 @@ export default function BottomTabs() {
     <Tab.Navigator
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarShowLabel: true,
+        tabBarStyle: styles.tabBar,
-        tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
+        tabBarActiveTintColor: TAB_CONFIG.activeColor,
-        tabBarActiveTintColor: "#FF7A00",
+        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
-        tabBarInactiveTintColor: "gray",
+        tabBarLabelStyle: {
-        tabBarIcon: ({ color, size }) => {
+          fontSize: TAB_CONFIG.labelSize,
+          fontWeight: TAB_CONFIG.labelWeight as any,
+          marginBottom: Platform.OS === "ios" ? 0 : 5,
+        },
+        tabBarIcon: ({ color, focused }) => {
           let iconName: string = "home-outline";
 
-          if (route.name === "Home") iconName = "home-outline";
+          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
-          else if (route.name === "Profile") iconName = "person-outline";
+          else if (route.name === "Profile")
-          else if (route.name === "Settings") iconName = "settings-outline";
+            iconName = focused ? "person" : "person-outline";
+          else if (route.name === "Settings")
+            iconName = focused ? "settings" : "settings-outline";
+          else if (route.name === "Group")
+            iconName = focused ? "people" : "people-outline";
 
-          return <Ionicons name={iconName} size={size} color={color} />;
+          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
         },
       })}
     >
       <Tab.Screen name="Home" component={HomeScreen} />
       <Tab.Screen name="Profile" component={ProfileScreen} />
+         <Tab.Screen name="Group" component={GroupScreen} />
       <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: "600",
+    color: "#111",
+  },
+  tabBar: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: TAB_CONFIG.height,
+    backgroundColor: TAB_CONFIG.backgroundColor,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    shadowColor: "#000",
+    shadowOpacity: 0.10,
+    shadowOffset: { width: 0, height: -2 },
+    shadowRadius: 8,
+    elevation: 20,
+    paddingTop:10,
+    borderTopWidth: 0,
+  },
+});

src/screens/GroupScreen.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { FAB, Portal, Provider } from "react-native-paper";
+import Tooltip from "react-native-walkthrough-tooltip";
+import { MaterialIcons } from '@react-native-vector-icons/material-icons';
+
+export default function GroupScreen() {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
+  return (
+    <Provider>
+      <View style={styles.container}>
+        <Text style={styles.title}>Groups</Text>
+
+
+    <FAB
+      style={styles.fab}
+      icon={() => <MaterialIcons name="group-add" size={24} color="#eb87a3ff" />}
+      onPress={() => setTooltipVisible(true)}
+    />
+
+
+      </View>
+    </Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#dae4ed",
+    padding: 16,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: "#333",
+  },
+  fab: {
+    position: "absolute",
+    right: 20,
+    bottom: 90,
+    width: 70,
+    height: 70,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#dae4ed",
+    borderRadius: 60,
+  },
+  tooltipText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

src/screens/OrgnizerRagister.tsx

@@ -0,0 +1,149 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  StyleSheet,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from "react-native";
+import axios from "axios";
+import { ORGRAGISTRATION } from "../utils/ApiUrls";
+import * as Keychain from "react-native-keychain";
+
+const theme = {
+  primary: "#111",
+  accent: "#FF7A00",
+  background: "#F9F9F9",
+  text: "#1A1A1A",
+  subText: "#6B6B6B",
+  outline: "#E5E5E5",
+};
+
+export default function OrganizerRegisterScreen() {
+  const [bankAccountNumber, setBankAccountNumber] = useState("");
+  const [bankName, setBankName] = useState("");
+  const [branchCode, setBranchCode] = useState("");
+  const [loading, setLoading] = useState(false);
+const handleSubmit = async () => {
+  if (!bankAccountNumber || !bankName || !branchCode) {
+    Alert.alert("Error", "All fields are required.");
+    return;
+  }
+
+  try {
+    setLoading(true);
+
+    // 🔑 get token from Keychain
+    const creds = await Keychain.getGenericPassword();
+    const token = creds ? creds.password : null;
+
+    if (!token) {
+      Alert.alert("Error", "No token found. Please log in again.");
+      setLoading(false);
+      return;
+    }
+
+    const payload = {
+      bankAccountNumber,
+      bankName,
+      branchCode,
+    };
+
+    const res = await axios.post(
+      ORGRAGISTRATION, // your API endpoint
+      payload,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`, // 👈 token added here
+        },
+      }
+    );
+
+    console.log("✅ Organizer Registered:", res.data);
+    Alert.alert("Success", "Organizer registered successfully!");
+  } catch (err: any) {
+    console.error("❌ Register Error:", err?.response?.data || err.message);
+    Alert.alert("Error", "Failed to register. Please try again.");
+  } finally {
+    setLoading(false);
+  }
+};
+
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1, backgroundColor: theme.background }}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.title}>Organizer Registration 📝</Text>
+
+        <TextInput
+          placeholder="Bank Account Number"
+          style={styles.input}
+          value={bankAccountNumber}
+          onChangeText={setBankAccountNumber}
+          keyboardType="numeric"
+        />
+
+        <TextInput
+          placeholder="Bank Name"
+          style={styles.input}
+          value={bankName}
+          onChangeText={setBankName}
+        />
+
+        <TextInput
+          placeholder="Branch Code"
+          style={styles.input}
+          value={branchCode}
+          onChangeText={setBranchCode}
+        />
+
+        <Pressable style={styles.button} onPress={handleSubmit} disabled={loading}>
+          <Text style={styles.buttonText}>{loading ? "Submitting..." : "Submit"}</Text>
+        </Pressable>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    justifyContent: "center",
+    padding: 20,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: theme.text,
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: theme.outline,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#fff",
+  },
+  button: {
+    backgroundColor: theme.primary,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontWeight: "600",
+    fontSize: 16,
+  },
+});

src/screens/OtpVarificationScreen.tsx

@@ -85,7 +85,7 @@ export default function OtpVerificationScreen() {
       if (res.data.statusCode === 200) {
         saveToken(res.data.data);
            
-      navigation.navigate('Home')
+      navigation.navigate('HomeTabs')
 
       }
     } catch (err: any) {

src/screens/SplashScreen.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+import { View, Text, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import * as Keychain from "react-native-keychain";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
 import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
 
-
-
 const SplashScreen = () => {
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  const fadeAnim = useRef(new Animated.Value(1)).current; // opacity starts at 1
 
   useEffect(() => {
     const checkLogin = async () => {
@@ -16,9 +15,9 @@ const SplashScreen = () => {
         const creds = await Keychain.getGenericPassword();
         if (creds) {
           console.log("🔑 Found token:", creds.password);
-          navigation.replace("HomeTabs"); // go to bottom tabs if logged in
+          navigation.replace("HomeTabs");
         } else {
-          navigation.replace("Login"); // go to login if not logged in
+          navigation.replace("Login");
         }
       } catch (error) {
         console.error("Error checking login:", error);
@@ -26,12 +25,22 @@ const SplashScreen = () => {
       }
     };
 
-    setTimeout(checkLogin, 1500); // show splash for 1.5s
+    // Start fade out animation
-  }, [navigation]);
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 1500, // fade out in 1.5s
+      useNativeDriver: true,
+      delay: 1500, // wait before fading
+    }).start(() => {
+      checkLogin(); // only navigate after animation
+    });
+  }, [navigation, fadeAnim]);
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Circle Collect</Text>
+      <Animated.Text style={[styles.title, { opacity: fadeAnim }]}>
+        Circle Collect
+      </Animated.Text>
       <ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
     </View>
   );
@@ -44,7 +53,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#111111",
+    backgroundColor: "#FFFFFF", // white background
   },
   title: {
     fontSize: 28,

src/utils/ApiUrls.tsx

@@ -1,2 +1,3 @@
 export  const LOGIN_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/generate/otp?mobile="
-export  const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify"
+export  const VARIFY_OTP_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify"
+export  const ORGRAGISTRATION = "https://exotic-humpback-mistakenly.ngrok-free.app/api/organizer/registration/apply "