@squad-sports/react-native 1.3.1

package/src/components/ux/RootUXComponents.tsx

@@ -0,0 +1,157 @@
+/**
+ * Root-level UX components from squad-demo/src/components/ux/.
+ * Ported: ToolTip, TopToast, TopDialog, TopBottomSheet, SettingsCaret,
+ *         UserLabelTag, UserImageBorder, QrCode, QrScan, WaitForLoadable,
+ *         OfflineBanner, HexagonImageMask, UserImageWithCommunityTag.
+ */
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, Pressable, Animated, Dimensions } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+
+// --- ToolTip ---
+export function ToolTip({ text, visible, onDismiss, position = 'bottom' }: {
+  text: string; visible: boolean; onDismiss?: () => void; position?: 'top' | 'bottom';
+}) {
+  if (!visible) return null;
+  return (
+    <Pressable style={[styles.tooltip, position === 'top' ? styles.tooltipTop : styles.tooltipBottom]} onPress={onDismiss}>
+      <Text style={styles.tooltipText}>{text}</Text>
+      <View style={[styles.tooltipArrow, position === 'top' ? styles.arrowBottom : styles.arrowTop]} />
+    </Pressable>
+  );
+}
+
+// --- TopToast ---
+export function TopToast({ visible, message, onDismiss }: { visible: boolean; message: string; onDismiss?: () => void }) {
+  const [anim] = useState(new Animated.Value(visible ? 1 : 0));
+  useEffect(() => {
+    Animated.timing(anim, { toValue: visible ? 1 : 0, duration: 300, useNativeDriver: true }).start();
+    if (visible) { const t = setTimeout(() => onDismiss?.(), 3000); return () => clearTimeout(t); }
+  }, [visible]);
+  if (!visible) return null;
+  return (
+    <Animated.View style={[styles.topToast, { opacity: anim }]}>
+      <Text style={styles.topToastText}>{message}</Text>
+    </Animated.View>
+  );
+}
+
+// --- TopDialog ---
+export function TopDialog({ visible, title, message, onConfirm, onCancel }: {
+  visible: boolean; title: string; message: string; onConfirm: () => void; onCancel: () => void;
+}) {
+  if (!visible) return null;
+  return (
+    <View style={styles.dialogOverlay}>
+      <View style={styles.dialogBox}>
+        <Text style={styles.dialogTitle}>{title}</Text>
+        <Text style={styles.dialogMessage}>{message}</Text>
+        <View style={styles.dialogButtons}>
+          <Pressable style={styles.dialogButton} onPress={onCancel}><Text style={styles.dialogButtonText}>Cancel</Text></Pressable>
+          <Pressable style={[styles.dialogButton, styles.dialogButtonPrimary]} onPress={onConfirm}><Text style={styles.dialogButtonTextPrimary}>Confirm</Text></Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// --- SettingsCaret ---
+export function SettingsCaret() {
+  return <Text style={styles.caret}>{'>'}</Text>;
+}
+
+// --- UserLabelTag ---
+export function UserLabelTag({ label, color = Colors.purple1 }: { label: string; color?: string }) {
+  return (
+    <View style={[styles.labelTag, { backgroundColor: color }]}>
+      <Text style={styles.labelTagText}>{label}</Text>
+    </View>
+  );
+}
+
+// --- UserImageBorder ---
+export function UserImageBorder({ color = Colors.purple1, size = 52, children }: { color?: string; size?: number; children: React.ReactNode }) {
+  return (
+    <View style={[styles.imageBorder, { width: size, height: size, borderRadius: size / 2, borderColor: color }]}>
+      {children}
+    </View>
+  );
+}
+
+// --- WaitForLoadable ---
+export function WaitForLoadable({ loadable, fallback, children }: {
+  loadable: { state: string; contents: unknown }; fallback: React.ReactNode; children: (data: unknown) => React.ReactNode;
+}) {
+  if (loadable.state === 'hasValue') return <>{children(loadable.contents)}</>;
+  if (loadable.state === 'hasError') return null;
+  return <>{fallback}</>;
+}
+
+// --- OfflineBanner ---
+export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
+  if (isOnline) return null;
+  return (
+    <View style={styles.offlineBanner}><Text style={styles.offlineBannerText}>No internet connection</Text></View>
+  );
+}
+
+// --- UserImageWithCommunityTag ---
+export function UserImageWithCommunityTag({ imageUrl, displayName, communityName, communityColor, size = 48 }: {
+  imageUrl?: string; displayName?: string; communityName?: string; communityColor?: string; size?: number;
+}) {
+  const UserImage = require('./user-image/UserImage').default;
+  return (
+    <View>
+      <UserImage imageUrl={imageUrl} displayName={displayName} size={size} />
+      {communityName && (
+        <View style={[styles.communityTag, { backgroundColor: communityColor ?? Colors.purple1 }]}>
+          <Text style={styles.communityTagText}>{communityName.substring(0, 3).toUpperCase()}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // ToolTip
+  tooltip: { position: 'absolute', backgroundColor: Colors.gray2, borderRadius: 8, padding: 12, maxWidth: 250, zIndex: 100, shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 8 },
+  tooltipTop: { top: -60 },
+  tooltipBottom: { bottom: -60 },
+  tooltipText: { color: Colors.white, fontSize: 13 },
+  tooltipArrow: { position: 'absolute', width: 12, height: 12, backgroundColor: Colors.gray2, transform: [{ rotate: '45deg' }], alignSelf: 'center' },
+  arrowTop: { top: -6 },
+  arrowBottom: { bottom: -6 },
+
+  // TopToast
+  topToast: { position: 'absolute', top: 60, left: 16, right: 16, backgroundColor: Colors.gray2, borderRadius: 12, padding: 16, zIndex: 10000, shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 8, elevation: 8 },
+  topToastText: { color: Colors.white, fontSize: 14 },
+
+  // TopDialog
+  dialogOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, padding: 32 },
+  dialogBox: { backgroundColor: Colors.gray2, borderRadius: 20, padding: 24, width: '100%', maxWidth: 320 },
+  dialogTitle: { color: Colors.white, fontSize: 18, fontWeight: '600', marginBottom: 8, textAlign: 'center' },
+  dialogMessage: { color: Colors.gray6, fontSize: 14, textAlign: 'center', marginBottom: 20 },
+  dialogButtons: { flexDirection: 'row', gap: 8 },
+  dialogButton: { flex: 1, paddingVertical: 12, borderRadius: 20, alignItems: 'center' },
+  dialogButtonPrimary: { backgroundColor: Colors.purple1 },
+  dialogButtonText: { color: Colors.gray6, fontSize: 15 },
+  dialogButtonTextPrimary: { color: Colors.gray1, fontSize: 15, fontWeight: '600' },
+
+  // SettingsCaret
+  caret: { color: Colors.gray6, fontSize: 14 },
+
+  // UserLabelTag
+  labelTag: { borderRadius: 10, paddingHorizontal: 8, paddingVertical: 2 },
+  labelTagText: { color: Colors.white, fontSize: 10, fontWeight: '700' },
+
+  // UserImageBorder
+  imageBorder: { borderWidth: 2, justifyContent: 'center', alignItems: 'center' },
+
+  // OfflineBanner
+  offlineBanner: { backgroundColor: Colors.orange2, paddingVertical: 8, paddingHorizontal: 16, alignItems: 'center' },
+  offlineBannerText: { color: Colors.white, fontSize: 13, fontWeight: '600' },
+
+  // CommunityTag
+  communityTag: { position: 'absolute', bottom: -2, right: -4, borderRadius: 6, paddingHorizontal: 4, paddingVertical: 1, borderWidth: 2, borderColor: Colors.gray9 },
+  communityTagText: { color: Colors.white, fontSize: 7, fontWeight: '800' },
+});

package/src/components/ux/action-sheet/ActionSheet.tsx

@@ -0,0 +1,67 @@
+/**
+ * Action sheet components.
+ * Ported from squad-demo/src/components/ux/action-sheet/.
+ */
+import React from 'react';
+import { View, Text, StyleSheet, Pressable, Modal } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface ActionSheetItemProps {
+  label: string;
+  onPress: () => void;
+  destructive?: boolean;
+  icon?: string;
+}
+
+export function ActionSheetItem({ label, onPress, destructive, icon }: ActionSheetItemProps) {
+  return (
+    <Pressable
+      style={styles.item}
+      onPress={onPress}
+      accessibilityRole="menuitem"
+    >
+      {icon && <Text style={styles.itemIcon}>{icon}</Text>}
+      <Text style={[styles.itemText, destructive && styles.itemTextDestructive]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+interface ActionSheetProps {
+  visible: boolean;
+  onDismiss: () => void;
+  title?: string;
+  items: ActionSheetItemProps[];
+}
+
+export default function ActionSheet({ visible, onDismiss, title, items }: ActionSheetProps) {
+  return (
+    <Modal visible={visible} transparent animationType="slide" onRequestClose={onDismiss}>
+      <Pressable style={styles.backdrop} onPress={onDismiss} />
+      <View style={styles.container}>
+        {title && <Text style={styles.title}>{title}</Text>}
+        {items.map((item, i) => (
+          <ActionSheetItem key={i} {...item} onPress={() => { item.onPress(); onDismiss(); }} />
+        ))}
+        <View style={styles.separator} />
+        <Pressable style={styles.cancelItem} onPress={onDismiss}>
+          <Text style={styles.cancelText}>Cancel</Text>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' },
+  container: { backgroundColor: Colors.gray2, borderTopLeftRadius: 20, borderTopRightRadius: 20, paddingBottom: 32 },
+  title: { color: Colors.gray6, fontSize: 13, textAlign: 'center', paddingVertical: 12 },
+  item: { flexDirection: 'row', alignItems: 'center', paddingVertical: 16, paddingHorizontal: 20, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  itemIcon: { fontSize: 20, marginRight: 12, color: Colors.white },
+  itemText: { color: Colors.white, fontSize: 16 },
+  itemTextDestructive: { color: Colors.red },
+  separator: { height: 8, backgroundColor: Colors.gray3 },
+  cancelItem: { paddingVertical: 16, alignItems: 'center' },
+  cancelText: { color: Colors.white, fontSize: 16, fontWeight: '600' },
+});

package/src/components/ux/bottom-sheet/BottomSheetComponents.tsx

@@ -0,0 +1,93 @@
+/**
+ * Bottom sheet sub-components.
+ * Ported from squad-demo/src/components/ux/bottom-sheet/components/ + factory + registry.
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+// --- BottomSheetHandle ---
+export function BottomSheetHandle() {
+  return (
+    <View style={styles.handleContainer}>
+      <View style={styles.handle} />
+    </View>
+  );
+}
+
+// --- BottomSheetBackdrop ---
+export function BottomSheetBackdrop({ onPress }: { onPress?: () => void }) {
+  return (
+    <View style={styles.backdrop}>
+      {onPress && <View style={StyleSheet.absoluteFill} onTouchEnd={onPress} />}
+    </View>
+  );
+}
+
+// --- ErrorInfoBottomSheet ---
+export function ErrorInfoBottomSheet({
+  error,
+  onDismiss,
+}: { error: { name: string; message: string; code?: string; nativeErrorMessage?: string }; onDismiss: () => void }) {
+  const [showDetails, setShowDetails] = React.useState(false);
+  const { Text, Pressable } = require('react-native');
+
+  return (
+    <View style={styles.errorSheet}>
+      <Text style={styles.errorTitle}>{error.name}</Text>
+      <Text style={styles.errorMessage}>{error.message}</Text>
+      {error.nativeErrorMessage && (
+        <Pressable onPress={() => setShowDetails(!showDetails)}>
+          <Text style={styles.errorDetailsToggle}>{showDetails ? 'Hide' : 'More'} details</Text>
+        </Pressable>
+      )}
+      {showDetails && error.nativeErrorMessage && (
+        <Text style={styles.errorDetails}>{error.nativeErrorMessage}</Text>
+      )}
+      <Pressable style={styles.errorDismiss} onPress={onDismiss}>
+        <Text style={styles.errorDismissText}>Dismiss</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// --- WithTab (tabbed bottom sheet content) ---
+export function WithTab({
+  tabs,
+  activeTab,
+  onTabChange,
+  children,
+}: { tabs: string[]; activeTab: string; onTabChange: (tab: string) => void; children: React.ReactNode }) {
+  const { Text, Pressable } = require('react-native');
+
+  return (
+    <View>
+      <View style={styles.tabBar}>
+        {tabs.map(tab => (
+          <Pressable key={tab} style={[styles.tab, tab === activeTab && styles.tabActive]} onPress={() => onTabChange(tab)}>
+            <Text style={[styles.tabText, tab === activeTab && styles.tabTextActive]}>{tab}</Text>
+          </Pressable>
+        ))}
+      </View>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  handleContainer: { alignItems: 'center', paddingVertical: 12 },
+  handle: { width: 40, height: 4, borderRadius: 2, backgroundColor: 'rgba(255,255,255,0.14)' },
+  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)' },
+  errorSheet: { padding: 24 },
+  errorTitle: { color: Colors.white, fontSize: 18, fontWeight: '600', marginBottom: 8 },
+  errorMessage: { color: Colors.gray6, fontSize: 14, marginBottom: 16 },
+  errorDetailsToggle: { color: Colors.purple1, fontSize: 14, marginBottom: 8 },
+  errorDetails: { color: Colors.gray6, fontSize: 12, fontFamily: 'monospace', marginBottom: 16 },
+  errorDismiss: { paddingVertical: 12, borderRadius: 20, backgroundColor: Colors.purple1, alignItems: 'center' },
+  errorDismissText: { color: Colors.gray1, fontWeight: '600' },
+  tabBar: { flexDirection: 'row', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: Colors.gray3 },
+  tab: { flex: 1, paddingVertical: 12, alignItems: 'center', borderBottomWidth: 2, borderBottomColor: 'transparent' },
+  tabActive: { borderBottomColor: Colors.purple1 },
+  tabText: { color: Colors.gray6, fontSize: 14 },
+  tabTextActive: { color: Colors.white, fontWeight: '500' },
+});

package/src/components/ux/bottom-sheet/SquadBottomSheet.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetView,
+  type BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import { Colors } from '../../../theme/ThemeContext';
+
+export interface SquadBottomSheetRef {
+  open: () => void;
+  close: () => void;
+}
+
+interface SquadBottomSheetProps {
+  children: React.ReactNode;
+  snapPoints?: (string | number)[];
+  title?: string;
+  onClose?: () => void;
+  enableDynamicSizing?: boolean;
+}
+
+/**
+ * Themed bottom sheet wrapper around @gorhom/bottom-sheet.
+ * Provides consistent styling, backdrop, and handle across the SDK.
+ */
+export const SquadBottomSheet = forwardRef<SquadBottomSheetRef, SquadBottomSheetProps>(
+  function SquadBottomSheet({ children, snapPoints: customSnapPoints, title, onClose, enableDynamicSizing }, ref) {
+    const bottomSheetRef = useRef<BottomSheet>(null);
+
+    const snapPoints = useMemo(
+      () => customSnapPoints ?? ['50%', '80%'],
+      [customSnapPoints],
+    );
+
+    useImperativeHandle(ref, () => ({
+      open: () => bottomSheetRef.current?.snapToIndex(0),
+      close: () => bottomSheetRef.current?.close(),
+    }));
+
+    const handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+
+    const renderBackdrop = useCallback(
+      (props: BottomSheetBackdropProps) => (
+        <BottomSheetBackdrop
+          {...props}
+          disappearsOnIndex={-1}
+          appearsOnIndex={0}
+          opacity={0.6}
+        />
+      ),
+      [],
+    );
+
+    return (
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={-1}
+        snapPoints={snapPoints}
+        enablePanDownToClose
+        onClose={handleClose}
+        backdropComponent={renderBackdrop}
+        enableDynamicSizing={enableDynamicSizing}
+        backgroundStyle={styles.background}
+        handleIndicatorStyle={styles.handleIndicator}
+      >
+        {title && (
+          <View style={styles.header}>
+            <Text style={styles.title}>{title}</Text>
+            <Pressable onPress={() => bottomSheetRef.current?.close()} hitSlop={8}>
+              <Text style={styles.closeButton}>x</Text>
+            </Pressable>
+          </View>
+        )}
+        <BottomSheetView style={styles.content}>
+          {children}
+        </BottomSheetView>
+      </BottomSheet>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: Colors.gray2,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  handleIndicator: {
+    backgroundColor: 'rgba(255, 255, 255, 0.14)',
+    width: 40,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 8,
+    paddingBottom: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.gray3,
+  },
+  title: {
+    color: Colors.white,
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  closeButton: {
+    color: Colors.gray6,
+    fontSize: 22,
+    fontWeight: '300',
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+});

package/src/components/ux/buttons/Button.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from 'react';
+import { Pressable, StyleProp, ViewStyle, PressableProps } from 'react-native';
+
+export type ButtonProps = PressableProps & {
+  disabledStyle?: StyleProp<ViewStyle>;
+  feedback?: boolean;
+};
+
+export default function Button({
+  disabledStyle = {},
+  feedback = true,
+  style,
+  ...props
+}: ButtonProps) {
+  const styleWithFeedback = useCallback(
+    ({ pressed }: { pressed: boolean }) => {
+      const stylesToApply: StyleProp<ViewStyle>[] = [
+        feedback ? { opacity: pressed ? 0.6 : 1 } : {},
+        style as StyleProp<ViewStyle>,
+        props.disabled ? disabledStyle : {},
+      ].filter(Boolean);
+      return stylesToApply;
+    },
+    [style, feedback, props.disabled, disabledStyle],
+  );
+
+  return (
+    <Pressable
+      {...props}
+      style={styleWithFeedback}
+      accessibilityRole={props.accessibilityRole ?? 'button'}
+      accessibilityState={{ disabled: props.disabled ?? undefined }}
+    >
+      {props.children}
+    </Pressable>
+  );
+}

package/src/components/ux/buttons/InfoButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import Button from './Button';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface InfoButtonProps {
+  onPress: () => void;
+  size?: number;
+}
+
+export default function InfoButton({ onPress, size = 20 }: InfoButtonProps) {
+  return (
+    <Button onPress={onPress} accessibilityLabel="More information">
+      <View style={[styles.container, { width: size, height: size, borderRadius: size / 2 }]}>
+        <Text style={[styles.text, { fontSize: size * 0.6 }]}>i</Text>
+      </View>
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { borderWidth: 1.5, borderColor: Colors.gray6, justifyContent: 'center', alignItems: 'center' },
+  text: { color: Colors.gray6, fontWeight: '600', fontStyle: 'italic' },
+});

package/src/components/ux/buttons/XButton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import Button from './Button';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface XButtonProps {
+  onPress: () => void;
+  color?: string;
+  size?: number;
+}
+
+export default function XButton({ onPress, color = Colors.white, size = 24 }: XButtonProps) {
+  return (
+    <Button onPress={onPress} style={styles.button}>
+      <Text style={[styles.text, { color, fontSize: size }]}>x</Text>
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    padding: 8,
+  },
+  text: {
+    fontWeight: '300',
+  },
+});

package/src/components/ux/carousel/Carousel.tsx

@@ -0,0 +1,134 @@
+/**
+ * Carousel components.
+ * Ported from squad-demo/src/components/ux/carousel/.
+ */
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  View, FlatList, StyleSheet, Dimensions, Pressable, Text,
+  type NativeSyntheticEvent, type NativeScrollEvent,
+} from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+// --- Pagination Dot ---
+
+export function PaginationDot({ active, color = Colors.white }: { active: boolean; color?: string }) {
+  return (
+    <View style={[styles.dot, active ? { backgroundColor: color } : styles.dotInactive]} />
+  );
+}
+
+// --- Carousel Pagination ---
+
+export function CarouselPagination({ count, activeIndex, color }: { count: number; activeIndex: number; color?: string }) {
+  return (
+    <View style={styles.pagination} accessibilityRole="tablist">
+      {Array.from({ length: count }, (_, i) => (
+        <PaginationDot key={i} active={i === activeIndex} color={color} />
+      ))}
+    </View>
+  );
+}
+
+// --- Carousel Button ---
+
+export function CarouselButton({ direction, onPress }: { direction: 'left' | 'right'; onPress: () => void }) {
+  return (
+    <Pressable
+      style={[styles.navButton, direction === 'left' ? styles.navLeft : styles.navRight]}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={direction === 'left' ? 'Previous' : 'Next'}
+    >
+      <Text style={styles.navText}>{direction === 'left' ? '<' : '>'}</Text>
+    </Pressable>
+  );
+}
+
+// --- Carousel Item ---
+
+export function CarouselItem({ children, width }: { children: React.ReactNode; width?: number }) {
+  return <View style={[styles.item, { width: width ?? SCREEN_WIDTH - 48 }]}>{children}</View>;
+}
+
+// --- Main Carousel ---
+
+interface CarouselProps {
+  data: unknown[];
+  renderItem: (item: unknown, index: number) => React.ReactNode;
+  itemWidth?: number;
+  showPagination?: boolean;
+  showNavButtons?: boolean;
+  paginationColor?: string;
+}
+
+export default function Carousel({
+  data,
+  renderItem,
+  itemWidth = SCREEN_WIDTH - 48,
+  showPagination = true,
+  showNavButtons = false,
+  paginationColor,
+}: CarouselProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const flatListRef = useRef<FlatList>(null);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offset = event.nativeEvent.contentOffset.x;
+      const index = Math.round(offset / itemWidth);
+      setActiveIndex(index);
+    },
+    [itemWidth],
+  );
+
+  const scrollTo = useCallback(
+    (index: number) => {
+      const clamped = Math.max(0, Math.min(index, data.length - 1));
+      flatListRef.current?.scrollToOffset({ offset: clamped * itemWidth, animated: true });
+      setActiveIndex(clamped);
+    },
+    [data.length, itemWidth],
+  );
+
+  return (
+    <View>
+      <FlatList
+        ref={flatListRef}
+        data={data}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        snapToInterval={itemWidth}
+        decelerationRate="fast"
+        keyExtractor={(_, i) => String(i)}
+        renderItem={({ item, index }) => (
+          <View style={{ width: itemWidth }}>{renderItem(item, index)}</View>
+        )}
+      />
+      {showNavButtons && data.length > 1 && (
+        <>
+          <CarouselButton direction="left" onPress={() => scrollTo(activeIndex - 1)} />
+          <CarouselButton direction="right" onPress={() => scrollTo(activeIndex + 1)} />
+        </>
+      )}
+      {showPagination && data.length > 1 && (
+        <CarouselPagination count={data.length} activeIndex={activeIndex} color={paginationColor} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dot: { width: 8, height: 8, borderRadius: 4, marginHorizontal: 3 },
+  dotInactive: { backgroundColor: 'rgba(255,255,255,0.3)' },
+  pagination: { flexDirection: 'row', justifyContent: 'center', paddingVertical: 12 },
+  navButton: { position: 'absolute', top: '40%', width: 36, height: 36, borderRadius: 18, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center', zIndex: 10 },
+  navLeft: { left: 4 },
+  navRight: { right: 4 },
+  navText: { color: Colors.white, fontSize: 18, fontWeight: '600' },
+  item: { justifyContent: 'center', alignItems: 'center' },
+});