@squad-sports/react-native 1.3.1

package/src/realtime/PushNotificationHandler.ts

@@ -0,0 +1,125 @@
+import { EventProcessor } from './EventProcessor';
+
+export type NotificationType =
+  | 'message'
+  | 'squad_invite'
+  | 'incoming_call'
+  | 'poll'
+  | 'freestyle'
+  | 'reaction';
+
+export interface PushNotificationPayload {
+  type: NotificationType;
+  title?: string;
+  body?: string;
+  data?: Record<string, string>;
+}
+
+export interface NotificationRouteAction {
+  screen: string;
+  params?: Record<string, string>;
+}
+
+/**
+ * Handles incoming push notifications and routes them to the correct screen.
+ * Integrators should call `handleNotification()` from their notification handler.
+ *
+ * Usage:
+ * ```ts
+ * import { PushNotificationHandler } from '@squad-sports/react-native';
+ *
+ * // In your app's notification handler:
+ * Notifications.addNotificationResponseReceivedListener(response => {
+ *   const data = response.notification.request.content.data;
+ *   const action = PushNotificationHandler.handleNotification(data);
+ *   if (action) {
+ *     navigation.navigate(action.screen, action.params);
+ *   }
+ * });
+ * ```
+ */
+export class PushNotificationHandler {
+  /**
+   * Process a push notification payload and return the navigation action.
+   */
+  static handleNotification(
+    payload: PushNotificationPayload | Record<string, string>,
+  ): NotificationRouteAction | null {
+    const type = (payload as any).type as NotificationType;
+    const data = (payload as any).data ?? payload;
+
+    switch (type) {
+      case 'message':
+        return {
+          screen: 'Messaging',
+          params: { connectionId: data.connectionId ?? data.connection_id },
+        };
+
+      case 'squad_invite':
+        return {
+          screen: 'Home',
+        };
+
+      case 'incoming_call': {
+        // Emit call event to EventProcessor for the IncomingCallOverlay
+        EventProcessor.shared.emitter.emit('incoming_call', {
+          callerId: data.callerId ?? data.caller_id,
+          callerName: data.callerName ?? data.caller_name,
+          connectionId: data.connectionId ?? data.connection_id,
+          title: data.title,
+        });
+        return null; // IncomingCallOverlay handles this
+      }
+
+      case 'poll':
+        return {
+          screen: 'PollResponse',
+          params: { pollId: data.pollId ?? data.poll_id },
+        };
+
+      case 'freestyle':
+        return {
+          screen: 'Home',
+        };
+
+      case 'reaction':
+        if (data.connectionId || data.connection_id) {
+          return {
+            screen: 'Messaging',
+            params: { connectionId: data.connectionId ?? data.connection_id },
+          };
+        }
+        return { screen: 'Home' };
+
+      default:
+        return null;
+    }
+  }
+
+  /**
+   * Register for push notifications.
+   * Call this after authentication.
+   */
+  static async registerForPushNotifications(): Promise<string | null> {
+    try {
+      const Notifications = await import('expo-notifications');
+
+      const { status: existingStatus } = await Notifications.getPermissionsAsync();
+      let finalStatus = existingStatus;
+
+      if (existingStatus !== 'granted') {
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+      }
+
+      if (finalStatus !== 'granted') {
+        return null;
+      }
+
+      const tokenData = await Notifications.getExpoPushTokenAsync();
+      return tokenData.data;
+    } catch {
+      return null;
+    }
+  }
+}

package/src/realtime/useRealtimeSync.ts

