@squad-sports/react-native 1.3.1

package/src/components/ux/layout/AvoidKeyboardScreen.tsx

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface AvoidKeyboardScreenProps {
+  children: ReactNode;
+  screenStyle?: StyleProp<ViewStyle>;
+  scrollEnabled?: boolean;
+}
+
+export default function AvoidKeyboardScreen({
+  children,
+  screenStyle,
+  scrollEnabled = false,
+}: AvoidKeyboardScreenProps) {
+  return (
+    <SafeAreaView style={[styles.container, screenStyle]}>
+      <KeyboardAvoidingView
+        style={styles.keyboardView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+      >
+        {scrollEnabled ? (
+          <ScrollView
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+            bounces={false}
+          >
+            {children}
+          </ScrollView>
+        ) : (
+          children
+        )}
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.black,
+  },
+  keyboardView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+});

package/src/components/ux/layout/BlurOverlay.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+interface BlurOverlayProps {
+  visible: boolean;
+  children?: React.ReactNode;
+}
+
+export default function BlurOverlay({ visible, children }: BlurOverlayProps) {
+  if (!visible) return null;
+  return (
+    <View style={styles.overlay}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9998,
+  },
+});

package/src/components/ux/layout/CrossFade.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+interface CrossFadeProps {
+  children: React.ReactNode;
+  visible: boolean;
+  duration?: number;
+}
+
+export default function CrossFade({ children, visible, duration = 300 }: CrossFadeProps) {
+  const opacity = useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration,
+      useNativeDriver: true,
+    }).start();
+  }, [visible, duration, opacity]);
+
+  return (
+    <Animated.View style={[styles.container, { opacity }]} pointerEvents={visible ? 'auto' : 'none'}>
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { ...StyleSheet.absoluteFillObject },
+});

package/src/components/ux/layout/DismissKeyboardOnBlur.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Keyboard, Pressable, StyleSheet } from 'react-native';
+
+export default function DismissKeyboardOnBlur({ children }: { children: React.ReactNode }) {
+  return (
+    <Pressable style={styles.container} onPress={Keyboard.dismiss}>
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});

package/src/components/ux/layout/LoadingOverlay.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { ActivityIndicator, StyleSheet, Animated, Text } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface LoadingOverlayProps {
+  visible: boolean;
+  text?: string;
+}
+
+export default function LoadingOverlay({ visible, text }: LoadingOverlayProps) {
+  const [fadeAnim] = useState(new Animated.Value(0));
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true);
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 600,
+        useNativeDriver: true,
+      }).start(() => {
+        setShouldRender(false);
+      });
+    }
+  }, [visible, fadeAnim]);
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+      <ActivityIndicator size="large" color={Colors.white} />
+      {text && <Text style={styles.text}>{text}</Text>}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 9999,
+  },
+  text: {
+    color: Colors.white,
+    marginTop: 16,
+    fontSize: 14,
+  },
+});

package/src/components/ux/layout/NetworkBanner.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet, Text } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface NetworkBannerProps {
+  isOnline: boolean;
+}
+
+/**
+ * Animated banner that slides down when the device goes offline.
+ * Automatically wired into SquadProvider — integrators don't need to add this.
+ */
+export function NetworkBanner({ isOnline }: NetworkBannerProps) {
+  const [slideAnim] = useState(new Animated.Value(-50));
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (!isOnline) {
+      setShouldRender(true);
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 10,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: -50,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => setShouldRender(false));
+    }
+  }, [isOnline, slideAnim]);
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View
+      style={[styles.banner, { transform: [{ translateY: slideAnim }] }]}
+    >
+      <Text style={styles.text}>No internet connection</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  banner: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: Colors.orange2,
+    paddingTop: 50,
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    zIndex: 9998,
+    alignItems: 'center',
+  },
+  text: {
+    color: Colors.white,
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});

