rersistesiion integraytion api impolement

App.tsx

@@ -11,31 +11,18 @@ import {
   SafeAreaProvider,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
+import AppNavigator from './src/navigation/AppNavigator';
 
 function App() {
   const isDarkMode = useColorScheme() === 'dark';
 
   return (
     <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <AppNavigator />
-      <AppContent />
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
-
-  return (
-    <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
-      />
-    </View>
-  );
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package.json

@@ -10,13 +10,24 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-vector-icons/ionicons": "^12.3.0",
     "@react-native/new-app-screen": "0.81.1",
+    "@react-navigation/bottom-tabs": "^7.4.7",
+    "@react-navigation/elements": "^2.6.4",
+    "@react-navigation/native": "^7.1.17",
+    "@react-navigation/native-stack": "^7.3.26",
+    "@react-navigation/stack": "^7.4.8",
+    "axios": "^1.11.0",
+    "install": "^0.13.0",
+    "npm": "^11.6.0",
     "react": "19.1.0",
     "react-native": "0.81.1",
     "react-native-elements": "^3.4.3",
     "react-native-image-picker": "^8.2.1",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-keychain": "^10.0.0",
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-screens": "^4.16.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/common/Custom.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+} from "react-native";
+
+type CustomInputProps = {
+  label: string;
+  value: string;
+  placeholder: string;
+  onChangeText: (text: string) => void;
+};
+
+const CustomInput: React.FC<CustomInputProps> = ({
+  label,
+  value,
+  placeholder,
+  onChangeText,
+}) => (
+  <View style={styles.inputContainer}>
+    <Text style={styles.inputLabel}>{label}</Text>
+    <TextInput
+      style={styles.input}
+      placeholder={placeholder}
+      value={value}
+      placeholderTextColor="#999"
+      onChangeText={onChangeText}
+    />
+  </View>
+);
+
+type CustomButtonProps = {
+  title: string;
+  onPress: () => void;
+  type?: "primary" | "secondary" | "danger";
+};
+
+const CustomButton: React.FC<CustomButtonProps> = ({
+  title,
+  onPress,
+  type = "primary",
+}) => (
+  <TouchableOpacity
+    style={[
+      styles.button,
+      type === "secondary" && styles.buttonSecondary,
+      type === "danger" && styles.buttonDanger,
+    ]}
+    onPress={onPress}
+    activeOpacity={0.8}
+  >
+    <Text
+      style={[
+        styles.buttonText,
+        type === "secondary" && styles.buttonTextSecondary,
+        type === "danger" && styles.buttonTextDanger,
+      ]}
+    >
+      {title}
+    </Text>
+  </TouchableOpacity>
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#f5f7fb" },
+  loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
+  loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 16,
+    paddingTop: 40,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderColor: "#eee",
+  },
+  headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
+  profileCard: {
+    borderRadius: 16,
+    margin: 16,
+    backgroundColor: "#fff",
+    padding: 20,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  profileHeader: { alignItems: "center", marginBottom: 16 },
+  avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
+  cameraIcon: {
+    position: "absolute",
+    right: 110,
+    bottom: 10,
+    backgroundColor: "#007AFF",
+    borderRadius: 15,
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  detail: {
+    fontSize: 16,
+    marginBottom: 10,
+    color: "#444",
+    paddingLeft: 4,
+  },
+  inputContainer: { marginBottom: 12 },
+  inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    backgroundColor: "#fdfdfd",
+    color: "#000",
+    fontSize: 15,
+  },
+  button: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    marginVertical: 6,
+    shadowColor: "#007AFF",
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  buttonSecondary: {
+    backgroundColor: "#e5e5ea",
+  },
+  buttonDanger: {
+    backgroundColor: "#ff3b30",
+  },
+  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+  buttonTextSecondary: { color: "#333" },
+  buttonTextDanger: { color: "#fff" },
+});
+
+export { CustomInput, CustomButton, styles };

src/navigation/AppNavigator.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { View, Text, Button } from "react-native";
+import LoginScreen from "../screens/LoginScreen";
+import OtpVerificationScreen from "../screens/OtpVarificationScreen";
+import BottomTabs from "./BottomTabs";
+import SplashScreen from "../screens/SplashScreen";
+import Profile from "../screens/profile/Profile";
+
+const Stack = createNativeStackNavigator();
+export type RootStackParamList = {
+  Login: undefined;
+  OtpVarify: { mobile: string };
+  Home: undefined
+  HomeTabs: undefined
+  splash: undefined
+
+};
+
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Profile"
+      />
+    </View>
+  );
+}
+
+
+
+export default function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Splash">
+        <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
+        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
+        <Stack.Screen name="Profile" component={Profile} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

