@onairos/react-native 3.1.12 → 3.1.14

package/src/components/PlatformToggle.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Switch,
+  Platform,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+
+interface PlatformToggleProps {
+  platform: {
+    id: string;
+    name: string;
+    icon: any; // require() image
+    description: string;
+  };
+  isEnabled: boolean;
+  onToggle: (platformId: string, enabled: boolean) => void;
+  compact?: boolean;
+  isLast?: boolean;
+  fullWidth?: boolean;
+  customIconSize?: number;
+  onLongPress?: () => void;
+  onPressOut?: () => void;
+}
+
+const PlatformToggle: React.FC<PlatformToggleProps> = ({
+  platform,
+  isEnabled,
+  onToggle,
+  compact = false,
+  isLast = false,
+  fullWidth = false,
+  customIconSize,
+  onLongPress,
+  onPressOut,
+}) => {
+  const handleToggle = () => {
+    onToggle(platform.id, !isEnabled);
+  };
+
+  const containerStyle = fullWidth ? styles.fullWidthContainer : 
+                        compact ? styles.compactContainer : styles.container;
+
+  return (
+    <TouchableOpacity
+      style={[
+        containerStyle,
+        !isLast && compact && styles.borderBottom,
+      ]}
+      onLongPress={onLongPress}
+      onPressOut={onPressOut}
+      activeOpacity={onLongPress ? 0.7 : 1.0}
+      disabled={!onLongPress}
+    >
+      {/* Top row: Icon + Name + Toggle */}
+      <View style={styles.topRow}>
+        <View style={styles.leftContent}>
+          <Image 
+            source={platform.icon} 
+            style={customIconSize ? 
+              { 
+                width: customIconSize, 
+                height: customIconSize, 
+                marginRight: 12 - (customIconSize - 28) // Reduce margin more to align text properly
+              } :
+              (fullWidth ? styles.compactIcon : (compact ? styles.compactIcon : styles.icon))
+            } 
+            resizeMode="contain" 
+          />
+          <View style={styles.textContent}>
+            <Text style={fullWidth ? styles.compactPlatformName : (compact ? styles.compactPlatformName : styles.platformName)}>{platform.name}</Text>
+          </View>
+        </View>
+        
+        <Switch
+          value={isEnabled}
+          onValueChange={handleToggle}
+          trackColor={{ 
+            false: '#E5E5E5', 
+            true: '#4CD964' // Green when enabled
+          }}
+          thumbColor={Platform.OS === 'ios' ? undefined : (isEnabled ? '#FFFFFF' : '#FFFFFF')}
+          ios_backgroundColor="#E5E5E5"
+          style={compact ? styles.compactSwitch : undefined}
+        />
+      </View>
+      
+      {/* Bottom row: Description in rounded box */}
+      {fullWidth && (
+        <View style={styles.descriptionBox}>
+          <Text style={styles.fullWidthDescription}>{platform.description}</Text>
+        </View>
+      )}
+      
+      {/* Show description inline for non-fullWidth modes */}
+      {!fullWidth && (
+        <Text style={compact ? styles.compactDescription : styles.description}>{platform.description}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.surface,
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  
+  compactContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.surface,
+  },
+  
+  fullWidthContainer: {
+    flexDirection: 'column', // Changed to column to stack rows
+    paddingVertical: 8,   // Reduced from 16 to bring platforms closer
+    paddingHorizontal: 2,  // Much closer to edges
+    backgroundColor: COLORS.surface,
+    marginBottom: 4,      // Reduced from 12 to bring platforms closer
+    marginHorizontal: 0, // Ensure it spans full width
+  },
+  
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4, // Reduced space between icon row and description box
+  },
+  
+  descriptionBox: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 8,
+    paddingVertical: 8,   // Reduced from 10 to make description box smaller
+    paddingHorizontal: 4,  // Much closer to edges
+    marginTop: 2,         // Reduced from 4 to bring closer to icon row
+  },
+  
+  borderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  
+  leftContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  
+  icon: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
+  },
+  
+  compactIcon: {
+    width: 28,
+    height: 28,
+    marginRight: 12,
+  },
+  
+  textContent: {
+    flex: 1,
+  },
+  
+  platformName: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 2,
+  },
+  
+  compactPlatformName: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 2,
+  },
+  
+  description: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 20,
+  },
+  
+  compactDescription: {
+    fontSize: 12,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 16,
+  },
+  
+  fullWidthDescription: {
+    fontSize: 13,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 18,
+  },
+  
+  compactSwitch: {
+    transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
+  },
+});
+
+export default PlatformToggle;