@@ -0,0 +1,84 @@
+import { useEffect, useState, useCallback } from 'react';
+import { EventProcessor, type ConnectionQuality } from './EventProcessor';
+import { useApiClient } from '../SquadProvider';
+
+/**
+ * Hook that manages the real-time SSE connection lifecycle.
+ * Wire this into your root provider to enable live updates.
+ */
+export function useRealtimeSync() {
+  const apiClient = useApiClient();
+  const [quality, setQuality] = useState<ConnectionQuality>('disconnected');
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    const processor = EventProcessor.shared;
+    processor.setApiClient(apiClient);
+    processor.setShouldAllowEvents(true);
+
+    // Listen for quality changes
+    const onQuality = (q: ConnectionQuality) => {
+      setQuality(q);
+      setIsConnected(q === 'good');
+    };
+    processor.emitter.on('connection:quality', onQuality);
+
+    // Connect
+    processor.connect();
+
+    return () => {
+      processor.emitter.off('connection:quality', onQuality);
+      // Don't disconnect on unmount — EventProcessor is a singleton
+      // that persists across the app lifecycle
+    };
+  }, [apiClient]);
+
+  return { quality, isConnected };
+}
+
+/**
+ * Hook that subscribes to a specific real-time event type.
+ * Automatically cleans up the subscription on unmount.
+ *
+ * Usage:
+ * ```ts
+ * useRealtimeEvent('feed:update', (data) => {
+ *   console.log('Feed updated:', data);
+ *   refreshFeed();
+ * });
+ * ```
+ */
+export function useRealtimeEvent<T = unknown>(
+  eventType: string,
+  handler: (data: T) => void,
+) {
+  useEffect(() => {
+    const processor = EventProcessor.shared;
+    processor.emitter.on(eventType, handler);
+
+    return () => {
+      processor.emitter.off(eventType, handler);
+    };
+  }, [eventType, handler]);
+}
+
+/**
+ * Hook that subscribes to connection-specific message events.
+ */
+export function useMessageUpdates(
+  connectionId: string,
+  onNewMessage: (data: unknown) => void,
+) {
+  useRealtimeEvent(`connection:${connectionId}:message:create`, onNewMessage);
+}
+
+/**
+ * Hook that subscribes to squad membership changes.
+ */
+export function useSquadUpdates(
+  onMemberAdded?: (data: unknown) => void,
+  onMemberRemoved?: (data: unknown) => void,
+) {
+  useRealtimeEvent('squad:member:add', onMemberAdded ?? (() => {}));
+  useRealtimeEvent('squad:member:remove', onMemberRemoved ?? (() => {}));
+}

package/src/screens/auth/EmailVerificationScreen.tsx

