Requeste api implelented

src/screens/LoginScreen.tsx

@@ -10,24 +10,29 @@ import {
   Platform,
   Animated,
   StatusBar,
+  ActivityIndicator,
 } 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 type { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
+import { CustomButton, CustomInput } from "../components/common/Custom";
+import colors from "../components/colors";
 
 const theme = {
   primary: "#111111",
-  accent: "#FF7A00",
+  accent: colors.primary,
   background: "#F9F9F9",
+  surface: "#FFFFFF",
   text: "#1A1A1A",
   subText: "#6B6B6B",
   outline: "#E5E5E5",
+  error: "#E53935",
+  success: "#2E7D32",
 };
 
 export default function LoginScreen() {
-  
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const [mobile, setMobile] = useState("");
   const [loading, setLoading] = useState(false);
@@ -48,16 +53,14 @@ export default function LoginScreen() {
     if (mobile.length === 10) {
       setLoading(true);
       try {
-        console.log("Mobile submitted:", mobile);
-        const res = await axios.get(LOGIN_URL + mobile)
-        console.log('loginres', res.data)
+        const res = await axios.get(LOGIN_URL + mobile);
         if (res.data.statusCode === 200) {
-          navigation.navigate('OtpVarify', { mobile: mobile })
+          navigation.navigate("OtpVarify", { mobile });
         }
       } catch (error) {
         console.error("Login error:", error);
         Alert.alert("Error", "Failed to send OTP. Please try again.");
-      }finally {
+      } finally {
         setLoading(false);
       }
     } else {
@@ -102,15 +105,14 @@ export default function LoginScreen() {
             { opacity: fade, transform: [{ translateY: slide }] },
           ]}
         >
-          <Text style={styles.inputLabel}>Mobile Number</Text>
-          <TextInput
-            style={styles.input}
+          <CustomInput
+            label="Mobile Number"
             placeholder="Enter Mobile Number"
-            placeholderTextColor={theme.subText}
-            keyboardType="phone-pad"
-            maxLength={10}
             value={mobile}
             onChangeText={setMobile}
+            keyboardType="phone-pad"
+            maxLength={10}
+            icon="call-outline"
           />
         </Animated.View>
       </View>
@@ -119,14 +121,8 @@ export default function LoginScreen() {
       <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>
+        <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+
         <Text style={styles.footerText}>
           By continuing, you agree to our{" "}
           <Text style={{ color: theme.accent, fontWeight: "600" }}>
@@ -142,7 +138,7 @@ const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: theme.background, padding: 20 },
   topSection: { flex: 1, justifyContent: "center" },
   brand: {
-    fontSize: 20,
+    fontSize: 30,
     fontWeight: "700",
     color: theme.accent,
     marginBottom: 24,
@@ -166,7 +162,7 @@ const styles = StyleSheet.create({
     color: theme.text,
   },
   input: {
-    backgroundColor: "#fff",
+    backgroundColor: theme.surface,
     borderRadius: 14,
     padding: 14,
     fontSize: 16,