package/src/components/PrimaryButton.tsx

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+} from 'react-native';
+import { Svg, Defs, RadialGradient, Stop, Rect } from 'react-native-svg';
+import LinearGradient from 'react-native-linear-gradient';
+import { COLORS } from '../theme';
+
+interface IconCircleProps {
+  size?: number;
+  children?: React.ReactNode;
+}
+
+const IconCircle: React.FC<IconCircleProps> = ({ 
+  size = 40, 
+  children 
+}) => {
+  return (
+    <View style={[styles.iconCircle, { width: size, height: size, borderRadius: size / 2 }]}>
+      {/* IconCircle has its own background - the only child that should */}
+      <LinearGradient
+        colors={[COLORS.iconCircleGradientStart, COLORS.iconCircleGradientEnd]}
+        style={[StyleSheet.absoluteFill, { borderRadius: size / 2 }]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+      
+      {/* Content */}
+      <View style={styles.iconContent}>
+        {children || (
+          <Text style={styles.arrowText}>→</Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+interface PrimaryButtonProps {
+  label?: string;
+  onPress: () => void;
+  iconRight?: React.ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  testID?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  label = "Get Started",
+  onPress,
+  iconRight,
+  loading = false,
+  disabled = false,
+  testID,
+  style,
+  textStyle,
+}) => {
+  const [pressed, setPressed] = useState(false);
+
+  const handlePressIn = () => setPressed(true);
+  const handlePressOut = () => setPressed(false);
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.outerPill,
+        !disabled && styles.outerShadow,
+        disabled && styles.disabled,
+        style
+      ]}
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      disabled={disabled || loading}
+      activeOpacity={1}
+      testID={testID}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+    >
+      {/* ONLY ONE gradient - no overlays */}
+      <LinearGradient
+        colors={[COLORS.btnGradStart, COLORS.btnGradEnd]}
+        style={styles.baseGradient}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      />
+
+      {/* Simple pressed state */}
+      {pressed && (
+        <View style={styles.pressedOverlay} />
+      )}
+
+      {/* Centered text on top */}
+      <View style={styles.textContainer}>
+        {loading ? (
+          <ActivityIndicator color={COLORS.btnLabel} size="small" />
+        ) : (
+          <Text style={[styles.label, textStyle]}>{label}</Text>
+        )}
+      </View>
+
+      {/* Icon in fixed position on right */}
+      <View style={styles.iconPosition}>
+        {!loading && (iconRight || <IconCircle />)}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Outer pill container - owns all backgrounds, border, shadow
+  outerPill: {
+    height: 48,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: COLORS.btnBorder, // ≈20% black
+    overflow: 'hidden',
+    width: '100%',
+    position: 'relative',
+  },
+  
+  outerShadow: {
+    // Outer shadow: 20px 30px 40px rgba(0,0,0,0.10)
+    shadowColor: '#000000',
+    shadowOffset: { width: 20, height: 30 },
+    shadowOpacity: 0.10,
+    shadowRadius: 40,
+    elevation: 8,
+  },
+  
+  disabled: {
+    opacity: 0.65,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  
+  // Single base gradient - fills entire button
+  baseGradient: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 100,
+  },
+  
+  pressedOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.1)',
+    borderRadius: 100,
+  },
+  
+  // Absolutely centered text container
+  textContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  
+  // Fixed icon position on right
+  iconPosition: {
+    position: 'absolute',
+    right: 4,
+    top: 4,
+    bottom: 4,
+    width: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  
+  label: {
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    fontSize: 16,
+    color: COLORS.btnLabel,
+    textAlign: 'center',
+    backgroundColor: 'transparent', // Must be transparent
+  },
+  
+  // IconCircle styles - ONLY child with background
+  iconCircle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: 'rgba(0,0,0,0.25)',
+  },
+  
+  iconContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  
+  arrowText: {
+    fontSize: 20,
+    color: COLORS.btnLabel,
+    fontWeight: '600',
+    opacity: 0.95,
+    backgroundColor: 'transparent',
+  },
+});
+
+export { IconCircle };
+export { PrimaryButton };
+export default PrimaryButton;

package/src/components/SignInMatchAnimation.tsx

@@ -0,0 +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;