@@ -0,0 +1,201 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  Pressable,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useSquadSDK } from '../../SquadProvider';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../../components/ux/buttons/Button';
+import { TitleRegular, BodyRegular, BodyMedium } from '../../components/ux/text/Typography';
+
+export function EmailVerificationScreen() {
+  const navigation = useNavigation();
+  const sdk = useSquadSDK();
+  const [status, setStatus] = useState<'waiting' | 'checking' | 'error'>('waiting');
+  const [error, setError] = useState<string | null>(null);
+
+  // Poll for email verification (magic link flow)
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    let attempts = 0;
+    const maxAttempts = 60; // 5 minutes at 5s intervals
+
+    const checkVerification = async () => {
+      attempts++;
+      if (attempts > maxAttempts) {
+        clearInterval(interval);
+        setStatus('error');
+        setError('Verification timed out. Please try again.');
+        return;
+      }
+
+      try {
+        const isValid = await sdk.sessionManager.validateSession();
+        if (isValid) {
+          clearInterval(interval);
+          // Session validated — navigator will handle routing
+        }
+      } catch {
+        // Keep polling
+      }
+    };
+
+    interval = setInterval(checkVerification, 5000);
+    return () => clearInterval(interval);
+  }, [sdk]);
+
+  const resendEmail = useCallback(async () => {
+    setStatus('waiting');
+    setError(null);
+    // Re-trigger the session creation
+    // The SDK will handle sending another verification email
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Pressable style={styles.backButton} onPress={() => navigation.goBack()}>
+        <Text style={styles.backButtonText}>{'<'}</Text>
+      </Pressable>
+
+      <View style={styles.content}>
+        <View style={styles.iconContainer}>
+          <Text style={styles.icon}>@</Text>
+        </View>
+
+        <TitleRegular style={styles.title}>Check Your Email</TitleRegular>
+
+        <BodyRegular style={styles.subtitle}>
+          We sent a verification link to your email address. Tap the link to continue.
+        </BodyRegular>
+
+        {status === 'waiting' && (
+          <View style={styles.waitingContainer}>
+            <ActivityIndicator color={Colors.purple1} size="small" />
+            <BodyMedium style={styles.waitingText}>
+              Waiting for verification...
+            </BodyMedium>
+          </View>
+        )}
+
+        {status === 'error' && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>{error}</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={styles.footer}>
+        <Button style={styles.resendButton} onPress={resendEmail}>
+          <BodyRegular style={styles.resendText}>
+            Didn't receive the email?{' '}
+            <Text style={styles.resendAction}>Resend</Text>
+          </BodyRegular>
+        </Button>
+
+        <Button
+          style={styles.codeButton}
+          onPress={() => navigation.goBack()}
+        >
+          <BodyRegular style={styles.codeButtonText}>
+            Use verification code instead
+          </BodyRegular>
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.black,
+    paddingHorizontal: 24,
+  },
+  backButton: {
+    padding: 10,
+    marginTop: 60,
+    alignSelf: 'flex-start',
+  },
+  backButtonText: {
+    fontSize: 24,
+    color: Colors.white,
+    fontWeight: '600',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconContainer: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: Colors.purple1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  icon: {
+    fontSize: 36,
+    color: Colors.white,
+    fontWeight: '700',
+  },
+  title: {
+    color: Colors.white,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  subtitle: {
+    color: Colors.gray6,
+    textAlign: 'center',
+    maxWidth: 300,
+    marginBottom: 32,
+  },
+  waitingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  waitingText: {
+    color: Colors.gray6,
+  },
+  errorContainer: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: 'rgba(233, 120, 92, 0.14)',
+    borderRadius: 8,
+  },
+  errorText: {
+    color: Colors.orange1,
+    fontSize: 14,
+  },
+  footer: {
+    paddingBottom: 32,
+    gap: 16,
+  },
+  resendButton: {
+    alignItems: 'center',
+  },
+  resendText: {
+    color: Colors.gray6,
+  },
+  resendAction: {
+    color: Colors.white,
+    fontWeight: '500',
+  },
+  codeButton: {
+    alignItems: 'center',
+    paddingVertical: 16,
+    borderWidth: 1,
+    borderColor: Colors.gray5,
+    borderRadius: 8,
+  },
+  codeButtonText: {
+    color: Colors.white,
+  },
+});

package/src/screens/auth/EnterCodeScreen.tsx

@@ -0,0 +1,253 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { RouteProp } from '@react-navigation/native';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useSquadSDK } from '../../SquadProvider';
+import { Colors } from '../../theme/ThemeContext';
+import { ErrorHint } from '../../components/ux/errors/ErrorHint';
+import Button from '../../components/ux/buttons/Button';
+import AvoidKeyboardScreen from '../../components/ux/layout/AvoidKeyboardScreen';
+import { CodeInput } from '../../components/ux/inputs/CodeInput';
+import { TitleRegular, BodyRegular } from '../../components/ux/text/Typography';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'EnterCode'>;
+type Route = RouteProp<RootStackParamList, 'EnterCode'>;
+
+export function EnterCodeScreen() {
+  const navigation = useNavigation<Nav>();
+  const route = useRoute<Route>();
+  const sdk = useSquadSDK();
+  const { height } = useWindowDimensions();
+  const isShort = height < 700;
+
+  const phone = route.params?.phone;
+  const email = route.params?.email;
+
+  const [code, setCode] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [resendCooldown, setResendCooldown] = useState(0);
+  const cooldownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const COOLDOWN_SECONDS = 60;
+
+  useEffect(() => {
+    return () => {
+      if (cooldownRef.current) clearInterval(cooldownRef.current);
+    };
+  }, []);
+
+  const startCooldown = useCallback(() => {
+    setResendCooldown(COOLDOWN_SECONDS);
+    if (cooldownRef.current) clearInterval(cooldownRef.current);
+    cooldownRef.current = setInterval(() => {
+      setResendCooldown((prev: number) => {
+        if (prev <= 1) {
+          if (cooldownRef.current) clearInterval(cooldownRef.current);
+          cooldownRef.current = null;
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  }, []);
+
+  const buttonDisabled = code.length !== 6 || isLoading;
+
+  const verifyCode = useCallback(async (verificationCode?: string) => {
+    const codeToVerify = verificationCode ?? code;
+    if (codeToVerify.length !== 6) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await sdk.sessionManager.fulfillSession({
+        phone,
+        email,
+        code: codeToVerify,
+      });
+
+      if (result.status === 'active') {
+        // Session is active — navigator will automatically route to main/onboarding
+        // based on user state. No manual navigation needed.
+      } else {
+        setError(result.error ?? 'Invalid verification code. Please try again.');
+      }
+    } catch (err) {
+      const message = err instanceof Error && err.message.includes('timed out')
+        ? 'Request timed out. Please check your connection and try again.'
+        : 'Invalid verification code. Please try again.';
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [code, phone, email, sdk]);
+
+  const resendCode = useCallback(async () => {
+    if (resendCooldown > 0) return;
+
+    setIsLoading(true);
+    setError(null);
+    setCode('');
+
+    try {
+      const result = await sdk.sessionManager.createSession({ phone, email });
+      if (result.status !== 'pending') {
+        setError('Failed to resend code. Please try again.');
+      }
+      startCooldown();
+    } catch {
+      setError('Failed to resend code. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [phone, email, sdk, resendCooldown, startCooldown]);
+
+  return (
+    <AvoidKeyboardScreen>
+      {/* Progress bar */}
+      <View style={styles.progressBarContainer}>
+        <View style={styles.progressBar} />
+      </View>
+
+      <View style={[styles.headerContainer, isShort && styles.headerContainerShort]}>
+        <Pressable style={styles.backButton} onPress={() => navigation.goBack()}>
+          <Text style={styles.backButtonText}>{'<'}</Text>
+        </Pressable>
+      </View>
+
+      <View style={[styles.container, isShort && styles.containerShort]}>
+        <View style={styles.contentContainer}>
+          <TitleRegular style={styles.title}>Enter Verification Code</TitleRegular>
+
+          <View style={styles.codeContainer}>
+            <CodeInput
+              value={code}
+              onChangeText={setCode}
+              onComplete={verifyCode}
+              length={6}
+            />
+
+            <Button style={styles.resendContainer} onPress={resendCode} disabled={resendCooldown > 0}>
+              <BodyRegular style={styles.resendBody}>
+                Didn't receive a code?
+              </BodyRegular>
+              <BodyRegular style={[styles.resendAction, resendCooldown > 0 && styles.resendDisabled]}>
+                {resendCooldown > 0 ? ` Resend (${resendCooldown}s)` : ' Resend'}
+              </BodyRegular>
+            </Button>
+
+            <ErrorHint hint={error} />
+          </View>
+        </View>
+
+        <Button
+          style={[styles.button, buttonDisabled && styles.buttonDisabled]}
+          onPress={() => verifyCode()}
+          disabled={buttonDisabled}
+        >
+          <Text style={[styles.buttonText, buttonDisabled && styles.buttonDisabledText]}>
+            {isLoading ? 'Verifying...' : 'Verify'}
+          </Text>
+        </Button>
+      </View>
+    </AvoidKeyboardScreen>
+  );
+}
+
+const styles = StyleSheet.create({
+  progressBarContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+  },
+  progressBar: {
+    backgroundColor: Colors.white,
+    height: 4,
+    width: '16%',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    marginBottom: 46,
+    marginTop: 24,
+  },
+  headerContainerShort: {
+    marginBottom: 40,
+    marginTop: 24,
+  },
+  backButton: {
+    padding: 10,
+  },
+  backButtonText: {
+    fontSize: 24,
+    color: Colors.white,
+    fontWeight: '600',
+  },
+  container: {
+    flex: 1,
+    paddingBottom: 16,
+    paddingHorizontal: 24,
+  },
+  containerShort: {
+    paddingBottom: 8,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  title: {
+    color: Colors.white,
+    marginBottom: 24,
+  },
+  codeContainer: {
+    width: '100%',
+    maxWidth: 400,
+    alignSelf: 'center',
+  },
+  resendContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginTop: 24,
+  },
+  resendBody: {
+    color: Colors.gray6,
+  },
+  resendAction: {
+    color: Colors.white,
+    fontWeight: '500',
+  },
+  resendDisabled: {
+    color: Colors.gray6,
+  },
+  button: {
+    backgroundColor: Colors.white,
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    backgroundColor: Colors.gray2,
+  },
+  buttonText: {
+    fontSize: 16,
+    color: Colors.gray1,
+    fontWeight: '600',
+  },
+  buttonDisabledText: {
+    color: Colors.gray6,
+  },
+});