themed style

src/screens/LoginScreen.tsx

@@ -19,7 +19,6 @@ import type { StackNavigationProp } from "@react-navigation/stack";
 import { RootStackParamList } from "../navigation/AppNavigator";
 import { CustomButton, CustomInput } from "../components/common/Custom";
 import colors from "../components/colors";
-import AnimatedText from "../components/common/AnimatedText";
 
 const theme = {
   primary: "#111111",
@@ -50,91 +49,90 @@ export default function LoginScreen() {
     ]).start();
   }, []);
 
- const handleContinue = async () => {
-  if (mobile.length === 10) {
-    setLoading(true);
-    try {
-      const res = await axios.get(LOGIN_URL, {
-        params: { mobile },
-      });
+  const handleContinue = async () => {
+    if (mobile.length === 10) {
+      setLoading(true);
+      try {
+        const res = await axios.get(LOGIN_URL, {
+          params: { mobile },
+        });
 
-      console.log("OTP sent response:", res.data);
+        console.log("OTP sent response:", res.data);
 
-      if (res.data.statusCode === 200) {
-        navigation.navigate("OtpVarify", { mobile });
-      } else {
-        Alert.alert("Error", res.data.message || "Failed to send OTP");
+        if (res.data.statusCode === 200) {
+          navigation.navigate("OtpVarify", { mobile });
+        } else {
+          Alert.alert("Error", res.data.message || "Failed to send OTP");
+        }
+      } catch (error: any) {
+        console.error("Login error:", error);
+
+        if (axios.isAxiosError(error)) {
+          console.log("Error message:", error.message);
+          console.log("Error response:", error.response?.data);
+          console.log("Error status:", error.response?.status);
+          console.log("Error headers:", error.response?.headers);
+        } else {
+          console.log("Unexpected error:", error);
+        }
+
+        Alert.alert("Error", "Failed to send OTP. Please try again.");
+      } finally {
+        setLoading(false);
       }
-    } catch (error: any) {
-      console.error("Login error:", error);
-
-      if (axios.isAxiosError(error)) {
-        console.log("Error message:", error.message);
-        console.log("Error response:", error.response?.data);
-        console.log("Error status:", error.response?.status);
-        console.log("Error headers:", error.response?.headers);
-      } else {
-        console.log("Unexpected error:", error);
-      }
-
-      Alert.alert("Error", "Failed to send OTP. Please try again.");
-    } finally {
-      setLoading(false);
+    } else {
+      Alert.alert("Please enter a valid 10-digit mobile number");
     }
-  } else {
-    Alert.alert("Please enter a valid 10-digit mobile number");
-  }
-};
+  };
 
-return (
-  <KeyboardAvoidingView
-    style={styles.container}
-    behavior={Platform.OS === "ios" ? "padding" : undefined}
-  >
-    <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
-
-    {/* Top content */}
-    <View style={styles.topSection}>
-        {/* <AnimatedText text="Welcome to Reanimated" style={styles.subtitle} delay={200} /> */}
-      <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 }] },
-        ]}
-      >
-        <CustomInput
-          label="Mobile Number"
-          placeholder="Enter Mobile Number"
-          value={mobile}
-          onChangeText={setMobile}
-          keyboardType="phone-pad"
-          maxLength={10}
-          icon="call-outline"
-        />
-      </Animated.View>
-    </View>
-
-    {/* Bottom Button */}
-    <Animated.View
-      style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : undefined}
     >
-      <CustomButton title={loading ? "Loading..." : "Continue"} onPress={handleContinue} icon="arrow-forward" />
+      <StatusBar barStyle="dark-content" backgroundColor={theme.background} />
 
-      <Text style={styles.footerText}>
-        By continuing, you agree to our{" "}
-        <Text style={{ color: theme.accent, fontWeight: "600" }}>
-          Terms & Privacy
+      {/* 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>
-      </Text>
-    </Animated.View>
-  </KeyboardAvoidingView>
-);
+
+        <Animated.View
+          style={[
+            styles.inputWrapper,
+            { opacity: fade, transform: [{ translateY: slide }] },
+          ]}
+        >
+          <CustomInput
+            label="Mobile Number"
+            placeholder="Enter Mobile Number"
+            value={mobile}
+            onChangeText={setMobile}
+            keyboardType="phone-pad"
+            maxLength={10}
+            icon="call-outline"
+          />
+        </Animated.View>
+      </View>
+
+      {/* Bottom Button */}
+      <Animated.View
+        style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
+      >
+        <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" }}>
+            Terms & Privacy
+          </Text>
+        </Text>
+      </Animated.View>
+    </KeyboardAvoidingView>
+  );
 }
 
 const styles = StyleSheet.create({