fix viewableitemschange

metkm · Jan 17, 2025 · e1d2717 · e1d2717
1 parent 260ed8e
commit e1d2717
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/components/lines/Lines.tsx b/components/lines/Lines.tsx
@@ -67,7 +67,7 @@ const Lines = (props: LinesProps, outerRef: ForwardedRef<FlatList>) => {
   )
 
   type ViewableItems = FlatListProps<string>['onViewableItemsChanged']
-  const handleOnViewChanged: ViewableItems = ({ viewableItems }) => {
+  const handleViewableItemsChanged: ViewableItems = ({ viewableItems }) => {
     if (viewableItems.length < 1 || Platform.OS === 'web') return
 
     useMiscStore.setState(() => ({ selectedLineScrollIndex: viewableItems.at(0)?.index || 0 }))
@@ -82,7 +82,6 @@ const Lines = (props: LinesProps, outerRef: ForwardedRef<FlatList>) => {
         ref={innerRef}
         data={lines}
         renderItem={renderItem}
-        onViewableItemsChanged={handleOnViewChanged}
         viewabilityConfig={{ itemVisiblePercentThreshold: 70 }}
         contentContainerStyle={[styles.codes, props.contentContainerStyle]}
         keyExtractor={keyExtractor}
@@ -92,6 +91,14 @@ const Lines = (props: LinesProps, outerRef: ForwardedRef<FlatList>) => {
         snapToAlignment="center"
         pagingEnabled
         horizontal
+
+        {
+          ...Platform.OS !== 'web'
+            ? {
+                onViewableItemsChanged: handleViewableItemsChanged,
+              }
+            : {}
+        }
       />
     </View>
   )

diff --git a/components/lines/line/LineBusStops.tsx b/components/lines/line/LineBusStops.tsx
@@ -230,7 +230,7 @@ export const LineBusStops = ({ lineCode, variant = 'solid' }: LineBusStopsProps)
         onMomentumScrollEnd={handleScrollMomentumEnd}
         drawDistance={1}
         {
-          ...Platform.OS === 'web'
+          ...Platform.OS !== 'web'
             ? {
                 onViewableItemsChanged: handleViewableItemsChanged,
               }

diff --git a/components/markers/line/arrows/MarkersLineArrows.web.tsx b/components/markers/line/arrows/MarkersLineArrows.web.tsx
@@ -34,9 +34,11 @@ export const MarkersLineArrows = ({ arrows, lineTheme }: MarkersLineArrowsProps)
     <MarkersFiltersInView
       data={arrows}
       renderItem={item => (
-        <MarkersFiltersZoom limit={13}>
+        <MarkersFiltersZoom
+          key={`${item.coordinates.latitude}-${item.coordinates.longitude}`}
+          limit={13}
+        >
           <AdvancedMarker
-            key={`${item.coordinates.latitude}-${item.coordinates.longitude}`}
             position={{
               lat: item.coordinates.latitude,
               lng: item.coordinates.longitude,