@squad-sports/react-native 1.3.1

package/src/hooks/useImageOptimization.ts

@@ -0,0 +1,59 @@
+/**
+ * Image optimization hook — resizes and compresses images before upload.
+ * Ported from squad-demo/src/hooks/useImageOptimization.ts + useImagePreloader.ts + useImageListPreloader.ts.
+ */
+import { useCallback } from 'react';
+
+interface OptimizedImage {
+  uri: string;
+  width: number;
+  height: number;
+  base64?: string;
+}
+
+export function useImageOptimization() {
+  const optimizeImage = useCallback(async (
+    uri: string,
+    maxWidth: number = 800,
+    quality: number = 0.8,
+  ): Promise<OptimizedImage> => {
+    try {
+      const ImageManipulator = await import('expo-image-manipulator');
+      const result = await ImageManipulator.manipulateAsync(
+        uri,
+        [{ resize: { width: maxWidth } }],
+        { compress: quality, format: ImageManipulator.SaveFormat.JPEG },
+      );
+      return { uri: result.uri, width: result.width, height: result.height };
+    } catch {
+      return { uri, width: 0, height: 0 };
+    }
+  }, []);
+
+  return { optimizeImage };
+}
+
+export function useImagePreloader() {
+  const preloadImage = useCallback(async (uri: string): Promise<boolean> => {
+    try {
+      const { Image } = await import('expo-image');
+      await Image.prefetch(uri);
+      return true;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  return { preloadImage };
+}
+
+export function useImageListPreloader() {
+  const preloadImages = useCallback(async (uris: string[]): Promise<void> => {
+    try {
+      const { Image } = await import('expo-image');
+      await Promise.allSettled(uris.map(uri => Image.prefetch(uri)));
+    } catch {}
+  }, []);
+
+  return { preloadImages };
+}

package/src/hooks/useOnboardingStepGuard.ts

@@ -0,0 +1,36 @@
+/**
+ * Onboarding step guard — ensures users can't skip onboarding steps.
+ * Ported from squad-demo/src/hooks/useOnboardingStepGuard.ts.
+ */
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { useNavigation } from '@react-navigation/native';
+import { reActiveAccessToken, reActiveUserId } from '../state/session';
+import { reUserCache } from '../state/user';
+
+export function useOnboardingStepGuard(requiredStep: 'token' | 'displayName' | 'community') {
+  const navigation = useNavigation();
+  const token = useRecoilValue(reActiveAccessToken);
+  const userId = useRecoilValue(reActiveUserId);
+  const user = useRecoilValue(reUserCache);
+
+  useEffect(() => {
+    switch (requiredStep) {
+      case 'token':
+        if (!token) {
+          navigation.reset({ index: 0, routes: [{ name: 'Landing' as never }] });
+        }
+        break;
+      case 'displayName':
+        if (!token || !user?.displayName) {
+          navigation.reset({ index: 0, routes: [{ name: 'OnboardingWelcome' as never }] });
+        }
+        break;
+      case 'community':
+        if (!token || !user?.community) {
+          navigation.reset({ index: 0, routes: [{ name: 'OnboardingTeamSelect' as never }] });
+        }
+        break;
+    }
+  }, [token, userId, user, requiredStep, navigation]);
+}

package/src/hooks/usePendingNavigation.ts

@@ -0,0 +1,26 @@
+/**
+ * Pending navigation hook — handles post-onboarding redirects.
+ * Ported from squad-demo/src/hooks/usePendingNavigation.ts.
+ */
+import { useCallback } from 'react';
+import { useRecoilState } from 'recoil';
+import { rePendingNavigation } from '../state/session';
+import { useNavigation } from '@react-navigation/native';
+
+export function usePendingNavigation() {
+  const [pending, setPending] = useRecoilState(rePendingNavigation);
+  const navigation = useNavigation();
+
+  const executePendingNavigation = useCallback(() => {
+    if (pending.hasPendingInviter && pending.inviterId) {
+      (navigation as any).navigate('Profile', { userId: pending.inviterId });
+      setPending({ hasPendingInviter: false });
+    }
+  }, [pending, setPending, navigation]);
+
+  const setPendingInviter = useCallback((inviterId: string) => {
+    setPending({ hasPendingInviter: true, inviterId });
+  }, [setPending]);
+
+  return { pending, executePendingNavigation, setPendingInviter };
+}

package/src/hooks/useSquadData.ts

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useApiClient } from '../SquadProvider';
+import type { User, Connection, Feed } from '@squad-sports/core';
+
+/**
+ * Hook to load and manage the logged-in user's data.
+ */
+export function useCurrentUser() {
+  const apiClient = useApiClient();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const userData = await apiClient.getLoggedInUser();
+      setUser(userData);
+    } catch (error) {
+      console.error('[useCurrentUser] Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { user, loading, refresh };
+}
+
+/**
+ * Hook to load and manage squad connections.
+ */
+export function useSquadConnections() {
+  const apiClient = useApiClient();
+  const [connections, setConnections] = useState<Connection[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async (forceFresh = false) => {
+    setLoading(true);
+    try {
+      const squad = await apiClient.getUserConnections(forceFresh);
+      setConnections(squad?.connections ?? []);
+    } catch (error) {
+      console.error('[useSquadConnections] Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { connections, loading, refresh };
+}
+
+/**
+ * Hook to load the freestyle feed.
+ */
+export function useFeed() {
+  const apiClient = useApiClient();
+  const [feed, setFeed] = useState<Feed | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async (forceFresh = false) => {
+    setLoading(true);
+    try {
+      const data = await apiClient.getFeed(1, 20, forceFresh);
+      setFeed(data);
+    } catch (error) {
+      console.error('[useFeed] Error:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiClient]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return { feed, loading, refresh };
+}

package/src/hooks/useUserCreated.ts

@@ -0,0 +1,25 @@
+/**
+ * User created hook — tracks when a new user is created during onboarding.
+ * Ported from squad-demo/src/hooks/useUserCreated.ts.
+ */
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { reUserCache, reLoggedInUserLoaded } from '../state/user';
+import { reActiveAccessToken, reActiveUserId } from '../state/session';
+import type { User } from '@squad-sports/core';
+
+export function useUserCreated() {
+  const setUserCache = useSetRecoilState(reUserCache);
+  const setUserLoaded = useSetRecoilState(reLoggedInUserLoaded);
+  const setAccessToken = useSetRecoilState(reActiveAccessToken);
+  const setUserId = useSetRecoilState(reActiveUserId);
+
+  const onUserCreated = useCallback((user: User, accessToken: string) => {
+    setUserCache(user);
+    setUserLoaded(true);
+    if (user.id) setUserId(user.id);
+    setAccessToken(accessToken);
+  }, [setUserCache, setUserLoaded, setAccessToken, setUserId]);
+
+  return { onUserCreated };
+}

package/src/hooks/useUserUpdate.ts

@@ -0,0 +1,25 @@
+/**
+ * User update hook — updates user profile and syncs state.
+ * Ported from squad-demo/src/hooks/useUserUpdate.ts.
+ */
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { useApiClient } from '../SquadProvider';
+import { reUserCache } from '../state/user';
+import { updateUser } from '../services/UserUpdateService';
+import type { User } from '@squad-sports/core';
+
+export function useUserUpdate() {
+  const apiClient = useApiClient();
+  const setUserCache = useSetRecoilState(reUserCache);
+
+  const update = useCallback(async (user: User): Promise<User | null> => {
+    const result = await updateUser(apiClient, user);
+    if (result) {
+      setUserCache(result);
+    }
+    return result;
+  }, [apiClient, setUserCache]);
+
+  return { updateUser: update };
+}

package/src/hooks/useViewabilityTracker.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Tracks how long a component has been in the viewport.
+ * Fires the onImpression callback once after the threshold is met.
+ *
+ * @param placementId - Unique placement identifier
+ * @param thresholdMs - Minimum viewport time to count as impression (1000 for cards, 5000 for banners)
+ * @param onImpression - Called once when threshold is met
+ * @param active - Whether tracking is active (e.g., component is visible)
+ */
+export function useViewabilityTracker(
+  placementId: string,
+  thresholdMs: number,
+  onImpression: (placementId: string, durationMs: number) => void,
+  active: boolean = true,
+): void {
+  const firedRef = useRef(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (!active || firedRef.current) return;
+
+    timerRef.current = setTimeout(() => {
+      if (!firedRef.current) {
+        firedRef.current = true;
+        onImpression(placementId, thresholdMs);
+      }
+    }, thresholdMs);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [placementId, thresholdMs, onImpression, active]);
+
+  // Reset when placement changes
+  useEffect(() => {
+    firedRef.current = false;
+  }, [placementId]);
+}

package/src/index.ts

@@ -0,0 +1,109 @@
+// SDK Entry
+export { SquadSportsSDK } from './SquadSportsSDK';
+
+// Provider & Hooks
+export { SquadProvider, useSquadSDK, useApiClient } from './SquadProvider';
+
+// Experience (drop-in component)
+export { SquadExperience } from './SquadExperience';
+
+// Navigation
+export { SquadNavigator } from './navigation/SquadNavigator';
+export type { RootStackParamList } from './navigation/SquadNavigator';
+
+// Theme
+export { ThemeProvider, useTheme, Colors, defaultTheme, buildCommunityTheme } from './theme/ThemeContext';
+export type { Theme, ColorScheme } from './theme/ThemeContext';
+
+// UX Components
+export {
+  Button,
+  XButton,
+  TextInput,
+  PhoneNumberInput,
+  CodeInput,
+  Screen,
+  ScreenHeader,
+  LoadingOverlay,
+  AvoidKeyboardScreen,
+  Toast,
+  TitleLarge,
+  TitleRegular,
+  TitleMedium,
+  TitleSmall,
+  TitleTiny,
+  SubtitleSmall,
+  BodyRegular,
+  BodyMedium,
+  BodySmall,
+  ButtonLarge,
+  ButtonSmall,
+  ErrorHint,
+  UserImage,
+  BackButton,
+} from './components';
+export type { ButtonProps, ToastType } from './components';
+
+// Feed Components
+export { default as FreestyleCard } from './components/feed/FreestyleCard';
+export { default as PollCard } from './components/feed/PollCard';
+export { default as MessageCard } from './components/message/MessageCard';
+export { AudioPlayerRow } from './components/audio/AudioPlayerRow';
+
+// Auth Screens
+export { LandingScreen } from './screens/auth/LandingScreen';
+export { EnterEmailScreen } from './screens/auth/EnterEmailScreen';
+export { EnterCodeScreen } from './screens/auth/EnterCodeScreen';
+export { EmailVerificationScreen } from './screens/auth/EmailVerificationScreen';
+
+// Onboarding Screens
+export { OnboardingWelcomeScreen } from './screens/onboarding/OnboardingWelcomeScreen';
+export { OnboardingTeamSelectScreen } from './screens/onboarding/OnboardingTeamSelectScreen';
+export { OnboardingAccountSetupScreen } from './screens/onboarding/OnboardingAccountSetupScreen';
+
+// Main Screens
+export { HomeScreen } from './screens/home/HomeScreen';
+export { ProfileScreen } from './screens/profile/ProfileScreen';
+export { SettingsScreen } from './screens/settings/SettingsScreen';
+export { EditProfileScreen } from './screens/settings/EditProfileScreen';
+export { BlockedUsersScreen } from './screens/settings/BlockedUsersScreen';
+export { DeleteAccountScreen } from './screens/settings/DeleteAccountScreen';
+export { MessagingScreen } from './screens/messaging/MessagingScreen';
+export { FreestyleCreationScreen } from './screens/freestyle/FreestyleCreationScreen';
+export { PollResponseScreen } from './screens/polls/PollResponseScreen';
+export { InviteScreen } from './screens/invite/InviteScreen';
+
+// Squad Line (Voice Calling)
+export { AddCallTitleScreen } from './screens/squad-line/AddCallTitleScreen';
+export { SquadLineClient } from './squad-line/SquadLineClient';
+export type { CallState, CallInfo } from './squad-line/SquadLineClient';
+export { useSquadLine } from './squad-line/useSquadLine';
+export { CallScreen } from './squad-line/CallScreen';
+export { IncomingCallOverlay } from './squad-line/IncomingCallOverlay';
+
+// Real-time & Offline
+export { EventProcessor } from './realtime/EventProcessor';
+export type { ConnectionQuality } from './realtime/EventProcessor';
+export { useRealtimeSync, useRealtimeEvent, useMessageUpdates, useSquadUpdates } from './realtime/useRealtimeSync';
+export { OfflineQueue } from './realtime/OfflineQueue';
+export type { OfflineAction, OfflineActionType } from './realtime/OfflineQueue';
+export { NetworkMonitor, useNetworkStatus } from './realtime/NetworkMonitor';
+export { PushNotificationHandler } from './realtime/PushNotificationHandler';
+export type { PushNotificationPayload, NotificationType, NotificationRouteAction } from './realtime/PushNotificationHandler';
+
+// Data Hooks
+export { useCurrentUser, useSquadConnections, useFeed } from './hooks/useSquadData';
+
+// Re-export core types
+export type {
+  SquadSDKConfig,
+  SquadPartnerConfig,
+  SquadConfig,
+  StorageAdapter,
+  CommunityConfig,
+  FeatureFlags,
+  Environment,
+  SSOConfig,
+  SSOProvider,
+  NexusPartnerConfig,
+} from '@squad-sports/core';

package/src/navigation/SquadNavigator.tsx

@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import { User } from '@squad-sports/core';
+import { useSquadSDK } from '../SquadProvider';
+import { Colors } from '../theme/ThemeContext';
+import { ScreenErrorBoundary } from '../components/ErrorBoundary';
+
+// Auth Screens
+import { LandingScreen } from '../screens/auth/LandingScreen';
+import { EnterEmailScreen } from '../screens/auth/EnterEmailScreen';
+import { EnterCodeScreen } from '../screens/auth/EnterCodeScreen';
+import { EmailVerificationScreen } from '../screens/auth/EmailVerificationScreen';
+
+// Onboarding Screens
+import { OnboardingWelcomeScreen } from '../screens/onboarding/OnboardingWelcomeScreen';
+import { OnboardingTeamSelectScreen } from '../screens/onboarding/OnboardingTeamSelectScreen';
+import { OnboardingAccountSetupScreen } from '../screens/onboarding/OnboardingAccountSetupScreen';
+
+// Main Screens
+import { HomeScreen } from '../screens/home/HomeScreen';
+import { ProfileScreen } from '../screens/profile/ProfileScreen';
+import { SettingsScreen } from '../screens/settings/SettingsScreen';
+import { MessagingScreen } from '../screens/messaging/MessagingScreen';
+import { FreestyleCreationScreen } from '../screens/freestyle/FreestyleCreationScreen';
+import { PollResponseScreen } from '../screens/polls/PollResponseScreen';
+import { InviteScreen } from '../screens/invite/InviteScreen';
+
+// Settings sub-screens
+import { EditProfileScreen } from '../screens/settings/EditProfileScreen';
+import { BlockedUsersScreen } from '../screens/settings/BlockedUsersScreen';
+import { DeleteAccountScreen } from '../screens/settings/DeleteAccountScreen';
+
+// Events & Wallet
+import { EventScreen } from '../screens/events/EventScreen';
+import { WalletScreen } from '../screens/wallet/WalletScreen';
+
+// Freestyle sub-screens
+import { FreestyleScreen } from '../screens/freestyle/FreestyleScreen';
+import { FreestyleListensScreen } from '../screens/freestyle/FreestyleListensScreen';
+import { FreestyleReactionsScreen } from '../screens/freestyle/FreestyleReactionsScreen';
+import { CommunityFreestyleListensScreen, CommunityFreestyleReactionsScreen } from '../screens/freestyle/CommunityFreestyleScreen';
+
+// Poll sub-screens
+import { PollSummationScreen } from '../screens/polls/PollSummationScreen';
+
+// Auth sub-screens
+import { LoginScreen } from '../screens/auth/LoginScreen';
+
+// Invite sub-screens
+import { InvitationQrCodeScreen } from '../screens/invite/InvitationQrCodeScreen';
+
+// Settings sub-screens
+import { NetworkStatusScreen } from '../screens/settings/NetworkStatusScreen';
+
+// Squad Line
+import { AddCallTitleScreen } from '../screens/squad-line/AddCallTitleScreen';
+import { CallScreen } from '../squad-line/CallScreen';
+import { IncomingCallOverlay } from '../squad-line/IncomingCallOverlay';
+
+function withErrorBoundary<P extends object>(
+  Component: React.ComponentType<P>,
+  screenName: string,
+): React.ComponentType<P> {
+  return function WrappedScreen(props: P) {
+    return (
+      <ScreenErrorBoundary screenName={screenName}>
+        <Component {...props} />
+      </ScreenErrorBoundary>
+    );
+  };
+}
+
+export type RootStackParamList = {
+  // Auth
+  Landing: undefined;
+  EnterEmail: { email?: string } | undefined;
+  EnterCode: { phone?: string; email?: string };
+  EmailVerification: undefined;
+  SignUp: undefined;
+
+  // Onboarding
+  OnboardingWelcome: undefined;
+  OnboardingTeamSelect: undefined;
+  OnboardingAccountSetup: undefined;
+
+  // Main
+  Home: undefined;
+  Profile: { userId: string };
+  Settings: undefined;
+  EditProfile: undefined;
+  BlockedUsers: undefined;
+  DeleteAccount: undefined;
+  Messaging: { connectionId: string };
+  FreestyleCreate: undefined;
+  PollResponse: { pollId: string };
+  Invite: undefined;
+
+  // Squad Line
+  AddCallTitle: { connectionId: string };
+  ActiveCall: { connectionId: string; title: string };
+  IncomingCall: { callerId: string; callerName: string };
+
+  // Events & Wallet
+  Events: undefined;
+  Wallet: undefined;
+
+  // Freestyle sub-screens
+  Freestyle: { freestyleId: string };
+  FreestyleListens: { freestyleId: string };
+  FreestyleReactions: { freestyleId: string };
+  CommunityFreestyleListens: { freestyleId: string };
+  CommunityFreestyleReactions: { freestyleId: string; emoji?: string };
+
+  // Poll sub-screens
+  PollSummation: { pollId: string };
+
+  // Auth sub-screens
+  Login: undefined;
+
+  // Invite sub-screens
+  InvitationQrCode: undefined;
+
+  // Settings sub-screens
+  NetworkStatus: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+type NavigationState = 'loading' | 'auth' | 'onboarding' | 'main';
+
+export function SquadNavigator() {
+  const sdk = useSquadSDK();
+  const [navState, setNavState] = useState<NavigationState>('loading');
+
+  useEffect(() => {
+    const determineRoute = async () => {
+      try {
+        const token = await sdk.tokenStorage.getAccessToken();
+        if (!token) {
+          setNavState('auth');
+          return;
+        }
+
+        const user = await sdk.apiClient.getLoggedInUser();
+        if (!user) {
+          setNavState('auth');
+          return;
+        }
+
+        const partnerAuth = sdk.config.partnerAuth;
+        const hasDisplayName = !!(user.displayName?.trim());
+        const hasCommunity = !!(user.community?.trim());
+
+        // Partner flow: auto-fill missing profile data and skip onboarding
+        if (partnerAuth?.communityId) {
+          if (!hasCommunity) {
+            await sdk.apiClient.updateUserCommunity({ id: partnerAuth.communityId }).catch(() => {});
+          }
+          if (!hasDisplayName && partnerAuth.userData?.displayName) {
+            await sdk.apiClient.updateLoggedInUser(
+              new User({ displayName: partnerAuth.userData.displayName }),
+            ).catch(() => {});
+          }
+          setNavState('main');
+          return;
+        }
+
+        if (!hasDisplayName || !hasCommunity) {
+          setNavState('onboarding');
+          return;
+        }
+
+        setNavState('main');
+      } catch {
+        setNavState('auth');
+      }
+    };
+
+    determineRoute();
+
+    // Listen for auth changes
+    const onAuthInvalid = () => setNavState('auth');
+    sdk.apiClient.emitter.on('auth:invalid', onAuthInvalid);
+    return () => {
+      sdk.apiClient.emitter.off('auth:invalid', onAuthInvalid);
+    };
+  }, [sdk]);
+
+  if (navState === 'loading') {
+    return (
+      <View style={{ flex: 1, backgroundColor: Colors.gray9, justifyContent: 'center', alignItems: 'center' }}>
+        <ActivityIndicator size="large" color={Colors.white} />
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <Stack.Navigator
+        screenOptions={{
+          headerShown: false,
+          animation: 'slide_from_right',
+          contentStyle: { backgroundColor: Colors.gray9 },
+        }}
+      >
+        {navState === 'auth' && (
+          <>
+            <Stack.Screen name="Landing" component={withErrorBoundary(LandingScreen, 'Landing')} />
+            <Stack.Screen name="EnterEmail" component={withErrorBoundary(EnterEmailScreen, 'EnterEmail')} />
+            <Stack.Screen name="EnterCode" component={withErrorBoundary(EnterCodeScreen, 'EnterCode')} />
+            <Stack.Screen name="EmailVerification" component={withErrorBoundary(EmailVerificationScreen, 'EmailVerification')} />
+            <Stack.Screen name="Login" component={withErrorBoundary(LoginScreen, 'Login')} />
+          </>
+        )}
+
+        {navState === 'onboarding' && (
+          <>
+            <Stack.Screen name="OnboardingWelcome" component={withErrorBoundary(OnboardingWelcomeScreen, 'OnboardingWelcome')} />
+            <Stack.Screen name="OnboardingTeamSelect" component={withErrorBoundary(OnboardingTeamSelectScreen, 'OnboardingTeamSelect')} />
+            <Stack.Screen name="OnboardingAccountSetup" component={withErrorBoundary(OnboardingAccountSetupScreen, 'OnboardingAccountSetup')} />
+          </>
+        )}
+
+        {navState === 'main' && (
+          <>
+            <Stack.Screen name="Home" component={withErrorBoundary(HomeScreen, 'Home')} />
+            <Stack.Screen name="Profile" component={withErrorBoundary(ProfileScreen, 'Profile')} />
+            <Stack.Screen name="Settings" component={withErrorBoundary(SettingsScreen, 'Settings')} />
+            <Stack.Screen name="EditProfile" component={withErrorBoundary(EditProfileScreen, 'EditProfile')} />
+            <Stack.Screen name="BlockedUsers" component={withErrorBoundary(BlockedUsersScreen, 'BlockedUsers')} />
+            <Stack.Screen name="DeleteAccount" component={withErrorBoundary(DeleteAccountScreen, 'DeleteAccount')} />
+            <Stack.Screen name="Events" component={withErrorBoundary(EventScreen, 'Events')} />
+            <Stack.Screen name="Wallet" component={withErrorBoundary(WalletScreen, 'Wallet')} />
+            <Stack.Screen name="Messaging" component={withErrorBoundary(MessagingScreen, 'Messaging')} />
+            <Stack.Screen name="FreestyleCreate" component={withErrorBoundary(FreestyleCreationScreen, 'FreestyleCreate')} />
+            <Stack.Screen name="PollResponse" component={withErrorBoundary(PollResponseScreen, 'PollResponse')} />
+            <Stack.Screen name="Invite" component={withErrorBoundary(InviteScreen, 'Invite')} />
+            <Stack.Screen name="AddCallTitle" component={withErrorBoundary(AddCallTitleScreen, 'AddCallTitle')} />
+            <Stack.Screen name="Freestyle" component={withErrorBoundary(FreestyleScreen, 'Freestyle')} />
+            <Stack.Screen name="FreestyleListens" component={withErrorBoundary(FreestyleListensScreen, 'FreestyleListens')} />
+            <Stack.Screen name="FreestyleReactions" component={withErrorBoundary(FreestyleReactionsScreen, 'FreestyleReactions')} />
+            <Stack.Screen name="CommunityFreestyleListens" component={withErrorBoundary(CommunityFreestyleListensScreen, 'CommunityFreestyleListens')} />
+            <Stack.Screen name="CommunityFreestyleReactions" component={withErrorBoundary(CommunityFreestyleReactionsScreen, 'CommunityFreestyleReactions')} />
+            <Stack.Screen name="PollSummation" component={withErrorBoundary(PollSummationScreen, 'PollSummation')} />
+            <Stack.Screen name="InvitationQrCode" component={withErrorBoundary(InvitationQrCodeScreen, 'InvitationQrCode')} />
+            <Stack.Screen name="NetworkStatus" component={withErrorBoundary(NetworkStatusScreen, 'NetworkStatus')} />
+            <Stack.Screen
+              name="ActiveCall"
+              component={withErrorBoundary(CallScreen, 'ActiveCall')}
+              options={{ animation: 'slide_from_bottom', gestureEnabled: false }}
+            />
+          </>
+        )}
+      </Stack.Navigator>
+
+      {/* Global overlay for incoming calls */}
+      <IncomingCallOverlay />
+    </>
+  );
+}