src/navigation/BottomTabs.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { View, Text } from "react-native";
+import {Ionicons} from '@react-native-vector-icons/ionicons';
+import Profile from "../screens/profile/Profile";
+
+const Tab = createBottomTabNavigator();
+
+// Dummy screens for now
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text>🏠 Home</Text>
+    </View>
+  );
+}
+
+function SettingsScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text>⚙️ Settings</Text>
+    </View>
+  );
+}
+
+export default function BottomTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarShowLabel: true,
+        tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
+        tabBarActiveTintColor: "#FF7A00",
+        tabBarInactiveTintColor: "gray",
+        tabBarIcon: ({ color, size }) => {
+          let iconName: React.ComponentProps<typeof Ionicons>['name'] = "home-outline";
+
+          if (route.name === "Home") iconName = "home-outline";
+          else if (route.name === "Profile") iconName = "person-outline";
+          else if (route.name === "Settings") iconName = "settings-outline";
+
+          return <Ionicons name={iconName} size={size} color={color} />;
+        },
+      })}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={Profile} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

src/screens/LoginScreen.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  Animated,
+  StatusBar,
+} from "react-native";
+import { LOGIN_URL } from "../utils/ApiUrls";
+import axios from "axios";
+import { useNavigation } from "@react-navigation/native";
+import type { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from "../navigation/AppNavigator";
+
+const theme = {
+  primary: "#111111",
+  accent: "#FF7A00",
+  background: "#F9F9F9",
+  text: "#1A1A1A",
+  subText: "#6B6B6B",
+  outline: "#E5E5E5",
+};
+
+export default function LoginScreen() {
+  const [mobile, setMobile] = useState("");
+    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+
+
+  // animations
+  const fade = useRef(new Animated.Value(0)).current;
+  const slide = useRef(new Animated.Value(24)).current;
+  const ctaScale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
+      Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
+    ]).start();
+  }, []);
+
+ const handleContinue = async () => {
+    if (mobile.length === 10) {
+      console.log("Mobile submitted:", mobile);
+      try {
+        const res = await axios.get(LOGIN_URL+mobile)
+        console.log('loginres',res.data)
+        if(res.data.statusCode === 200){
+            navigation.navigate('OtpVarify', { mobile: mobile })
+        }
+      } catch (error) {
+        
+      }
+    } else {
+      Alert.alert("Please enter a valid 10-digit mobile number");
+    }
+  };
+
+  const onPressIn = () =>
+    Animated.spring(ctaScale, {
+      toValue: 0.97,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 0,
+    }).start();
+
+  const onPressOut = () =>
+    Animated.spring(ctaScale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 6,
+    }).start();
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
+
+      {/* Top content */}
+      <View style={styles.topSection}>
+        <Text style={styles.brand}>CircleCollect</Text>
+        <Text style={styles.title}>Welcome Back 👋</Text>
+        <Text style={styles.subtitle}>
+          Enter your mobile number to sign in and continue.
+        </Text>
+
+        <Animated.View
+          style={[
+            styles.inputWrapper,
+            { opacity: fade, transform: [{ translateY: slide }] },
+          ]}
+        >
+          <Text style={styles.inputLabel}>Mobile Number</Text>
+          <TextInput
+            style={styles.input}
+            placeholder="Enter Mobile Number"
+            placeholderTextColor={theme.subText}
+            keyboardType="phone-pad"
+            maxLength={10}
+            value={mobile}
+            onChangeText={setMobile}
+          />
+        </Animated.View>
+      </View>
+
+      {/* Bottom Button */}
+      <Animated.View
+        style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+      >
+        <TouchableOpacity
+          style={styles.button}
+          onPress={handleContinue}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+        >
+          <Text style={styles.buttonText}>Continue</Text>
+        </TouchableOpacity>
+        <Text style={styles.footerText}>
+          By continuing, you agree to our{" "}
+          <Text style={{ color: theme.accent, fontWeight: "600" }}>
+            Terms & Privacy
+          </Text>
+        </Text>
+      </Animated.View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: theme.background, padding: 20 },
+  topSection: { flex: 1, justifyContent: "center" },
+  brand: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: theme.accent,
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: "800",
+    color: theme.text,
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 15,
+    color: theme.subText,
+    marginBottom: 30,
+    lineHeight: 22,
+  },
+  inputWrapper: { gap: 8 },
+  inputLabel: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: theme.text,
+  },
+  input: {
+    backgroundColor: "#fff",
+    borderRadius: 14,
+    padding: 14,
+    fontSize: 16,
+    color: theme.text,
+    borderWidth: 1,
+    borderColor: theme.outline,
+  },
+  bottomSection: {
+    marginBottom: 30,
+  },
+  button: {
+    backgroundColor: theme.primary,
+    paddingVertical: 18,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
+  footerText: {
+    textAlign: "center",
+    color: theme.subText,
+    fontSize: 12,
+    marginTop: 14,
+  },
+});