package/src/components/ux/layout/PermissionsCTAContent.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View, Text, StyleSheet, Linking } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+import Button from '../buttons/Button';
+import { TitleSmall, BodyRegular } from '../text/Typography';
+
+interface PermissionsCTAContentProps {
+  icon?: string;
+  title: string;
+  description: string;
+  buttonLabel?: string;
+  onAllow?: () => void;
+  isDenied?: boolean;
+}
+
+export default function PermissionsCTAContent({
+  icon,
+  title,
+  description,
+  buttonLabel = 'Allow',
+  onAllow,
+  isDenied = false,
+}: PermissionsCTAContentProps) {
+  return (
+    <View style={styles.container}>
+      {icon && (
+        <View style={styles.iconContainer}>
+          <Text style={styles.icon}>{icon}</Text>
+        </View>
+      )}
+      <TitleSmall style={styles.title}>{title}</TitleSmall>
+      <BodyRegular style={styles.description}>{description}</BodyRegular>
+      <Button
+        style={styles.button}
+        onPress={isDenied ? () => Linking.openSettings() : onAllow}
+        accessibilityLabel={isDenied ? 'Open Settings' : buttonLabel}
+      >
+        <Text style={styles.buttonText}>
+          {isDenied ? 'Open Settings' : buttonLabel}
+        </Text>
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 32 },
+  iconContainer: { width: 64, height: 64, borderRadius: 32, backgroundColor: Colors.purple1, justifyContent: 'center', alignItems: 'center', marginBottom: 20 },
+  icon: { color: Colors.white, fontSize: 28, fontWeight: '700' },
+  title: { color: Colors.white, marginBottom: 8, textAlign: 'center' },
+  description: { color: Colors.gray6, textAlign: 'center', marginBottom: 24 },
+  button: { paddingVertical: 14, paddingHorizontal: 32, borderRadius: 24, backgroundColor: Colors.purple1 },
+  buttonText: { color: Colors.gray1, fontWeight: '600', fontSize: 15 },
+});

package/src/components/ux/layout/RefreshControl.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RefreshControl as RNRefreshControl, type RefreshControlProps } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+export default function RefreshControl(props: RefreshControlProps) {
+  return <RNRefreshControl tintColor={Colors.white} colors={[Colors.purple1]} {...props} />;
+}

package/src/components/ux/layout/Screen.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode, useMemo, memo } from 'react';
+import { StyleSheet, ViewStyle, Dimensions } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTheme } from '../../../theme/ThemeContext';
+
+const { width, height } = Dimensions.get('window');
+
+function Screen({ children, style }: { children: ReactNode; style?: ViewStyle }) {
+  const { theme } = useTheme();
+
+  const screenStyle = useMemo(
+    () => [
+      styles.screen,
+      style,
+      { backgroundColor: theme.screenBackground },
+    ],
+    [style, theme.screenBackground],
+  );
+
+  return <SafeAreaView style={screenStyle}>{children}</SafeAreaView>;
+}
+
+export default memo(Screen);
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    width,
+    height,
+  },
+});

package/src/components/ux/layout/ScreenHeader.tsx

@@ -0,0 +1,89 @@
+import React, { ReactNode } from 'react';
+import { StyleSheet, View, Text, Pressable, Dimensions } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme, Colors } from '../../../theme/ThemeContext';
+
+const { width } = Dimensions.get('window');
+
+interface ScreenHeaderProps {
+  right?: ReactNode;
+  title: string;
+  showBack?: boolean;
+  onBack?: () => void;
+}
+
+export default function ScreenHeader({
+  right,
+  title,
+  showBack = true,
+  onBack,
+}: ScreenHeaderProps) {
+  const { theme } = useTheme();
+  const navigation = useNavigation();
+
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const textColor = theme.isDarkMode ? Colors.white : Colors.gray1;
+
+  return (
+    <View style={styles.screenHeader} accessibilityRole="header">
+      <View style={styles.sideContainer}>
+        {showBack && (
+          <Pressable
+            onPress={handleBack}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel="Go back"
+          >
+            <Text style={[styles.backText, { color: textColor }]}>{'<'}</Text>
+          </Pressable>
+        )}
+      </View>
+      <View style={styles.titleContainer}>
+        <Text
+          style={[styles.screenHeaderText, { color: textColor }]}
+          numberOfLines={1}
+          accessibilityRole="header"
+        >
+          {title}
+        </Text>
+      </View>
+      <View style={styles.sideContainer}>{right}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screenHeader: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    height: 56,
+    paddingHorizontal: 16,
+    width,
+  },
+  sideContainer: {
+    width: 40,
+    alignItems: 'center',
+  },
+  titleContainer: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  screenHeaderText: {
+    textAlign: 'center',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  backText: {
+    fontSize: 22,
+    fontWeight: '600',
+  },
+});

