@squad-sports/react-native 1.3.1

package/src/screens/home/HomeScreen.tsx

@@ -0,0 +1,365 @@
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  RefreshControl,
+  Pressable,
+  SectionList,
+  Dimensions,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+import type { RootStackParamList } from '../../navigation/SquadNavigator';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import { useRealtimeEvent } from '../../realtime/useRealtimeSync';
+import UserImage from '../../components/ux/user-image/UserImage';
+import FreestyleCard from '../../components/feed/FreestyleCard';
+import PollCard from '../../components/feed/PollCard';
+import SponsoredContentCard from '../../components/feed/SponsoredContentCard';
+import InterstitialOverlay from '../../components/feed/InterstitialOverlay';
+import Button from '../../components/ux/buttons/Button';
+import { TitleSmall, BodyRegular, BodySmall, TitleMedium } from '../../components/ux/text/Typography';
+import type { User, Connection } from '@squad-sports/core';
+import { injectSponsoredContent, type SponsorshipPlacementData } from '@squad-sports/core/src/sponsorship/feed-injector';
+import { ImpressionTracker } from '@squad-sports/core/src/sponsorship/impression-tracker';
+import { InterstitialManager } from '@squad-sports/core/src/sponsorship/interstitial-manager';
+
+type Nav = NativeStackNavigationProp<RootStackParamList, 'Home'>;
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export function HomeScreen() {
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+  const navigation = useNavigation<Nav>();
+
+  const [user, setUser] = useState<User | null>(null);
+  const [connections, setConnections] = useState<Connection[]>([]);
+  const [freestyles, setFreestyles] = useState<any[]>([]);
+  const [polls, setPolls] = useState<any[]>([]);
+  const [placements, setPlacements] = useState<SponsorshipPlacementData[]>([]);
+  const [interstitialPlacement, setInterstitialPlacement] = useState<SponsorshipPlacementData | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const interstitialManagerRef = useRef(new InterstitialManager());
+
+  const loadData = useCallback(async (forceFresh = false) => {
+    try {
+      const [userData, squad, feed, pollFeed, sponsorships] = await Promise.all([
+        apiClient.getLoggedInUser(),
+        apiClient.getUserConnections(forceFresh),
+        apiClient.getFeed(1, 10, forceFresh).catch(() => null),
+        apiClient.getActivePolls(forceFresh).catch(() => null),
+        apiClient.getActivePlacements(forceFresh).catch(() => null),
+      ]);
+      setUser(userData);
+      setConnections(squad?.connections ?? []);
+      setFreestyles(feed?.freestyles ?? []);
+      setPolls(pollFeed?.polls ?? []);
+
+      const loadedPlacements: SponsorshipPlacementData[] = (sponsorships?.placements ?? []).map((p: any) => ({
+        id: p.id,
+        type: p.type,
+        brandId: p.brandId ?? p.brand?.id ?? '',
+        brandName: p.brand?.name ?? '',
+        brandImageUrl: p.brand?.imageUrl,
+        headline: p.headline,
+        bodyText: p.bodyText,
+        imageUrl: p.imageUrl,
+        ctaText: p.ctaText,
+        ctaUrl: p.ctaUrl,
+        isHouseAd: p.isHouseAd ?? false,
+        config: p.config,
+      }));
+      setPlacements(loadedPlacements);
+      interstitialManagerRef.current.configure(loadedPlacements);
+      ImpressionTracker.shared.configure(apiClient);
+    } catch (error) {
+      console.error('[HomeScreen] Error loading data:', error);
+    }
+  }, [apiClient]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // Live updates
+  useRealtimeEvent('feed:update', () => loadData());
+  useRealtimeEvent('poll:update', () => loadData());
+  useRealtimeEvent('squad:member:add', () => loadData());
+
+  // Game moment → interstitial sponsorship
+  useRealtimeEvent('game:moment', (data: { type: string }) => {
+    const placement = interstitialManagerRef.current.onGameMoment(data.type);
+    if (placement) setInterstitialPlacement(placement);
+  });
+
+  const handleImpression = useCallback((placementId: string, durationMs: number) => {
+    ImpressionTracker.shared.record(placementId, durationMs, 'feed', false);
+  }, []);
+
+  const handleCtaPress = useCallback((placementId: string) => {
+    ImpressionTracker.shared.record(placementId, 0, 'feed', true);
+  }, []);
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await loadData(true);
+    setRefreshing(false);
+  }, [loadData]);
+
+  const primaryColor = theme.buttonColor;
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <FlatList
+        data={[]}
+        renderItem={() => null}
+        ListHeaderComponent={
+          <>
+            {/* Header */}
+            <View style={styles.header}>
+              <View style={styles.headerLeft}>
+                <TitleMedium style={styles.greeting}>
+                  Hey, {user?.displayName ?? 'there'}
+                </TitleMedium>
+                <BodySmall style={styles.squadCount}>
+                  {connections.length} in your squad
+                </BodySmall>
+              </View>
+              <View style={styles.headerRight}>
+                <Pressable onPress={() => navigation.navigate('Invite')}>
+                  <View style={[styles.actionIcon, { borderColor: primaryColor }]}>
+                    <Text style={[styles.actionIconText, { color: primaryColor }]}>+</Text>
+                  </View>
+                </Pressable>
+                <Pressable onPress={() => navigation.navigate('Settings')}>
+                  <View style={styles.settingsIcon}>
+                    <Text style={styles.settingsIconText}>...</Text>
+                  </View>
+                </Pressable>
+              </View>
+            </View>
+
+            {/* Squad Circle */}
+            {connections.length > 0 && (
+              <View style={styles.squadCircleSection}>
+                <FlatList
+                  data={connections.slice(0, 8)}
+                  keyExtractor={(item) => item.id ?? ''}
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerStyle={styles.squadCircleList}
+                  renderItem={({ item }) => {
+                    const other = item.recipient ?? item.creator;
+                    return (
+                      <Pressable
+                        style={styles.squadMember}
+                        onPress={() => navigation.navigate('Profile', { userId: other?.id ?? item.id ?? '' })}
+                      >
+                        <UserImage
+                          imageUrl={other?.imageUrl}
+                          displayName={other?.displayName}
+                          size={56}
+                          borderColor={primaryColor}
+                        />
+                        <BodySmall style={styles.squadMemberName} numberOfLines={1}>
+                          {other?.displayName?.split(' ')[0] ?? ''}
+                        </BodySmall>
+                      </Pressable>
+                    );
+                  }}
+                />
+              </View>
+            )}
+
+            {/* Action Buttons */}
+            <View style={styles.actionRow}>
+              <Button
+                style={[styles.actionButton, { backgroundColor: Colors.gray2 }]}
+                onPress={() => navigation.navigate('FreestyleCreate')}
+              >
+                <Text style={[styles.actionButtonIcon, { color: primaryColor }]}>{'M'}</Text>
+                <BodySmall style={styles.actionButtonLabel}>Freestyle</BodySmall>
+              </Button>
+              <Button
+                style={[styles.actionButton, { backgroundColor: Colors.gray2 }]}
+                onPress={() => navigation.navigate('Invite')}
+              >
+                <Text style={[styles.actionButtonIcon, { color: primaryColor }]}>{'+'}</Text>
+                <BodySmall style={styles.actionButtonLabel}>Invite</BodySmall>
+              </Button>
+            </View>
+
+            {/* Active Polls */}
+            {polls.length > 0 && (
+              <View style={styles.section}>
+                <TitleSmall style={styles.sectionTitle}>Active Polls</TitleSmall>
+                {polls.slice(0, 2).map((poll: any) => (
+                  <PollCard
+                    key={poll.id}
+                    id={poll.id}
+                    question={poll.question ?? ''}
+                    options={(poll.options ?? []).map((o: any) => ({
+                      id: o.id ?? '',
+                      text: o.text ?? '',
+                      percentage: o.percentage,
+                    }))}
+                    hasVoted={!!poll.myResponse}
+                    selectedOptionId={poll.myResponse?.optionId}
+                    totalVotes={poll.totalVotes}
+                    primaryColor={primaryColor}
+                    onPress={() => navigation.navigate('PollResponse', { pollId: poll.id })}
+                  />
+                ))}
+              </View>
+            )}
+
+            {/* Feed */}
+            {freestyles.length > 0 && (
+              <View style={styles.section}>
+                <TitleSmall style={styles.sectionTitle}>Latest Freestyles</TitleSmall>
+              </View>
+            )}
+          </>
+        }
+        ListFooterComponent={
+          <View style={styles.feedSection}>
+            {injectSponsoredContent(freestyles, placements).map((item, index) => {
+              if (item.type === 'sponsored') {
+                const sp = item.data as SponsorshipPlacementData;
+                return (
+                  <SponsoredContentCard
+                    key={`sp-${sp.id}-${index}`}
+                    placementId={sp.id}
+                    brandName={sp.brandName}
+                    brandImageUrl={sp.brandImageUrl}
+                    headline={sp.headline}
+                    bodyText={sp.bodyText}
+                    ctaText={sp.ctaText}
+                    ctaUrl={sp.ctaUrl}
+                    onImpression={handleImpression}
+                    onCtaPress={handleCtaPress}
+                  />
+                );
+              }
+              const freestyle = item.data as any;
+              return (
+                <FreestyleCard
+                  key={freestyle.id}
+                  id={freestyle.id}
+                  audioUrl={freestyle.audioUrl}
+                  duration={freestyle.duration}
+                  creatorName={freestyle.creator?.displayName}
+                  creatorImageUrl={freestyle.creator?.imageUrl}
+                  createdAt={freestyle.createdAt}
+                  listenCount={freestyle.listenCount}
+                  reactionCount={freestyle.reactionCount}
+                  prompt={freestyle.prompt?.text}
+                />
+              );
+            })}
+
+            {connections.length === 0 && freestyles.length === 0 && (
+              <View style={styles.emptyState}>
+                <Text style={styles.emptyEmoji}>{'squad'}</Text>
+                <TitleSmall style={styles.emptyTitle}>Build Your Squad</TitleSmall>
+                <BodyRegular style={styles.emptySubtitle}>
+                  Invite friends to start sharing freestyles, messages, and polls
+                </BodyRegular>
+                <Button
+                  style={[styles.emptyButton, { backgroundColor: primaryColor }]}
+                  onPress={() => navigation.navigate('Invite')}
+                >
+                  <Text style={[styles.emptyButtonText, { color: theme.buttonText }]}>
+                    Invite Friends
+                  </Text>
+                </Button>
+              </View>
+            )}
+          </View>
+        }
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={Colors.white} />
+        }
+      />
+
+      {/* Interstitial sponsorship overlay — triggered by game moments */}
+      {interstitialPlacement && (
+        <InterstitialOverlay
+          visible={!!interstitialPlacement}
+          placementId={interstitialPlacement.id}
+          brandName={interstitialPlacement.brandName}
+          brandImageUrl={interstitialPlacement.brandImageUrl}
+          headline={interstitialPlacement.headline}
+          bodyText={interstitialPlacement.bodyText}
+          ctaText={interstitialPlacement.ctaText}
+          ctaUrl={interstitialPlacement.ctaUrl}
+          onImpression={(id, ms) => ImpressionTracker.shared.record(id, ms, 'interstitial', false)}
+          onCtaPress={(id) => ImpressionTracker.shared.record(id, 0, 'interstitial', true)}
+          onDismiss={() => setInterstitialPlacement(null)}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingTop: 60,
+    paddingBottom: 16,
+  },
+  headerLeft: {},
+  headerRight: { flexDirection: 'row', gap: 12 },
+  greeting: { color: Colors.white },
+  squadCount: { color: Colors.gray6, marginTop: 2 },
+  actionIcon: {
+    width: 36, height: 36, borderRadius: 18, borderWidth: 1.5,
+    justifyContent: 'center', alignItems: 'center',
+  },
+  actionIconText: { fontSize: 20, fontWeight: '300', marginTop: -2 },
+  settingsIcon: {
+    width: 36, height: 36, borderRadius: 18,
+    backgroundColor: Colors.gray2, justifyContent: 'center', alignItems: 'center',
+  },
+  settingsIconText: { color: Colors.white, fontSize: 16, fontWeight: '700', marginTop: -4 },
+
+  // Squad circle
+  squadCircleSection: { marginBottom: 16 },
+  squadCircleList: { paddingHorizontal: 24, gap: 16 },
+  squadMember: { alignItems: 'center', width: 64 },
+  squadMemberName: { color: Colors.white, marginTop: 6, textAlign: 'center' },
+
+  // Actions
+  actionRow: { flexDirection: 'row', paddingHorizontal: 24, gap: 12, marginBottom: 24 },
+  actionButton: {
+    flex: 1, height: 72, borderRadius: 12,
+    justifyContent: 'center', alignItems: 'center', gap: 4,
+  },
+  actionButtonIcon: { fontSize: 20, fontWeight: '600' },
+  actionButtonLabel: { color: Colors.white },
+
+  // Sections
+  section: { paddingHorizontal: 24, marginBottom: 16 },
+  sectionTitle: { color: Colors.white, marginBottom: 12 },
+
+  // Feed
+  feedSection: { paddingHorizontal: 24, paddingBottom: 48 },
+
+  // Empty state
+  emptyState: { alignItems: 'center', paddingTop: 48, paddingHorizontal: 24 },
+  emptyEmoji: { fontSize: 48, marginBottom: 16, color: Colors.gray6 },
+  emptyTitle: { color: Colors.white, marginBottom: 8 },
+  emptySubtitle: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  emptyButton: { paddingVertical: 14, paddingHorizontal: 32, borderRadius: 24 },
+  emptyButtonText: { fontSize: 15, fontWeight: '600' },
+});