src/screens/OtpVarificationScreen.tsx

@@ -0,0 +1,259 @@
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import axios from "axios";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  Pressable,
+  Animated,
+  Platform,
+  NativeSyntheticEvent,
+  TextInputKeyPressEventData,
+  KeyboardAvoidingView,
+  StatusBar,
+  Alert,
+} from "react-native";
+import { RootStackParamList } from "../navigation/AppNavigator";
+import * as Keychain from "react-native-keychain";
+import { LOGIN_URL } from "../utils/ApiUrls";
+import { StackNavigationProp } from "@react-navigation/stack";
+
+const theme = {
+  primary: "#111111",
+  accent: "#FF7A00",
+  background: "#F9F9F9",
+  text: "#1A1A1A",
+  subText: "#6B6B6B",
+  outline: "#E5E5E5",
+};
+
+const CELL_COUNT = 6;
+type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;
+
+export default function OtpVerificationScreen() {
+  const [code, setCode] = useState<string[]>(Array(CELL_COUNT).fill(""));
+  const [timer, setTimer] = useState(30);
+  const [isResending, setIsResending] = useState(false);
+  const inputs = useRef<Array<TextInput | null>>([]);
+  const route = useRoute<OtpVerifyRouteProp>();
+  const { mobile } = route.params;
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
+  // animations
+  const fade = useRef(new Animated.Value(0)).current;
+  const slide = useRef(new Animated.Value(24)).current;
+  const ctaScale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
+      Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
+    ]).start();
+  }, [fade, slide]);
+
+  // Countdown
+  useEffect(() => {
+    if (timer <= 0) return;
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const saveToken = async (token: string) => {
+    try {
+      await Keychain.setGenericPassword("auth", token, {
+        accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
+      });
+      console.log("✅ Token saved securely");
+    } catch (error) {
+      console.error("❌ Error saving token:", error);
+    }
+  };
+
+  const onSubmit = async (otp: string, mobile: string) => {
+    try {
+      const payload = { mobile, otp };
+      const res = await axios.post(
+        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify",
+        payload,
+        { headers: { "Content-Type": "application/json", Accept: "*/*" } }
+      );
+
+      console.log("✅ OTP Verified:", res.data);
+      if (res.data.statusCode === 200) {
+        saveToken(res.data.data);
+        navigation.navigate('Home')
+
+      }
+    } catch (err: any) {
+      console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
+      Alert.alert("Error", "Failed to verify OTP. Please try again.");
+    }
+  };
+
+  const resendOtp = async () => {
+    try {
+      setIsResending(true);
+      setTimer(30); // reset timer
+
+      const res = await axios.get(
+        LOGIN_URL + mobile,
+        { headers: { "Content-Type": "application/json", Accept: "*/*" } }
+      );
+
+      console.log("📩 OTP Resent:", res.data);
+
+      Alert.alert("OTP Sent", "A new OTP has been sent to your mobile.");
+    } catch (err: any) {
+      console.error("❌ Resend OTP Error:", err?.response?.data || err.message);
+      Alert.alert("Error", "Failed to resend OTP. Try again later.");
+    } finally {
+      setIsResending(false);
+    }
+  };
+
+  const submitIfComplete = (arr: string[]) => {
+    const joined = arr.join("");
+    if (joined.length === CELL_COUNT) {
+      onSubmit(joined, mobile);
+    }
+  };
+
+  const updateIndex = (idx: number, val: string) => {
+    const v = val.replace(/[^0-9]/g, "");
+    const next = [...code];
+    next[idx] = v.slice(-1);
+    setCode(next);
+    if (v && idx < CELL_COUNT - 1) inputs.current[idx + 1]?.focus();
+    submitIfComplete(next);
+  };
+
+  const handleFirstCellChange = (val: string) => {
+    const digits = val.replace(/\D/g, "");
+    if (digits.length <= 1) {
+      updateIndex(0, digits);
+      return;
+    }
+    const next = Array(CELL_COUNT)
+      .fill("")
+      .map((_, i) => digits[i] ?? "");
+    setCode(next);
+    const firstEmpty = next.findIndex((c) => !c);
+    if (firstEmpty >= 0) inputs.current[firstEmpty]?.focus();
+    else inputs.current[CELL_COUNT - 1]?.blur();
+    submitIfComplete(next);
+  };
+
+  const handleKeyPress = (idx: number, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    if (e.nativeEvent.key === "Backspace" && !code[idx] && idx > 0) {
+      inputs.current[idx - 1]?.focus();
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
+    >
+      <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
+
+      {/* Top Section */}
+      <View style={styles.topSection}>
+        <Text style={styles.title}>Verify Code 🔒</Text>
+        <Text style={styles.subtitle}>
+          We’ve sent a 6-digit verification code to {mobile}.
+        </Text>
+
+        <Animated.View
+          style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}
+        >
+          {Array.from({ length: CELL_COUNT }).map((_, i) => (
+            <TextInput
+              key={`otp-${i}`}
+              ref={(r) => {
+                inputs.current[i] = r;
+              }}
+              style={[styles.cell, code[i] ? styles.cellFilled : null]}
+              keyboardType="number-pad"
+              maxLength={1}
+              value={code[i]}
+              onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
+              onKeyPress={(e) => handleKeyPress(i, e)}
+              placeholder="•"
+              placeholderTextColor="#BDBDBD"
+              textContentType="oneTimeCode"
+            />
+          ))}
+        </Animated.View>
+      </View>
+
+      {/* Bottom Section */}
+      <Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
+        <Pressable
+          onPressIn={() =>
+            Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()
+          }
+          onPressOut={() =>
+            Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()
+          }
+          onPress={() => onSubmit(code.join(""), mobile)}
+          style={styles.button}
+        >
+          <Text style={styles.buttonText}>Continue</Text>
+        </Pressable>
+
+        {timer > 0 ? (
+          <Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
+        ) : (
+          <Pressable onPress={resendOtp} disabled={isResending}>
+            <Text style={[styles.footerText, { color: theme.accent }]}>
+              {isResending ? "Resending..." : "Resend Code"}
+            </Text>
+          </Pressable>
+        )}
+      </Animated.View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: theme.background, padding: 20 },
+  topSection: { flex: 1, justifyContent: "center" },
+  title: { fontSize: 26, fontWeight: "800", color: theme.text, marginBottom: 8 },
+  subtitle: {
+    fontSize: 15,
+    color: theme.subText,
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  otpRow: { flexDirection: "row", justifyContent: "space-between" },
+  cell: {
+    width: 50,
+    height: 58,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: theme.outline,
+    backgroundColor: "#fff",
+    textAlign: "center",
+    fontSize: 20,
+    color: theme.text,
+  },
+  cellFilled: { borderColor: "#D1D1D1" },
+  bottomSection: { marginBottom: 30 },
+  button: {
+    backgroundColor: theme.primary,
+    paddingVertical: 18,
+    borderRadius: 14,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
+  footerText: {
+    textAlign: "center",
+    color: theme.subText,
+    fontSize: 13,
+    marginTop: 14,
+  },
+});

src/screens/SplashScreen.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { View, Text, StyleSheet, ActivityIndicator } 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>>();
+
+  useEffect(() => {
+    const checkLogin = async () => {
+      try {
+        const creds = await Keychain.getGenericPassword();
+        if (creds) {
+          console.log("🔑 Found token:", creds.password);
+          navigation.replace("Home"); // go to bottom tabs if logged in
+        } else {
+          navigation.replace("Login"); // go to login if not logged in
+        }
+      } catch (error) {
+        console.error("Error checking login:", error);
+        navigation.replace("Login");
+      }
+    };
+
+    setTimeout(checkLogin, 1500); // show splash for 1.5s
+  }, [navigation]);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Circle Collect</Text>
+      <ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
+    </View>
+  );
+};
+
+export default SplashScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#111111",
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "800",
+    color: "#FF7A00",
+    letterSpacing: 1,
+  },
+});

