@squad-sports/react-native 1.3.1

package/src/components/message/MessageComponents.tsx

@@ -0,0 +1,143 @@
+/**
+ * Full message component system.
+ * Ported from squad-demo/src/components/message/*.
+ * Components: MessageFeed, FeedMessage, CardMine, CardTheirs, Reaction,
+ *             VoiceReplyOverlay, FeedReactionOverlay, EmptyContent, MessageScreenHeader.
+ */
+import React, { memo, useCallback } from 'react';
+import { View, Text, StyleSheet, FlatList, Pressable } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { AudioPlayerRow } from '../audio/AudioPlayerRow';
+import { BodySmall, BodyRegular } from '../ux/text/Typography';
+
+// --- MessageReaction ---
+export function MessageReaction({
+  emoji, count, isOwn, onPress,
+}: { emoji: string; count: number; isOwn: boolean; onPress?: () => void }) {
+  return (
+    <Pressable style={[styles.reaction, isOwn && styles.reactionOwn]} onPress={onPress}>
+      <Text style={styles.reactionEmoji}>{emoji}</Text>
+      {count > 1 && <BodySmall style={styles.reactionCount}>{count}</BodySmall>}
+    </Pressable>
+  );
+}
+
+// --- FeedMessage ---
+export interface FeedMessageProps {
+  id: string;
+  text?: string;
+  audioUrl?: string;
+  audioDuration?: number;
+  isOwn: boolean;
+  senderName?: string;
+  senderImageUrl?: string;
+  timestamp?: string;
+  reactions?: Array<{ emoji: string; count: number }>;
+  primaryColor?: string;
+  onLongPress?: () => void;
+  onReact?: (emoji: string) => void;
+}
+
+export const FeedMessage = memo(function FeedMessage({
+  text, audioUrl, audioDuration, isOwn, senderName, senderImageUrl,
+  timestamp, reactions, primaryColor = Colors.purple1, onLongPress, onReact,
+}: FeedMessageProps) {
+  const formatTime = (ts?: string) => {
+    if (!ts) return '';
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  return (
+    <View style={[styles.messageRow, isOwn && styles.messageRowOwn]}>
+      {!isOwn && <UserImage imageUrl={senderImageUrl} displayName={senderName} size={32} />}
+      <Pressable
+        style={[styles.bubble, isOwn ? [styles.bubbleOwn, { backgroundColor: primaryColor }] : styles.bubbleOther]}
+        onLongPress={onLongPress}
+      >
+        {text && (
+          <BodyRegular style={[styles.messageText, { color: isOwn ? Colors.gray1 : Colors.white }]}>
+            {text}
+          </BodyRegular>
+        )}
+        {audioUrl && <AudioPlayerRow audioUrl={audioUrl} duration={audioDuration} />}
+        {timestamp && (
+          <BodySmall style={[styles.timestamp, { color: isOwn ? 'rgba(0,0,0,0.4)' : Colors.gray6 }]}>
+            {formatTime(timestamp)}
+          </BodySmall>
+        )}
+      </Pressable>
+      {reactions && reactions.length > 0 && (
+        <View style={styles.reactions}>
+          {reactions.map((r, i) => (
+            <MessageReaction key={i} emoji={r.emoji} count={r.count} isOwn={isOwn} onPress={() => onReact?.(r.emoji)} />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+// --- VoiceReplyOverlay ---
+export function VoiceReplyOverlay({
+  visible, recipientName, onDismiss,
+}: { visible: boolean; recipientName: string; onDismiss: () => void }) {
+  if (!visible) return null;
+  return (
+    <View style={styles.voiceOverlay}>
+      <Text style={styles.voiceOverlayText}>Replying to {recipientName}</Text>
+      <Pressable onPress={onDismiss}><Text style={styles.voiceOverlayDismiss}>x</Text></Pressable>
+    </View>
+  );
+}
+
+// --- EmptyContent ---
+export function EmptyMessageContent({ recipientName }: { recipientName?: string }) {
+  return (
+    <View style={styles.empty}>
+      <Text style={styles.emptyEmoji}>wave</Text>
+      <BodyRegular style={styles.emptyText}>
+        Send {recipientName ?? 'them'} a message to get started
+      </BodyRegular>
+    </View>
+  );
+}
+
+// --- MessageFeed ---
+export function MessageFeed({
+  messages, renderMessage, onEndReached,
+}: { messages: FeedMessageProps[]; renderMessage: (item: FeedMessageProps) => React.ReactNode; onEndReached?: () => void }) {
+  return (
+    <FlatList
+      data={messages}
+      keyExtractor={item => item.id}
+      renderItem={({ item }) => <>{renderMessage(item)}</>}
+      contentContainerStyle={styles.feedList}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.3}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  messageRow: { flexDirection: 'row', alignItems: 'flex-end', gap: 8, maxWidth: '85%', marginBottom: 4 },
+  messageRowOwn: { alignSelf: 'flex-end', flexDirection: 'row-reverse' },
+  bubble: { paddingVertical: 10, paddingHorizontal: 14, borderRadius: 18, maxWidth: '100%' },
+  bubbleOwn: { borderBottomRightRadius: 4 },
+  bubbleOther: { backgroundColor: Colors.gray2, borderBottomLeftRadius: 4 },
+  messageText: { fontSize: 15, lineHeight: 20 },
+  timestamp: { marginTop: 4, textAlign: 'right', fontSize: 11 },
+  reactions: { flexDirection: 'row', gap: 4, marginTop: -4, marginBottom: 4 },
+  reaction: { flexDirection: 'row', alignItems: 'center', backgroundColor: Colors.gray3, borderRadius: 12, paddingVertical: 2, paddingHorizontal: 6 },
+  reactionOwn: {},
+  reactionEmoji: { fontSize: 14 },
+  reactionCount: { color: Colors.gray6, marginLeft: 2 },
+  voiceOverlay: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 12, backgroundColor: Colors.gray2, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: Colors.gray3 },
+  voiceOverlayText: { color: Colors.white, fontSize: 13 },
+  voiceOverlayDismiss: { color: Colors.gray6, fontSize: 18 },
+  empty: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 48 },
+  emptyEmoji: { fontSize: 40, color: Colors.gray6, marginBottom: 12 },
+  emptyText: { color: Colors.gray6, textAlign: 'center' },
+  feedList: { padding: 16, gap: 4 },
+});

package/src/components/poll/PollComponents.tsx

@@ -0,0 +1,226 @@
+/**
+ * Full poll component system.
+ * Ported from squad-demo/src/components/poll/*.
+ * Components: Tag, EmojiReactions, QuestionCardBlur, UserReaction, UserReactionDetailed,
+ *             PollSummationSelector, ReactionList, SquaddyActivePollCard, CardStack, PollCollectionSection.
+ */
+import React, { memo, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, FlatList, Dimensions } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { BodySmall, BodyRegular, TitleSmall, SubtitleSmall } from '../ux/text/Typography';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// --- PollTag ---
+export function PollTag({ label, color = Colors.purple1 }: { label: string; color?: string }) {
+  return (
+    <View style={[styles.tag, { backgroundColor: color }]}>
+      <Text style={styles.tagText}>{label}</Text>
+    </View>
+  );
+}
+
+// --- PollEmojiReactions ---
+export function PollEmojiReactions({
+  reactions, onReact,
+}: { reactions: Array<{ emoji: string; count: number }>; onReact?: (emoji: string) => void }) {
+  return (
+    <View style={styles.emojiRow}>
+      {reactions.map((r, i) => (
+        <Pressable key={i} style={styles.emojiItem} onPress={() => onReact?.(r.emoji)}>
+          <Text style={styles.emojiText}>{r.emoji}</Text>
+          <BodySmall style={styles.emojiCount}>{r.count}</BodySmall>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+// --- UserReaction ---
+export function PollUserReaction({ userName, userImageUrl, emoji, responseText }: {
+  userName: string; userImageUrl?: string; emoji?: string; responseText?: string;
+}) {
+  return (
+    <View style={styles.userRow}>
+      <UserImage imageUrl={userImageUrl} displayName={userName} size={36} />
+      <View style={styles.userRowText}>
+        <BodyRegular style={styles.userName}>{userName}</BodyRegular>
+        {responseText && <BodySmall style={styles.responseText}>{responseText}</BodySmall>}
+      </View>
+      {emoji && <Text style={styles.userEmoji}>{emoji}</Text>}
+    </View>
+  );
+}
+
+// --- QuestionCardBlur (preview card that's blurred until answered) ---
+export function QuestionCardBlur({ question, isAnswered, children }: {
+  question: string; isAnswered: boolean; children: React.ReactNode;
+}) {
+  return (
+    <View style={styles.questionCard}>
+      <TitleSmall style={styles.questionText}>{question}</TitleSmall>
+      <View style={[styles.questionContent, !isAnswered && styles.questionBlur]}>
+        {children}
+      </View>
+      {!isAnswered && (
+        <View style={styles.blurOverlay}>
+          <BodyRegular style={styles.blurText}>Answer to see results</BodyRegular>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// --- SquaddyActivePollCard ---
+export interface SquaddyActivePollCardProps {
+  id: string;
+  question: string;
+  options: Array<{ id: string; text: string; percentage?: number }>;
+  hasVoted: boolean;
+  selectedOptionId?: string;
+  totalVotes?: number;
+  primaryColor?: string;
+  onVote?: (optionId: string) => void;
+  onPress?: () => void;
+}
+
+export const SquaddyActivePollCard = memo(function SquaddyActivePollCard({
+  question, options, hasVoted, selectedOptionId, totalVotes, primaryColor = Colors.purple1, onVote, onPress,
+}: SquaddyActivePollCardProps) {
+  return (
+    <Pressable style={styles.pollCard} onPress={onPress}>
+      <TitleSmall style={styles.pollQuestion}>{question}</TitleSmall>
+      <View style={styles.pollOptions}>
+        {options.map(opt => {
+          const isSelected = selectedOptionId === opt.id;
+          return (
+            <Pressable
+              key={opt.id}
+              style={[styles.pollOption, isSelected && { borderColor: primaryColor }, hasVoted && styles.pollOptionVoted]}
+              onPress={() => !hasVoted && onVote?.(opt.id)}
+              disabled={hasVoted}
+            >
+              <BodyRegular style={[styles.pollOptionText, isSelected && { color: primaryColor }]}>{opt.text}</BodyRegular>
+              {hasVoted && opt.percentage !== undefined && (
+                <>
+                  <BodySmall style={styles.pollPercentage}>{Math.round(opt.percentage)}%</BodySmall>
+                  <View style={styles.pollProgressBg}>
+                    <View style={[styles.pollProgressFill, { width: `${opt.percentage}%`, backgroundColor: isSelected ? primaryColor : Colors.gray5 }]} />
+                  </View>
+                </>
+              )}
+            </Pressable>
+          );
+        })}
+      </View>
+      {totalVotes !== undefined && (
+        <BodySmall style={styles.pollTotal}>{totalVotes} {totalVotes === 1 ? 'vote' : 'votes'}</BodySmall>
+      )}
+    </Pressable>
+  );
+});
+
+// --- PollCollectionSection (group of poll cards) ---
+export function PollCollectionSection({
+  title, polls, primaryColor, onPollPress,
+}: { title?: string; polls: SquaddyActivePollCardProps[]; primaryColor?: string; onPollPress?: (pollId: string) => void }) {
+  if (polls.length === 0) return null;
+
+  return (
+    <View>
+      {title && <TitleSmall style={styles.collectionTitle}>{title}</TitleSmall>}
+      {polls.map(poll => (
+        <SquaddyActivePollCard
+          key={poll.id}
+          {...poll}
+          primaryColor={primaryColor}
+          onPress={() => onPollPress?.(poll.id)}
+        />
+      ))}
+    </View>
+  );
+}
+
+// --- CardStack (stacked poll cards with peek) ---
+export function PollCardStack({ polls, primaryColor }: { polls: SquaddyActivePollCardProps[]; primaryColor?: string }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  if (polls.length === 0) return null;
+  const current = polls[currentIndex];
+  if (!current) return null;
+
+  return (
+    <View style={styles.stack}>
+      <SquaddyActivePollCard {...current} primaryColor={primaryColor} />
+      {polls.length > 1 && (
+        <BodySmall style={styles.stackCount}>{currentIndex + 1} / {polls.length}</BodySmall>
+      )}
+    </View>
+  );
+}
+
+// --- PollSummationSelector ---
+export function PollSummationSelector({
+  communities, selectedCommunity, onSelect,
+}: { communities: string[]; selectedCommunity: string; onSelect: (community: string) => void }) {
+  return (
+    <View style={styles.summationSelector}>
+      {communities.map(c => (
+        <Pressable key={c} style={[styles.summationItem, c === selectedCommunity && styles.summationItemActive]} onPress={() => onSelect(c)}>
+          <BodySmall style={[styles.summationText, c === selectedCommunity && styles.summationTextActive]}>{c}</BodySmall>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+// --- ReactionList ---
+export function PollReactionList({
+  reactions,
+}: { reactions: Array<{ userName: string; userImageUrl?: string; emoji: string; responseText?: string }> }) {
+  return (
+    <FlatList
+      data={reactions}
+      keyExtractor={(_, i) => String(i)}
+      renderItem={({ item }) => <PollUserReaction {...item} />}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  tag: { borderRadius: 10, paddingHorizontal: 8, paddingVertical: 2 },
+  tagText: { color: Colors.white, fontSize: 10, fontWeight: '700' },
+  emojiRow: { flexDirection: 'row', gap: 8, paddingVertical: 8 },
+  emojiItem: { flexDirection: 'row', alignItems: 'center', gap: 4, backgroundColor: Colors.gray3, borderRadius: 16, paddingVertical: 4, paddingHorizontal: 8 },
+  emojiText: { fontSize: 16 },
+  emojiCount: { color: Colors.gray6 },
+  userRow: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingVertical: 10, paddingHorizontal: 16, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  userRowText: { flex: 1 },
+  userName: { color: Colors.white },
+  responseText: { color: Colors.gray6 },
+  userEmoji: { fontSize: 20 },
+  questionCard: { backgroundColor: Colors.gray2, borderRadius: 16, padding: 16, marginBottom: 12, overflow: 'hidden' },
+  questionText: { color: Colors.white, marginBottom: 12 },
+  questionContent: {},
+  questionBlur: { opacity: 0.15 },
+  blurOverlay: { ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center' },
+  blurText: { color: Colors.white, fontWeight: '600' },
+  pollCard: { backgroundColor: Colors.gray2, borderRadius: 16, padding: 16, marginBottom: 12 },
+  pollQuestion: { color: Colors.white, marginBottom: 12 },
+  pollOptions: { gap: 8 },
+  pollOption: { padding: 14, backgroundColor: Colors.gray3, borderRadius: 12, borderWidth: 2, borderColor: 'transparent' },
+  pollOptionVoted: {},
+  pollOptionText: { color: Colors.white },
+  pollPercentage: { color: Colors.gray6, marginTop: 4, fontWeight: '600' },
+  pollProgressBg: { height: 4, backgroundColor: Colors.gray5, borderRadius: 2, marginTop: 6, overflow: 'hidden' },
+  pollProgressFill: { height: '100%', borderRadius: 2 },
+  pollTotal: { color: Colors.gray6, textAlign: 'center', marginTop: 12 },
+  collectionTitle: { color: Colors.white, paddingHorizontal: 24, marginBottom: 8 },
+  stack: { alignItems: 'center' },
+  stackCount: { color: Colors.gray6, marginTop: 8 },
+  summationSelector: { flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingVertical: 8 },
+  summationItem: { paddingVertical: 6, paddingHorizontal: 14, borderRadius: 16, backgroundColor: Colors.gray3 },
+  summationItemActive: { backgroundColor: Colors.purple1 },
+  summationText: { color: Colors.gray6, fontSize: 13 },
+  summationTextActive: { color: Colors.gray1, fontWeight: '500' },
+});

package/src/components/sentinels/Sentinels.tsx

@@ -0,0 +1,175 @@
+/**
+ * Sentinel components — auto-running side effects.
+ * Ported from squad-demo/src/components/sentinels/*.
+ * 12 sentinels: CommunitiesLoader, AuthChanged, NotificationHandler,
+ *               UserDataLoader, CommunityThemeSyncer, StateIntegritySentinel,
+ *               CustomerJourneySentinel, CountSessions, UpdateDeviceInfo, etc.
+ */
+import React, { useEffect, useCallback } from 'react';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { useApiClient } from '../../SquadProvider';
+import { useTheme } from '../../theme/ThemeContext';
+import { reAllCommunities } from '../../state/communities';
+import { reActiveAccessToken, reActiveUserId } from '../../state/session';
+import { reUserCache, reLoggedInUserLoaded } from '../../state/user';
+import { sessionCount } from '../../state/features';
+import { reDeviceInfo } from '../../state/device-info';
+import { EventProcessor } from '../../realtime/EventProcessor';
+
+// --- CommunitiesLoader ---
+export function CommunitiesLoader() {
+  const apiClient = useApiClient();
+  const setCommunities = useSetRecoilState(reAllCommunities);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const result = await apiClient.fetchAllCommunities();
+        if (result?.communities) {
+          setCommunities(result.communities as any[]);
+        }
+      } catch {}
+    };
+    load();
+  }, [apiClient, setCommunities]);
+
+  return null;
+}
+
+// --- UserDataLoader ---
+export function UserDataLoader() {
+  const apiClient = useApiClient();
+  const token = useRecoilValue(reActiveAccessToken);
+  const setUserCache = useSetRecoilState(reUserCache);
+  const setUserLoaded = useSetRecoilState(reLoggedInUserLoaded);
+
+  useEffect(() => {
+    if (!token) return;
+    const load = async () => {
+      try {
+        const user = await apiClient.getLoggedInUser();
+        if (user) {
+          setUserCache(user as any);
+          setUserLoaded(true);
+        }
+      } catch {}
+    };
+    load();
+  }, [token, apiClient, setUserCache, setUserLoaded]);
+
+  return null;
+}
+
+// --- AuthChanged ---
+export function AuthChangedSentinel() {
+  const token = useRecoilValue(reActiveAccessToken);
+
+  useEffect(() => {
+    const processor = EventProcessor.shared;
+    if (token) {
+      processor.setShouldAllowEvents(true);
+      processor.connect();
+    } else {
+      processor.setShouldAllowEvents(false);
+      processor.disconnect();
+    }
+  }, [token]);
+
+  return null;
+}
+
+// --- CommunityThemeSyncer ---
+export function CommunityThemeSyncer() {
+  const user = useRecoilValue(reUserCache) as any;
+  const communities = useRecoilValue(reAllCommunities) as any[];
+  const { switchTheme } = useTheme();
+
+  useEffect(() => {
+    if (!user?.community || communities.length === 0) return;
+    const community = communities.find((c: any) => c.id === user.community || c.name === user.community);
+    if (community?.color) {
+      const { buildCommunityTheme } = require('../../theme/ThemeContext');
+      switchTheme(buildCommunityTheme(community.color, community.secondaryColor));
+    }
+  }, [user?.community, communities, switchTheme]);
+
+  return null;
+}
+
+// --- CountSessions ---
+export function CountSessionsSentinel() {
+  const setSessionCount = useSetRecoilState(sessionCount);
+
+  useEffect(() => {
+    setSessionCount(prev => prev + 1);
+  }, [setSessionCount]);
+
+  return null;
+}
+
+// --- UpdateDeviceInfo ---
+export function UpdateDeviceInfoSentinel() {
+  const apiClient = useApiClient();
+  const token = useRecoilValue(reActiveAccessToken);
+  const setDeviceInfo = useSetRecoilState(reDeviceInfo);
+
+  useEffect(() => {
+    if (!token) return;
+    const update = async () => {
+      try {
+        const { Platform } = require('react-native');
+        const Constants = (await import('expo-constants')).default;
+        const Device = (await import('expo-device')).default;
+
+        const info = {
+          platform: Platform.OS,
+          osVersion: Platform.Version?.toString() ?? '',
+          appVersion: Constants.expoConfig?.version ?? '0.1.0',
+          deviceModel: Device?.modelName ?? '',
+          pushToken: null,
+        };
+
+        setDeviceInfo(info);
+
+        // Send to API
+        const { DeviceInfo } = await import('@squad-sports/core');
+        await apiClient.updateDeviceInfo(new DeviceInfo(info));
+      } catch {}
+    };
+    update();
+  }, [token, apiClient, setDeviceInfo]);
+
+  return null;
+}
+
+// --- StateIntegritySentinel ---
+export function StateIntegritySentinel() {
+  const token = useRecoilValue(reActiveAccessToken);
+  const userId = useRecoilValue(reActiveUserId);
+
+  useEffect(() => {
+    // Validate state integrity — if we have a token but no userId, something is wrong
+    if (token && !userId) {
+      console.warn('[StateIntegrity] Token exists but no userId — state may be corrupted');
+    }
+  }, [token, userId]);
+
+  return null;
+}
+
+/**
+ * All sentinels combined for easy inclusion in the provider chain.
+ */
+export function AllSentinels() {
+  return (
+    <>
+      <CommunitiesLoader />
+      <UserDataLoader />
+      <AuthChangedSentinel />
+      <CommunityThemeSyncer />
+      <CountSessionsSentinel />
+      <UpdateDeviceInfoSentinel />
+      <StateIntegritySentinel />
+    </>
+  );
+}

package/src/components/squad/FeedSquad.tsx

@@ -0,0 +1,54 @@
+/**
+ * FeedSquad component — squad circle display for the home feed.
+ * Ported from squad-demo/src/components/squad/FeedSquad.tsx.
+ */
+import React, { memo } from 'react';
+import { View, StyleSheet, FlatList, Pressable } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import UserImage from '../ux/user-image/UserImage';
+import { BodySmall } from '../ux/text/Typography';
+
+interface SquadMember {
+  id: string;
+  displayName?: string;
+  imageUrl?: string;
+}
+
+interface FeedSquadProps {
+  members: SquadMember[];
+  onMemberPress: (userId: string) => void;
+  primaryColor?: string;
+}
+
+function FeedSquad({ members, onMemberPress, primaryColor = Colors.purple1 }: FeedSquadProps) {
+  return (
+    <FlatList
+      data={members}
+      keyExtractor={item => item.id}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.list}
+      renderItem={({ item }) => (
+        <Pressable style={styles.member} onPress={() => onMemberPress(item.id)} accessibilityLabel={`${item.displayName}'s profile`}>
+          <UserImage
+            imageUrl={item.imageUrl}
+            displayName={item.displayName}
+            size={56}
+            borderColor={primaryColor}
+          />
+          <BodySmall style={styles.memberName} numberOfLines={1}>
+            {item.displayName?.split(' ')[0] ?? ''}
+          </BodySmall>
+        </Pressable>
+      )}
+    />
+  );
+}
+
+export default memo(FeedSquad);
+
+const styles = StyleSheet.create({
+  list: { paddingHorizontal: 24, gap: 16 },
+  member: { alignItems: 'center', width: 64 },
+  memberName: { color: Colors.white, marginTop: 6, textAlign: 'center' },
+});

package/src/components/toasts/Toasts.tsx

@@ -0,0 +1,88 @@
+/**
+ * Toast components.
+ * Ported from squad-demo/src/components/toasts/*.
+ */
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet, Text, View, Pressable, ActivityIndicator } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+
+// --- SuccessToast ---
+export function SuccessToast({ message, visible, onDismiss }: { message: string; visible: boolean; onDismiss?: () => void }) {
+  return <ToastBase type="success" message={message} visible={visible} onDismiss={onDismiss} />;
+}
+
+// --- ErrorToast ---
+export function ErrorToast({ message, visible, onDismiss }: { message: string; visible: boolean; onDismiss?: () => void }) {
+  return <ToastBase type="error" message={message} visible={visible} onDismiss={onDismiss} />;
+}
+
+// --- BusyToast ---
+export function BusyToast({ message, visible }: { message: string; visible: boolean }) {
+  if (!visible) return null;
+  return (
+    <Animated.View style={styles.toast}>
+      <ActivityIndicator size="small" color={Colors.white} />
+      <Text style={styles.toastText}>{message}</Text>
+    </Animated.View>
+  );
+}
+
+// --- Base Toast ---
+function ToastBase({ type, message, visible, onDismiss, duration = 3000 }: {
+  type: 'success' | 'error' | 'info'; message: string; visible: boolean; onDismiss?: () => void; duration?: number;
+}) {
+  const [fadeAnim] = useState(new Animated.Value(0));
+  const [shouldRender, setShouldRender] = useState(false);
+
+  const indicatorColor = type === 'success' ? Colors.green : type === 'error' ? Colors.red : Colors.purple1;
+
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true);
+      Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }).start();
+      if (duration > 0) {
+        const t = setTimeout(() => {
+          Animated.timing(fadeAnim, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+            setShouldRender(false);
+            onDismiss?.();
+          });
+        }, duration);
+        return () => clearTimeout(t);
+      }
+    } else {
+      Animated.timing(fadeAnim, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => setShouldRender(false));
+    }
+  }, [visible]);
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View style={[styles.toast, { opacity: fadeAnim }]}>
+      <View style={[styles.indicator, { backgroundColor: indicatorColor }]} />
+      <Text style={styles.toastText} numberOfLines={2}>{message}</Text>
+      <Pressable onPress={onDismiss}><Text style={styles.dismiss}>x</Text></Pressable>
+    </Animated.View>
+  );
+}
+
+// --- ToastWrapper (renders from modal queue) ---
+export function ToastWrapper({ toast, onDismiss }: {
+  toast: { type: string; message: string } | null; onDismiss: () => void;
+}) {
+  if (!toast) return null;
+  return <ToastBase type={toast.type as any} message={toast.message} visible={true} onDismiss={onDismiss} />;
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: 'absolute', top: 60, left: 16, right: 16,
+    backgroundColor: Colors.gray2, borderRadius: 12,
+    flexDirection: 'row', alignItems: 'center',
+    paddingVertical: 12, paddingHorizontal: 16,
+    zIndex: 10000, shadowColor: '#000', shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3, shadowRadius: 8, elevation: 8,
+  },
+  indicator: { width: 4, height: 24, borderRadius: 2, marginRight: 12 },
+  toastText: { flex: 1, color: Colors.white, fontSize: 14 },
+  dismiss: { color: Colors.gray6, fontSize: 18, paddingLeft: 12 },
+});