package/src/screens/home/slivers/SquadCircle.tsx

@@ -0,0 +1,77 @@
+/**
+ * Squad Circle — the circular arrangement of squad members on the home screen.
+ * Ported from squad-demo/src/screens/home/slivers/SquadCircle.tsx + CircleDisplay.tsx.
+ */
+import React, { memo } from 'react';
+import { View, StyleSheet, Pressable, Dimensions } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import UserImage from '../../../components/ux/user-image/UserImage';
+import { BodySmall } from '../../../components/ux/text/Typography';
+import { Colors } from '../../../theme/ThemeContext';
+import type { Connection } from '@squad-sports/core';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const CIRCLE_SIZE = SCREEN_WIDTH * 0.7;
+
+interface SquadCircleProps {
+  connections: Connection[];
+  primaryColor?: string;
+}
+
+function SquadCircle({ connections, primaryColor = Colors.purple1 }: SquadCircleProps) {
+  const navigation = useNavigation();
+  const members = connections.slice(0, 8);
+  const count = members.length;
+
+  if (count === 0) return null;
+
+  const radius = CIRCLE_SIZE / 2 - 32;
+  const centerX = CIRCLE_SIZE / 2;
+  const centerY = CIRCLE_SIZE / 2;
+
+  return (
+    <View style={[styles.container, { width: CIRCLE_SIZE, height: CIRCLE_SIZE }]}>
+      {/* Circle outline */}
+      <View style={[styles.circleOutline, { borderColor: 'rgba(255,255,255,0.05)' }]} />
+
+      {members.map((conn, index) => {
+        const other = conn.recipient ?? conn.creator;
+        const angle = (2 * Math.PI * index) / count - Math.PI / 2;
+        const x = centerX + radius * Math.cos(angle) - 28;
+        const y = centerY + radius * Math.sin(angle) - 28;
+
+        return (
+          <Pressable
+            key={conn.id}
+            style={[styles.member, { left: x, top: y }]}
+            onPress={() => (navigation as any).navigate('Profile', { userId: other?.id ?? conn.id })}
+            accessibilityLabel={`${other?.displayName}'s profile`}
+          >
+            <UserImage
+              imageUrl={other?.imageUrl}
+              displayName={other?.displayName}
+              size={56}
+              borderColor={primaryColor}
+            />
+            <BodySmall style={styles.memberName} numberOfLines={1}>
+              {other?.displayName?.split(' ')[0] ?? ''}
+            </BodySmall>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export default memo(SquadCircle);
+
+const styles = StyleSheet.create({
+  container: { alignSelf: 'center', position: 'relative', marginVertical: 16 },
+  circleOutline: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: CIRCLE_SIZE / 2,
+    borderWidth: 1,
+  },
+  member: { position: 'absolute', alignItems: 'center', width: 64 },
+  memberName: { color: Colors.white, marginTop: 4, textAlign: 'center' },
+});

package/src/screens/invite/InvitationQrCodeScreen.tsx

@@ -0,0 +1,114 @@
+/**
+ * QR code scanner for redeeming invite codes.
+ * Ported from squad-demo/src/screens/InvitationQrCode.tsx.
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Alert } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme, Colors } from '../../theme/ThemeContext';
+import ScreenHeader from '../../components/ux/layout/ScreenHeader';
+import Button from '../../components/ux/buttons/Button';
+import { TitleMedium, BodyRegular, BodySmall } from '../../components/ux/text/Typography';
+
+export function InvitationQrCodeScreen() {
+  const navigation = useNavigation();
+  const apiClient = useApiClient();
+  const { theme } = useTheme();
+  const [scanning, setScanning] = useState(false);
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const requestPermission = async () => {
+      try {
+        const { Camera } = await import('expo-camera');
+        const { status } = await Camera.requestCameraPermissionsAsync();
+        setHasPermission(status === 'granted');
+      } catch {
+        setHasPermission(false);
+      }
+    };
+    requestPermission();
+  }, []);
+
+  const handleBarCodeScanned = useCallback(async (data: string) => {
+    if (scanning) return;
+    setScanning(true);
+
+    try {
+      // Extract invite code from URL or raw code
+      let code = data;
+      if (data.includes('/invite/')) {
+        code = data.split('/invite/').pop() ?? data;
+      }
+
+      const result = await apiClient.redeemInviteCode(code);
+      if (result) {
+        Alert.alert('Success', 'Invite code redeemed!', [
+          { text: 'OK', onPress: () => navigation.goBack() },
+        ]);
+      } else {
+        Alert.alert('Invalid Code', 'This invite code is not valid.');
+        setScanning(false);
+      }
+    } catch {
+      Alert.alert('Error', 'Failed to redeem invite code.');
+      setScanning(false);
+    }
+  }, [scanning, apiClient, navigation]);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.screenBackground }]}>
+      <ScreenHeader title="Scan QR Code" />
+
+      <View style={styles.content}>
+        {hasPermission === false ? (
+          <View style={styles.noPermission}>
+            <BodyRegular style={styles.noPermText}>
+              Camera permission is required to scan QR codes
+            </BodyRegular>
+            <Button
+              style={[styles.settingsBtn, { backgroundColor: theme.buttonColor }]}
+              onPress={() => {
+                const { Linking } = require('react-native');
+                Linking.openSettings();
+              }}
+            >
+              <Text style={[styles.settingsBtnText, { color: theme.buttonText }]}>
+                Open Settings
+              </Text>
+            </Button>
+          </View>
+        ) : (
+          <View style={styles.scanArea}>
+            <View style={styles.scanFrame}>
+              <View style={[styles.cornerTL, { borderColor: theme.buttonColor }]} />
+              <View style={[styles.cornerTR, { borderColor: theme.buttonColor }]} />
+              <View style={[styles.cornerBL, { borderColor: theme.buttonColor }]} />
+              <View style={[styles.cornerBR, { borderColor: theme.buttonColor }]} />
+            </View>
+            <BodySmall style={styles.scanHint}>
+              Point your camera at a Squad QR code
+            </BodySmall>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  noPermission: { alignItems: 'center', padding: 32 },
+  noPermText: { color: Colors.gray6, textAlign: 'center', marginBottom: 16 },
+  settingsBtn: { paddingVertical: 12, paddingHorizontal: 24, borderRadius: 20 },
+  settingsBtnText: { fontWeight: '600' },
+  scanArea: { alignItems: 'center' },
+  scanFrame: { width: 250, height: 250, position: 'relative', marginBottom: 24 },
+  cornerTL: { position: 'absolute', top: 0, left: 0, width: 40, height: 40, borderTopWidth: 3, borderLeftWidth: 3 },
+  cornerTR: { position: 'absolute', top: 0, right: 0, width: 40, height: 40, borderTopWidth: 3, borderRightWidth: 3 },
+  cornerBL: { position: 'absolute', bottom: 0, left: 0, width: 40, height: 40, borderBottomWidth: 3, borderLeftWidth: 3 },
+  cornerBR: { position: 'absolute', bottom: 0, right: 0, width: 40, height: 40, borderBottomWidth: 3, borderRightWidth: 3 },
+  scanHint: { color: Colors.gray6 },
+});