src/screens/profile/Profile.tsx

@@ -0,0 +1,364 @@
+import React, { useState, useEffect } from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  ScrollView,
+  Image,
+  TouchableOpacity,
+  Alert,
+  TextInput,
+  ActivityIndicator,
+} from "react-native";
+import * as Keychain from "react-native-keychain";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import { launchImageLibrary } from "react-native-image-picker";
+import { CustomButton, CustomInput } from "../../common/Custom";
+
+// ✅ Reusable Custom Input
+
+
+type UserProfile = {
+  id: string;
+  userId: number;
+  firstName: string | null;
+  lastName: string | null;
+  mobile: string | null;
+  gender: string | null;
+  email: string | null;
+  username: string | null;
+  address: string | null;
+  bankName: string | null;
+  branchCode: string | null;
+  filePath: string | null;
+  bankAccountNumber: string | null;
+  imageBlob: string | null;
+  organizerStatus?: string;
+  role?: string;
+};
+
+const Profile = () => {
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [fetching, setFetching] = useState(true);
+  const [editing, setEditing] = useState(false);
+
+  const fetchUserProfile = async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
+
+      setFetching(true);
+      const response = await fetch(
+        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/view",
+        {
+          method: "GET",
+          headers: {
+            Accept: "*/*",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        setUser(result.data);
+      } else {
+        Alert.alert("Error", "Failed to fetch user profile");
+      }
+    } catch (error) {
+      console.error("❌ Error fetching profile:", error);
+      Alert.alert("Error", "Could not connect to server");
+    } finally {
+      setFetching(false);
+    }
+  };
+
+  const updateProfile = async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
+
+      const response = await fetch(
+        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/update",
+        {
+          method: "PUT",
+          headers: {
+            Accept: "*/*",
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            address: user?.address || null,
+            email: user?.email || null,
+            firstName: user?.firstName || null,
+            gender: user?.gender || null,
+            lastName: user?.lastName || null,
+            username: user?.username || null,
+          }),
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        Alert.alert("Success", "Profile updated successfully");
+        setEditing(false);
+        fetchUserProfile(); // reload updated data
+      } else {
+        Alert.alert("Error", "Failed to update profile");
+      }
+    } catch (error) {
+      console.error("❌ Error updating profile:", error);
+      Alert.alert("Error", "Could not update profile");
+    }
+  };
+
+  const pickImage = () => {
+    launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
+      if (response.didCancel) return;
+      if (response.errorCode) {
+        Alert.alert("Error", response.errorMessage || "Something went wrong");
+      } else if (response.assets && response.assets.length > 0) {
+        const selectedImage = response.assets[0];
+        setUser((prev) =>
+          prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
+        );
+      }
+    });
+  };
+
+  const handleUpdateImage = async () => {
+    try {
+      const credentials = await Keychain.getGenericPassword();
+      if (!credentials) {
+        Alert.alert("Error", "You are not logged in");
+        return;
+      }
+      const token = credentials.password;
+
+      if (!user?.filePath) {
+        Alert.alert("Error", "Please select an image first");
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("file", {
+        uri: user.filePath,
+        type: "image/jpeg",
+        name: "profile.jpg",
+      } as any);
+
+      const response = await fetch(
+        "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/update/userImg",
+        {
+          method: "PUT",
+          headers: {
+            Accept: "*/*",
+            Authorization: `Bearer ${token}`,
+          },
+          body: formData,
+        }
+      );
+
+      const result = await response.json();
+      if (result.status === "success") {
+        Alert.alert("Success", "Profile image updated successfully");
+        fetchUserProfile();
+      } else {
+        Alert.alert("Error", "Failed to update profile image");
+      }
+    } catch (error) {
+      console.error("❌ Error updating profile image:", error);
+      Alert.alert("Error", "Could not update profile image");
+    }
+  };
+
+  useEffect(() => {
+    fetchUserProfile();
+  }, []);
+
+  const getProfileImage = () => {
+    if (user?.filePath) return user.filePath;
+    if (user?.imageBlob) return `data:image/jpeg;base64,${user.imageBlob}`;
+    return "https://randomuser.me/api/portraits/men/1.jpg";
+  };
+
+  if (fetching || !user) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#007AFF" />
+        <Text style={styles.loadingText}>Loading profile...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>User Profile</Text>
+        <TouchableOpacity onPress={fetchUserProfile}>
+          <Ionicons name="refresh" size={24} color="#007AFF" />
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView style={styles.container}>
+        <View style={styles.profileCard}>
+          <View style={styles.profileHeader}>
+            <Image source={{ uri: getProfileImage() }} style={styles.avatar} />
+            <TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
+              <Ionicons name="camera" size={18} color="white" />
+            </TouchableOpacity>
+          </View>
+
+          <CustomButton title="Update Image" onPress={handleUpdateImage} />
+
+          {!editing ? (
+            <>
+              <Text style={styles.detail}>👤 {user.firstName} {user.lastName}</Text>
+              <Text style={styles.detail}>📧 {user.email}</Text>
+              <Text style={styles.detail}>📱 {user.mobile}</Text>
+              <Text style={styles.detail}>🔑 {user.username}</Text>
+              <Text style={styles.detail}>🏠 {user.address}</Text>
+              <Text style={styles.detail}>⚧ {user.gender}</Text>
+              <Text style={styles.detail}>🛡 Role: {user.role}</Text>
+
+              <CustomButton title="Edit Profile" onPress={() => setEditing(true)} />
+            </>
+          ) : (
+            <>
+              <CustomInput
+                label="First Name"
+                placeholder="Enter first name"
+                value={user.firstName ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, firstName: text })}
+              />
+              <CustomInput
+                label="Last Name"
+                placeholder="Enter last name"
+                value={user.lastName ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, lastName: text })}
+              />
+              <CustomInput
+                label="Email"
+                placeholder="Enter email"
+                value={user.email ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, email: text })}
+              />
+              <CustomInput
+                label="Username"
+                placeholder="Enter username"
+                value={user.username ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, username: text })}
+              />
+              <CustomInput
+                label="Address"
+                placeholder="Enter address"
+                value={user.address ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, address: text })}
+              />
+              <CustomInput
+                label="Gender"
+                placeholder="Enter gender"
+                value={user.gender ?? ""}
+                onChangeText={(text: any) => setUser({ ...user, gender: text })}
+              />
+
+              <CustomButton title="Save Changes" onPress={updateProfile} />
+              <CustomButton
+                title="Cancel"
+                type="danger"
+                onPress={() => setEditing(false)}
+              />
+            </>
+          )}
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#f5f7fb" },
+  loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
+  loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 16,
+    paddingTop: 40,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderColor: "#eee",
+  },
+  headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
+  profileCard: {
+    borderRadius: 16,
+    margin: 16,
+    backgroundColor: "#fff",
+    padding: 20,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  profileHeader: { alignItems: "center", marginBottom: 16 },
+  avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
+  cameraIcon: {
+    position: "absolute",
+    right: 110,
+    bottom: 10,
+    backgroundColor: "#007AFF",
+    borderRadius: 15,
+    width: 32,
+    height: 32,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  detail: {
+    fontSize: 16,
+    marginBottom: 10,
+    color: "#444",
+    paddingLeft: 4,
+  },
+  inputContainer: { marginBottom: 12 },
+  inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 10,
+    padding: 12,
+    backgroundColor: "#fdfdfd",
+    color: "#000",
+    fontSize: 15,
+  },
+  button: {
+    backgroundColor: "#007AFF",
+    paddingVertical: 12,
+    borderRadius: 12,
+    alignItems: "center",
+    marginVertical: 6,
+    shadowColor: "#007AFF",
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  buttonSecondary: {
+    backgroundColor: "#e5e5ea",
+  },
+  buttonDanger: {
+    backgroundColor: "#ff3b30",
+  },
+  buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
+  buttonTextSecondary: { color: "#333" },
+  buttonTextDanger: { color: "#fff" },
+});
+
+export default Profile;

src/utils/ApiUrls.tsx

@@ -0,0 +1,3 @@
+export const base_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
+export const LOGIN_URL = `${base_URL}user/generate/otp?mobile=`
+export const VARIFY_OTP_URL = `${base_URL}user/otp/verify`