login complete

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,10 +10,21 @@
     "test": "jest"
   },
   "dependencies": {
+    "@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/new-app-screen": "0.81.1",
+    "react-native-keychain": "^10.0.0",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-safe-area-context": "^5.6.1",
+    "react-native-screens": "^4.16.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

src/navigation/AppNavigator.tsx

@@ -0,0 +1,51 @@
+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";
+
+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>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <Text>Profile Screen</Text>
+    </View>
+  );
+}
+
+export default function AppNavigator() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Splash">
+        <Stack.Screen name="Splash" component={SplashScreen} />
+        <Stack.Screen name="HomeTabs" 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={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

src/navigation/BottomTabs.tsx

@@ -0,0 +1,58 @@
+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';
+
+const Tab = createBottomTabNavigator();
+
+// Dummy screens for now
+function HomeScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text>🏠 Home</Text>
+    </View>
+  );
+}
+
+function ProfileScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <Text>👤 Profile</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: string = "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={ProfileScreen} />
+      <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,260 @@
+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,55 @@
+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("HomeTabs"); // 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/utils/ApiUrls.tsx

@@ -0,0 +1,2 @@
+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"