be-components 6.0.8 → 6.1.0

package/src/BetMatch/components/BetMatchCard.tsx

@@ -0,0 +1,227 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import { FlatList, Image } from 'react-native';
+import type { AthleteProps, ExternalPriceProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from '../../types';
+import moment from 'moment-mini';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
+import { MarketComponentApi, MarketComponentHelpers } from '../../MarketComponents/api';
+import { Icons } from '../../Components';
+import { useColors } from '../../constants/useColors';
+import Pagination from '../../Components/Pagination';
+
+type BetMatchCardProps = {
+    height:number,
+    player:PublicPlayerProps,
+    contest_title:string,
+    time_detail:string,
+    league?:LeagueProps,
+    team?:TeamProps,
+    athlete?:AthleteProps,
+    order:OrderProps,
+    onOrder:(order:OrderProps) => void
+}
+const sections = ['header', 'page', 'offer', 'details','available', 'actions']
+const BetMatchCard = ({ order, height, player, contest_title, league, team, athlete }:BetMatchCardProps) => {
+    const Colors = useColors();
+    const [ betmatch, setBetMatch ] = useState<{
+        loading:boolean,
+        external_price?:ExternalPriceProps
+    }>({
+        loading:false
+    })
+    const { external_price } = betmatch;
+
+    useEffect(() => {
+        MarketComponentApi.setEnvironment();
+        getExternalPrice()
+    },[order.order_id]);
+
+    const getExternalPrice = async() => {
+        setBetMatch({ loading:true });
+        let external_prices = await MarketComponentApi.getExternalPrices(order.event_type, order.event_id, order.market_id, order.side);
+        if(order.side_type == 'athlete'){
+            external_prices = external_prices.filter(p => p.participant_id == order.side_id);
+        }
+        if(order.side_type == 'team'){
+            external_prices = external_prices.filter(p => p.participant_id == order.side_id);
+        }
+        //Find consensus!
+        let consensus_price = external_prices.find(p => p.external_name.toLowerCase() == 'consensus');
+        if(!consensus_price){ consensus_price = external_prices[0] }
+        setBetMatch({
+            loading:false,
+            external_price: consensus_price
+        })
+    }
+
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>{contest_title}</Text>
+                            <Text theme='description' style={{ marginTop:4 }}>Offer expires {moment(order.expire_datetime).fromNow()}</Text>
+                        </View>
+                        <View transparent style={{ alignItems:'flex-end' }}>
+                            <Text theme='h1' color={Colors.text.success}>${order.open_amt.toFixed(2)}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Available</Text>
+                        </View>
+                    </View>
+                )
+            case 'offer':
+                return (
+                    <View transparent type='row' style={{ margin:15 }}>
+                        <View float style={{ borderRadius:100, padding:2 }}>
+                            {athlete ?
+                            <AthleteImage
+                                athlete={athlete}
+                                size={36}
+                            />
+                            :team ?
+                            <TeamImage
+                                team={team}
+                                size={14}
+                            />
+                            :league ?
+                            <Image
+                                source={{ uri: league.league_image }}
+                                style={{ height:36, width:36, borderRadius:100 }}
+                                resizeMode='cover'
+                            />
+                            :<></>
+                            }
+                        </View>
+                        <View transparent style={{ flex:1, marginLeft:10 }}>
+                            <Text theme='h1' size={22}>{order.title}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Offer expires {moment(order.expire_datetime).fromNow()}</Text>
+                        </View>
+                    </View>
+                )
+            case 'details':
+                return (
+                    <View transparent style={{ margin:15 }}>
+                        <View transparent type='row' style={{ padding:15 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Offer Probability</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{(order.probability * 100).toFixed(2)}%</Text>
+                            </View>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Offer Odds</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{MarketComponentHelpers.getOddsLabel(order.odds)}</Text>
+                            </View>
+                        </View>
+                        {external_price ?
+                        <View transparent type='row' style={{ padding:15 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>External Price</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{external_price.external_name}</Text>
+                            </View>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Suggested Odds</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>{MarketComponentHelpers.getOddsLabel(external_price.odds)}</Text>
+                            </View>
+                        </View>
+                        :<></>}
+                        <View transparent type='row' style={{ padding:15 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Offer Grade</Text>
+                                {!order?.grade ?
+                                <Text style={{ marginTop:3 }} theme="h1">N/A</Text>
+                                :order.grade > 105 ?
+                                <Text style={{ marginTop:3 }} theme="h1" color={Colors.text.success}>Amazing Price!</Text>
+                                : order.grade > 98 ?
+                                <Text style={{ marginTop:3 }} theme="h1" color={Colors.text.success}>Very Competitive!</Text>
+                                : order.grade > 95 ?
+                                <Text style={{ marginTop:3 }} theme="h1" color={Colors.text.warning}>Somewhat Competitive.</Text>
+                                :
+                                <Text style={{ marginTop:3 }} theme="h1" color={Colors.text.error}>Not Competitive.</Text>
+                                }
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}></Text>
+                            </View>
+                            <OrderGradeBar grade={order.grade} view_type='card' />
+                        </View>
+                    </View>
+                )
+            case 'available':
+                return (
+                    <View transparent style={{ margin:15 }}>
+                        <View transparent type='row' style={{ padding:15 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Available</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>${order.open_amt.toFixed(2)}</Text>
+                            </View>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='description'>Potential Winnings</Text>
+                                <Text theme='h1' size={18} style={{ marginTop:4 }}>${order.potential_winnings.toFixed(2)}</Text>
+                            </View>
+                        </View>
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+
+    return (
+        <View style={{ flex:1, height }}>
+            <View float transparent style={{ flex:1, marginBottom:30 }}>
+                <View float type='footer' style={{ position:'absolute', left:0, right:0, bottom: -30, height:50, margin:0, borderRadius:8 }} />
+                <View float type='footer' style={{ position:'absolute', left:0, right:0, bottom: -15, height:50, margin:-5, borderRadius:8 }} />
+                <View transparent style={{ flex:1 }}>
+                    <FlatList
+                        data={sections}
+                        key={'bet_match_card_sections'}
+                        keyExtractor={(item) => item}
+                        renderItem={renderSections}
+                    />
+                </View>
+                <View type='footer' style={{ flexDirection:'row', padding:5 }}>
+                    <Button float style={{ flex:1, marginRight:4, flexDirection:'row', justifyContent:'center', alignItems:'center' }}>
+                        <Icons.CloseIcon size={14} color={Colors.text.error}/>
+                        <Text theme='h2' style={{ marginLeft:10 }} color={Colors.text.error}>Decline</Text>
+                    </Button>
+                    <Button float style={{ flex:1, marginLeft:4, flexDirection:'row', justifyContent:'center', alignItems:'center' }}>
+                        <Icons.CheckIcon size={14} color={Colors.text.success}/>
+                        <Text theme='h2' style={{ marginLeft:10 }} color={Colors.text.success}>Accept</Text>
+                    </Button>
+                </View>
+                <View float type='footer' style={{ flexDirection:'row', alignItems:'center', borderRadius:8, margin:-10, marginTop:0, padding:10 }}>
+                    <View float style={{ padding:2, borderRadius:100 }}>
+                        <Image
+                            source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                            style={{ height:40, width:40, borderRadius:100}}
+                            resizeMode='cover'
+                        />
+                    </View>
+                    <View transparent style={{ flex:1, marginLeft:15 }}>
+                        <Text theme='h1'>@{player.username}</Text>
+                        <Text theme='description' style={{ marginTop:3 }}>Joined {moment(player.create_datetime).fromNow()}</Text>
+                    </View>
+                    <View transparent style={{ alignItems:'center' }}>
+                        <Icons.LocationIcon size={18} color={Colors.text.h1}/>
+                        <Text theme='h2'>{order.region}</Text>
+                    </View>
+                </View>
+            </View>
+            <View transparent style={{ padding:5 }}>
+                <Pagination
+                    pages={10}
+                    onNext={() => console.log('')}
+                    onPrevious={() => console.log('')}
+                    offset={0}
+                />
+            </View>            
+        </View>
+    )
+}
+
+/*
+<Image
+    source={{ uri: 'https://res.cloudinary.com/hoabts6mc/image/upload/v1647289869/ellipse_background_fhh1ut.webp' }}
+    style={{ height:400, width:400 }}
+    resizeMode='cover'
+/>
+*/
+
+export default BetMatchCard

package/src/BetMatch/components/BetMatchCardSmall.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Button, Text, View } from "../../Components/Themed"
+import type { AthleteProps, LeagueProps, OrderProps, PublicPlayerProps, TeamProps } from "../../types"
+import { useColors } from '../../constants/useColors';
+import { MarketComponentHelpers } from '../../MarketComponents/api';
+import { Image } from 'react-native';
+import { AthleteImage, TeamImage } from '../../Components/Jerseys';
+import OrderGradeBar from '../../MarketComponents/components/OrderGradeBar';
+
+type BetMatchCardSmallProps = {
+    player:PublicPlayerProps,
+    contest_title:string,
+    time_detail:string,
+    league?:LeagueProps,
+    team?:TeamProps,
+    athlete?:AthleteProps,
+    order:OrderProps,
+    onOrder:(order:OrderProps) => void
+}
+const BetMatchCardSmall = ({ contest_title, time_detail, team, athlete, league, order, onOrder }:BetMatchCardSmallProps) => {
+    const Colors = useColors();
+    return (
+        <Button float style={{ flex:1, padding:0 }} onPress={() => onOrder(order)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:5, borderTopRightRadius:8, borderTopLeftRadius:8 }}>
+                <View float style={{ borderRadius:100, padding:2 }}>
+                {athlete ?
+                   <AthleteImage
+                    athlete={athlete}
+                    size={36}
+                   />
+                :team ?
+                <TeamImage
+                    team={team}
+                    size={14}
+                   />
+                :league ?
+                <Image
+                    source={{ uri: league.league_image }}
+                    style={{ height:36, width:36, borderRadius:100 }}
+                    resizeMode='cover'
+                />
+                :<></>
+                }
+                </View>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='description' size={12}>{order.title}</Text>
+                    <Text theme='h1' size={12} color={Colors.text.success} style={{ marginTop:3 }}>${order.open_amt.toFixed(2)} Available</Text>
+                </View>
+            </View>
+            <View type='body' style={{ flex:1 }}>
+                
+                <View transparent type='row' style={{ padding:5, borderBottomWidth:1, borderColor:Colors.borders.light }}>
+                    <View style={{ flex:1 }}>
+                        <Text theme='h2' size={12}>Offer Odds:</Text>
+                        <OrderGradeBar style={{ alignItems:'flex-start', marginTop:5 }} grade={order.grade} view_type='card' />
+                    </View>
+                    <Text theme='h1'>{MarketComponentHelpers.getOddsLabel(order.odds)}</Text>
+                </View>
+            </View>
+            <View type='footer' style={{ flexDirection:'row', alignItems:'center', borderBottomLeftRadius:8, borderBottomRightRadius:8, padding:5 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h2'>{contest_title}</Text>
+                    <Text theme='light' style={{ marginTop:3 }}>{time_detail}</Text>
+                </View>
+            </View>
+        </Button>
+    )
+}
+
+export default BetMatchCardSmall

package/src/BetMatch/index.tsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { Text, View } from "../Components/Themed";
+import { MyOrdersHelpers } from '../MarketComponents/components/MyOrderList/api';
+import type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderProps, PlayerFilterProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
+import { BetMatchApi } from './api';
+import { ActivityIndicator, FlatList } from 'react-native';
+import BetMatchCardSmall from './components/BetMatchCardSmall';
+import { SocialOrderHelpers } from '../SocialComponents/api';
+import moment from 'moment-mini';
+import { useColors } from '../constants/useColors';
+import BetMatchCard from './components/BetMatchCard';
+
+type BetMatchProps = {
+    player_filter_id:string,
+    style?:any,
+    player_id:string
+}
+const sections = ['filter','orders', 'bet']
+const BetMatch = ({ player_filter_id }:BetMatchProps) => {
+    const Colors = useColors();
+    const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
+    const [ viewing_order_id, setViewingOrderId ] = useState<string|undefined>(undefined);
+    const [ static_data, setStaticData ] = useState<{
+        static_loading:boolean,
+        leagues:LeagueProps[],
+        markets:MarketProps[],
+    }>({
+        static_loading: false, leagues:[], markets:[]
+    });
+    const { leagues } = static_data;
+    const [ filter_data, setFilterData ] = useState<{
+        loading:boolean,
+        player_filter?:PlayerFilterProps,
+        orders:OrderProps[],
+    }>({
+        loading:false, orders:[]
+    });
+    const { loading, player_filter, orders } = filter_data;
+    const viewing_order = orders.find(o => o.order_id == viewing_order_id);
+    const [ contest_data, setContestData ] = useState<{
+        contest_loading:boolean,
+        players:PublicPlayerProps[],
+        events:EventProps[],
+        tournaments:TournamentProps[],
+        matches:MatchProps[],
+        teams:TeamProps[],
+        athletes:AthleteProps[]
+    }>({
+        contest_loading: false, players: [], events: [], tournaments: [], matches: [], teams:[], athletes: []
+    });
+    const { players, events, tournaments, matches, teams, athletes } = contest_data;
+    
+    useEffect(() => {
+        BetMatchApi.setEnvironment()
+        runFilter(player_filter_id);
+        getStaticData();
+    },[player_filter_id]);
+
+    const runFilter = async(id:string) => {
+        setFilterData({ ...filter_data, loading: true });
+        const pf = await BetMatchApi.getPlayerFilterById(id);
+        if(!pf){ return }
+        const filter_orders = await BetMatchApi.runPlayerFilter(id);
+        setFilterData({
+            ...filter_data,
+            orders: filter_orders,
+            player_filter: pf,
+            loading: false
+        });
+        getContestData(filter_orders);
+    }
+
+    const getStaticData = async() => {
+        setStaticData({ ...static_data, static_loading:true });
+        const lgs = await BetMatchApi.getLeagues();
+        const makets = await BetMatchApi.getMarkets();
+        setStaticData({ 
+            ...static_data,
+            static_loading:true,
+            leagues: lgs,
+            markets: makets
+        });
+    }
+
+    const getContestData = async(orders:OrderProps[]) => {
+        setContestData({ ...contest_data, contest_loading:true });
+        const { event_ids, tournament_ids, match_ids, athlete_ids, team_ids, player_ids } = MyOrdersHelpers.getContestsFromOrders(orders);
+        const plyers = await BetMatchApi.getPlayersByPlayerIds(player_ids);
+        const evs = await BetMatchApi.getEventsByEventIds(event_ids);
+        const tourns = await BetMatchApi.getTournamentsByTournamentIds(tournament_ids);
+        const matchs = await BetMatchApi.getMatchesByMatchIds(match_ids);
+        const aths = await BetMatchApi.getAthletesByIds(athlete_ids);
+        const tms = await BetMatchApi.getTeamsByIds(team_ids);
+        setContestData({
+            ...contest_data,
+            players: plyers,
+            events: evs,
+            tournaments: tourns,
+            matches: matchs,
+            teams: tms,
+            athletes: aths
+        })
+    }
+
+    const renderOrders = (data:{ item:OrderProps, index:number }) => {
+        const player = players.find(p => p.player_id == data.item.player_id);
+        if(!player){ return <></> }
+        const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(data.item, events, tournaments, matches, athletes, teams, leagues)
+        return (
+            <View transparent key={data.item.order_id.toString()} style={{ width:150, maxWidth:250, flexGrow:1, margin:7 }}>
+                <BetMatchCardSmall
+                    player={player}
+                    team={team}
+                    athlete={athlete}
+                    contest_title={title}
+                    time_detail={time}
+                    league={league}
+                    order={data.item}
+                    onOrder={(order) => setViewingOrderId(order.order_id)}
+                />
+            </View>
+        )
+    }
+
+    const renderSections = (data:{item:string, index:number}) => {
+        switch(data.item){
+            case 'filter':
+                if(!player_filter){ return <></> }
+                if(viewing_order){ return <></> }
+                return (
+                    <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                        <View transparent style={{ flex:1, marginRight:10 }}>
+                            <Text theme='h1'>{player_filter.name}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Created {moment(player_filter.create_datetime).fromNow()}</Text>
+                        </View>
+                        <View transparent style={{ alignItems:'flex-end' }}>
+                            <Text theme='h1'>{orders.length}</Text>
+                            <Text theme='description' style={{ marginTop:3 }}>Offers</Text>
+                        </View>
+                    </View>
+                )
+            case 'orders':
+                if(viewing_order){ return <></> }
+                return (
+                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                        {orders.map((item, index) => {
+                            return renderOrders({ item, index })
+                        })}
+                    </View>
+                )
+            case 'bet':
+                if(!viewing_order){ return <></> }
+                const player = players.find(p => p.player_id == viewing_order.player_id);
+                if(!player){ return <></> }
+                const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
+                return (
+                    <View style={{ flex:1, padding:20 }}>
+                        <BetMatchCard
+                            player={player}
+                            height={module_size.height - 60}
+                            order={viewing_order}
+                            team={team}
+                            athlete={athlete}
+                            league={league}
+                            time_detail={time}
+                            contest_title={title}
+                            onOrder={(order) => console.log(order)}
+                        />
+                    </View>
+                )
+            default: return <></>
+        }
+    }
+    return (
+        <View style={{ flex:1 }} onLayout={(ev) => {
+            const { width, height } = ev.nativeEvent.layout;
+            setModuleSize({ width, height })
+        }}>
+            {loading ?
+            <ActivityIndicator size='large' color={Colors.text.h1} />
+            :<></>}
+            <FlatList
+                data={sections}
+                key={'filter_sections'}
+                keyExtractor={item => item}
+                renderItem={renderSections}
+            />
+        </View>
+    )
+}
+
+export default BetMatch

package/src/Components/AutoScrollFlatList.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  FlatList,
+  View,
+  type LayoutChangeEvent,
+  type ViewStyle,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
+
+type AutoScrollingFlatListProps<T> = {
+  data: T[];
+  renderItem: ({ item, index }: { item: T; index: number }) => React.ReactElement;
+  horizontal?: boolean;
+  style?: ViewStyle;
+  speed: number; // pixels per second
+  minDuration?: number; // milliseconds (optional)
+  onCompleteScroll?: (completed: boolean) => void;
+  resetKey?: string | number; // used to reset internal state
+};
+
+const AutoScrollingFlatList = <T,>({
+  data,
+  renderItem,
+  horizontal = false,
+  style,
+  speed,
+  minDuration = 0,
+  onCompleteScroll,
+  resetKey,
+}: AutoScrollingFlatListProps<T>) => {
+  const listRef = useRef<FlatList<T>>(null);
+  const itemSizes = useRef<(number | undefined)[]>([]);
+  const totalSize = useRef(0);
+  const offset = useRef(0);
+  const scrollTimer = useRef<NodeJS.Timeout | null>(null);
+  const scrollStartTime = useRef<number | null>(null);
+
+  const [ready, setReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(false); // replaces isHovered
+  const [containerSize, setContainerSize] = useState(0);
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const size = horizontal
+      ? e.nativeEvent.layout.width
+      : e.nativeEvent.layout.height;
+    setContainerSize(size);
+  };
+
+  const updateItemLayout = (index: number, e: LayoutChangeEvent) => {
+    const size = horizontal
+      ? e.nativeEvent.layout.width
+      : e.nativeEvent.layout.height;
+
+    itemSizes.current[index] = size;
+
+    const allMeasured =
+      itemSizes.current.length === data.length &&
+      itemSizes.current.every((v) => typeof v === 'number');
+
+    if (allMeasured && !ready) {
+      totalSize.current = itemSizes.current
+        .filter((v): v is number => typeof v === 'number')
+        .reduce((acc, val) => acc + val, 0);
+      setReady(true);
+    }
+  };
+
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentOffset = horizontal
+      ? e.nativeEvent.contentOffset.x
+      : e.nativeEvent.contentOffset.y;
+
+    offset.current = currentOffset;
+  };
+
+  useEffect(() => {
+    const isWeb = Platform.OS === 'web';
+
+    if (!ready || (isWeb && isPaused) || speed <= 0 || containerSize === 0) return;
+
+    const frameInterval = 16;
+    const pixelsPerFrame = (speed * frameInterval) / 1000;
+    scrollStartTime.current = Date.now();
+
+    scrollTimer.current = setInterval(() => {
+      offset.current += pixelsPerFrame;
+
+      const maxOffset = totalSize.current - containerSize;
+      const now = Date.now();
+      const reachedEnd = offset.current >= maxOffset;
+      const minTimeElapsed = now - (scrollStartTime.current ?? 0) >= minDuration;
+
+      if (reachedEnd) {
+        if (minTimeElapsed) {
+          offset.current = 0;
+          scrollStartTime.current = Date.now();
+          listRef.current?.scrollToOffset({ offset: 0, animated: false });
+          if (onCompleteScroll) onCompleteScroll(true);
+        } else {
+          offset.current = maxOffset;
+        }
+      } else {
+        listRef.current?.scrollToOffset({
+          offset: offset.current,
+          animated: false,
+        });
+      }
+    }, frameInterval);
+
+    return () => {
+      if (scrollTimer.current) clearInterval(scrollTimer.current);
+    };
+  }, [ready, speed, isPaused, containerSize, onCompleteScroll, minDuration]);
+
+  // Reset state/refs on resetKey change
+  useEffect(() => {
+    if (scrollTimer.current) clearInterval(scrollTimer.current);
+    offset.current = 0;
+    scrollStartTime.current = null;
+    itemSizes.current = [];
+    totalSize.current = 0;
+    setReady(false);
+    setIsPaused(false);
+  }, [resetKey]);
+
+  const wrappedRenderItem = ({ item, index }: { item: T; index: number }) => (
+    <View onLayout={(e) => updateItemLayout(index, e)} style={{ flexShrink: 0 }}>
+      {renderItem({ item, index })}
+    </View>
+  );
+
+  const wrapperProps =
+    Platform.OS === 'web'
+      ? {
+          onMouseEnter: () => setIsPaused(true),
+          onMouseLeave: () => setIsPaused(false),
+          onTouchStart: () => setIsPaused(true),   // pause on mobile tap
+          onTouchEnd: () => setIsPaused(false),
+        }
+      : {
+          onTouchStart: () => setIsPaused(true),
+          onTouchEnd: () => setIsPaused(false),
+        };
+
+  return (
+    <View
+      {...(wrapperProps as any)}
+      onLayout={handleLayout}
+      style={[{ overflow: 'hidden' }, style]}
+    >
+      <FlatList
+        ref={listRef}
+        data={data}
+        renderItem={wrappedRenderItem}
+        keyExtractor={(_, i) => i.toString()}
+        horizontal={horizontal}
+        scrollEnabled={true}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+};
+
+export default AutoScrollingFlatList;