package/src/components/ux/layout/TabBar.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface TabBarProps {
+  tabs: Array<{ key: string; label: string }>;
+  activeTab: string;
+  onTabPress: (key: string) => void;
+  activeColor?: string;
+}
+
+export default function TabBar({ tabs, activeTab, onTabPress, activeColor = Colors.purple1 }: TabBarProps) {
+  return (
+    <View style={styles.container} accessibilityRole="tablist">
+      {tabs.map(tab => {
+        const isActive = tab.key === activeTab;
+        return (
+          <Pressable
+            key={tab.key}
+            style={[styles.tab, isActive && { borderBottomColor: activeColor }]}
+            onPress={() => onTabPress(tab.key)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isActive }}
+          >
+            <Text style={[styles.tabText, isActive && { color: Colors.white }]}>
+              {tab.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  tab: { flex: 1, paddingVertical: 12, alignItems: 'center', borderBottomWidth: 2, borderBottomColor: 'transparent' },
+  tabText: { color: Colors.gray6, fontSize: 14, fontWeight: '500' },
+});

package/src/components/ux/layout/Toast.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+import Button from '../buttons/Button';
+
+export type ToastType = 'success' | 'error' | 'info';
+
+interface ToastProps {
+  visible: boolean;
+  message: string;
+  type?: ToastType;
+  duration?: number;
+  onDismiss?: () => void;
+}
+
+const TOAST_COLORS: Record<ToastType, string> = {
+  success: Colors.green,
+  error: Colors.red,
+  info: Colors.purple1,
+};
+
+export function Toast({
+  visible,
+  message,
+  type = 'info',
+  duration = 3000,
+  onDismiss,
+}: ToastProps) {
+  const [fadeAnim] = useState(new Animated.Value(0));
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true);
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+
+      if (duration > 0) {
+        const timer = setTimeout(() => {
+          Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+          }).start(() => {
+            setShouldRender(false);
+            onDismiss?.();
+          });
+        }, duration);
+        return () => clearTimeout(timer);
+      }
+    } else {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => setShouldRender(false));
+    }
+  }, [visible, duration, fadeAnim, onDismiss]);
+
+  if (!shouldRender) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { opacity: fadeAnim, transform: [{ translateY: fadeAnim.interpolate({ inputRange: [0, 1], outputRange: [-20, 0] }) }] },
+      ]}
+    >
+      <View style={[styles.indicator, { backgroundColor: TOAST_COLORS[type] }]} />
+      <Text style={styles.message} numberOfLines={2}>{message}</Text>
+      <Button onPress={onDismiss}>
+        <Text style={styles.dismiss}>x</Text>
+      </Button>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    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,
+  },
+  message: {
+    flex: 1,
+    color: Colors.white,
+    fontSize: 14,
+  },
+  dismiss: {
+    color: Colors.gray6,
+    fontSize: 18,
+    paddingLeft: 12,
+  },
+});

package/src/components/ux/layout/TransparentOverlay.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+
+interface TransparentOverlayProps {
+  visible: boolean;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+export default function TransparentOverlay({ visible, onPress, children }: TransparentOverlayProps) {
+  if (!visible) return null;
+  return (
+    <Pressable style={styles.overlay} onPress={onPress}>
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: { ...StyleSheet.absoluteFillObject, zIndex: 9997 },
+});

package/src/components/ux/navigation/BackButton.tsx

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useTheme, Colors } from '../../../theme/ThemeContext';
+import Button from '../buttons/Button';
+
+export default function BackButton() {
+  const navigation = useNavigation();
+  const { theme } = useTheme();
+  const handlePress = useCallback(() => navigation.goBack(), [navigation]);
+
+  const color = theme.isDarkMode ? Colors.white : Colors.gray1;
+
+  return (
+    <Button onPress={handlePress} style={styles.button}>
+      <Text style={[styles.chevron, { color }]}>{'<'}</Text>
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 4,
+  },
+  chevron: {
+    fontSize: 22,
+    fontWeight: '600',
+  },
+});

package/src/components/ux/navigation/LinkButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Button from '../buttons/Button';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface LinkButtonProps {
+  screen: string;
+  params?: Record<string, unknown>;
+  children: React.ReactNode;
+  style?: object;
+}
+
+export default function LinkButton({ screen, params, children, style }: LinkButtonProps) {
+  const navigation = useNavigation();
+  return (
+    <Button onPress={() => (navigation as any).navigate(screen, params)} style={style} accessibilityRole="link">
+      {children}
+    </Button>
+  );
+}