@onairos/react-native 3.1.16 → 3.1.17

package/src/components/SignInMatchAnimation.tsx

@@ -1,225 +1,225 @@
-import React, { useState, useEffect } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Modal,
-  ActivityIndicator,
-  Animated,
-  Dimensions,
-  TouchableOpacity
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-
-interface SignInMatchAnimationProps {
-  email: string;
-  visible: boolean;
-  onComplete: () => void;
-}
-
-const { width, height } = Dimensions.get('window');
-
-const SignInMatchAnimation: React.FC<SignInMatchAnimationProps> = ({ 
-  email, 
-  visible, 
-  onComplete 
-}) => {
-  const [step, setStep] = useState<'searching' | 'found' | 'complete'>('searching');
-  const [matchCount, setMatchCount] = useState(0);
-  const fadeAnim = useState(new Animated.Value(0))[0];
-  const scaleAnim = useState(new Animated.Value(0.9))[0];
-
-  useEffect(() => {
-    if (visible) {
-      // Start with fade in animation
-      Animated.parallel([
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true
-        }),
-        Animated.timing(scaleAnim, {
-          toValue: 1,
-          duration: 600,
-          useNativeDriver: true
-        })
-      ]).start();
-
-      // Simulate search process
-      setTimeout(() => {
-        // Generate random match count (3-8)
-        const randomMatchCount = Math.floor(Math.random() * 6) + 3;
-        setMatchCount(randomMatchCount);
-        setStep('found');
-        
-        // Auto-proceed to complete after 3 seconds
-        setTimeout(() => {
-          setStep('complete');
-        }, 3000);
-      }, 2500);
-    }
-  }, [visible, fadeAnim, scaleAnim]);
-
-  const handleContinue = () => {
-    // Fade out animation before calling onComplete
-    Animated.parallel([
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 400,
-        useNativeDriver: true
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 0.9,
-        duration: 400,
-        useNativeDriver: true
-      })
-    ]).start(() => {
-      onComplete();
-    });
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Modal
-      visible={visible}
-      transparent
-      animationType="none"
-    >
-      <View style={styles.container}>
-        <Animated.View 
-          style={[
-            styles.content,
-            { 
-              opacity: fadeAnim,
-              transform: [{ scale: scaleAnim }]
-            }
-          ]}
-        >
-          {step === 'searching' && (
-            <>
-              <Text style={styles.title}>Finding Your Matches</Text>
-              <ActivityIndicator size="large" color="#E9C46A" style={styles.loader} />
-              <Text style={styles.message}>
-                Searching for potential connections based on your profile...
-              </Text>
-            </>
-          )}
-
-          {step === 'found' && (
-            <>
-              <Text style={styles.title}>Matches Found!</Text>
-              <View style={styles.matchCircle}>
-                <Text style={styles.matchCount}>{matchCount}</Text>
-              </View>
-              <Text style={styles.message}>
-                We've found {matchCount} potential connections for you!
-              </Text>
-              <Text style={styles.subMessage}>
-                Complete your profile to see who they are.
-              </Text>
-            </>
-          )}
-
-          {step === 'complete' && (
-            <>
-              <Text style={styles.title}>Welcome to Enoch!</Text>
-              <Text style={styles.message}>
-                We'll send match notifications to {email.split('@')[0]}@...
-              </Text>
-              <TouchableOpacity
-                style={styles.button}
-                onPress={handleContinue}
-              >
-                <LinearGradient
-                  colors={['#f5e7c1', '#E9C46A', '#DDB957']}
-                  start={{x: 0, y: 0}}
-                  end={{x: 1, y: 0}}
-                  style={styles.gradientButton}
-                >
-                  <Text style={styles.buttonText}>Continue</Text>
-                </LinearGradient>
-              </TouchableOpacity>
-            </>
-          )}
-        </Animated.View>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  content: {
-    width: width * 0.85,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    padding: 24,
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 10,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: '#333',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  loader: {
-    marginVertical: 24,
-  },
-  message: {
-    fontSize: 18,
-    color: '#555',
-    textAlign: 'center',
-    marginBottom: 16,
-    lineHeight: 24,
-  },
-  subMessage: {
-    fontSize: 16,
-    color: '#777',
-    textAlign: 'center',
-    marginTop: 8,
-  },
-  matchCircle: {
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    backgroundColor: '#E9C46A',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: 20,
-  },
-  matchCount: {
-    fontSize: 40,
-    fontWeight: 'bold',
-    color: '#FFFFFF',
-  },
-  button: {
-    width: '100%',
-    marginTop: 24,
-    borderRadius: 8,
-    overflow: 'hidden',
-  },
-  gradientButton: {
-    paddingVertical: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  buttonText: {
-    color: '#333',
-    fontSize: 16,
-    fontWeight: '600',
-  }
-});
-
-export default SignInMatchAnimation;
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Modal,
+  ActivityIndicator,
+  Animated,
+  Dimensions,
+  TouchableOpacity
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+interface SignInMatchAnimationProps {
+  email: string;
+  visible: boolean;
+  onComplete: () => void;
+}
+
+const { width, height } = Dimensions.get('window');
+
+const SignInMatchAnimation: React.FC<SignInMatchAnimationProps> = ({ 
+  email, 
+  visible, 
+  onComplete 
+}) => {
+  const [step, setStep] = useState<'searching' | 'found' | 'complete'>('searching');
+  const [matchCount, setMatchCount] = useState(0);
+  const fadeAnim = useState(new Animated.Value(0))[0];
+  const scaleAnim = useState(new Animated.Value(0.9))[0];
+
+  useEffect(() => {
+    if (visible) {
+      // Start with fade in animation
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true
+        }),
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true
+        })
+      ]).start();
+
+      // Simulate search process
+      setTimeout(() => {
+        // Generate random match count (3-8)
+        const randomMatchCount = Math.floor(Math.random() * 6) + 3;
+        setMatchCount(randomMatchCount);
+        setStep('found');
+        
+        // Auto-proceed to complete after 3 seconds
+        setTimeout(() => {
+          setStep('complete');
+        }, 3000);
+      }, 2500);
+    }
+  }, [visible, fadeAnim, scaleAnim]);
+
+  const handleContinue = () => {
+    // Fade out animation before calling onComplete
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 400,
+        useNativeDriver: true
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 0.9,
+        duration: 400,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      onComplete();
+    });
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+    >
+      <View style={styles.container}>
+        <Animated.View 
+          style={[
+            styles.content,
+            { 
+              opacity: fadeAnim,
+              transform: [{ scale: scaleAnim }]
+            }
+          ]}
+        >
+          {step === 'searching' && (
+            <>
+              <Text style={styles.title}>Finding Your Matches</Text>
+              <ActivityIndicator size="large" color="#E9C46A" style={styles.loader} />
+              <Text style={styles.message}>
+                Searching for potential connections based on your profile...
+              </Text>
+            </>
+          )}
+
+          {step === 'found' && (
+            <>
+              <Text style={styles.title}>Matches Found!</Text>
+              <View style={styles.matchCircle}>
+                <Text style={styles.matchCount}>{matchCount}</Text>
+              </View>
+              <Text style={styles.message}>
+                We've found {matchCount} potential connections for you!
+              </Text>
+              <Text style={styles.subMessage}>
+                Complete your profile to see who they are.
+              </Text>
+            </>
+          )}
+
+          {step === 'complete' && (
+            <>
+              <Text style={styles.title}>Welcome to Enoch!</Text>
+              <Text style={styles.message}>
+                We'll send match notifications to {email.split('@')[0]}@...
+              </Text>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={handleContinue}
+              >
+                <LinearGradient
+                  colors={['#f5e7c1', '#E9C46A', '#DDB957']}
+                  start={{x: 0, y: 0}}
+                  end={{x: 1, y: 0}}
+                  style={styles.gradientButton}
+                >
+                  <Text style={styles.buttonText}>Continue</Text>
+                </LinearGradient>
+              </TouchableOpacity>
+            </>
+          )}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    width: width * 0.85,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    padding: 24,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 10,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 20,
+    textAlign: 'center',
+  },
+  loader: {
+    marginVertical: 24,
+  },
+  message: {
+    fontSize: 18,
+    color: '#555',
+    textAlign: 'center',
+    marginBottom: 16,
+    lineHeight: 24,
+  },
+  subMessage: {
+    fontSize: 16,
+    color: '#777',
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  matchCircle: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: '#E9C46A',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 20,
+  },
+  matchCount: {
+    fontSize: 40,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+  },
+  button: {
+    width: '100%',
+    marginTop: 24,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  gradientButton: {
+    paddingVertical: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    color: '#333',
+    fontSize: 16,
+    fontWeight: '600',
+  }
+});
+
+export default SignInMatchAnimation;