common component

src/screens/SplashScreen.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect } from "react";
-import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
+import React, { useEffect, useRef } from "react";
+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,7 +17,7 @@ const SplashScreen = () => {
           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
+          navigation.replace("Login");
         }
       } catch (error) {
         console.error("Error checking login:", error);
@@ -24,12 +25,22 @@ const SplashScreen = () => {
       }
     };
 
-    setTimeout(checkLogin, 1500); // show splash for 1.5s
-  }, [navigation]);
+    // Start fade out animation
+    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>
   );
@@ -42,7 +53,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#111111",
+    backgroundColor: "#FFFFFF", // white background
   },
   title: {
     fontSize: 28,