🦺 remount FlatList on change to onViewableItemsChanged to protect against crashes on changing numberOfItems or repeatNumbersNTimes on the fly (#42)

Author: troberts-28

src/components/DurationScroll/index.tsx

@@ -84,7 +84,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             // the number of items in the picker, avoiding regular jumps up/down the list
             // whilst avoiding rendering too many items in the picker
             if (repeatNumbersNTimesNotExplicitlySet) {
-                return Math.round(180 / numberOfItems);
+                return Math.max(Math.round(180 / numberOfItems), 1);
             }
 
             return Math.round(repeatNumbersNTimes);
@@ -383,6 +383,10 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
 
         const onViewableItemsChanged = useCallback(
             ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+                if (numberOfItems === 1) {
+                    return;
+                }
+
                 if (
                     viewableItems[0]?.index &&
                     viewableItems[0].index < numberOfItems * 0.5
@@ -405,6 +409,38 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             [numberOfItems, safeRepeatNumbersNTimes]
         );
 
+        const [
+            viewabilityConfigCallbackPairs,
+            setViewabilityConfigCallbackPairs,
+        ] = useState<ViewabilityConfigCallbackPairs>([
+            {
+                viewabilityConfig: { viewAreaCoveragePercentThreshold: 0 },
+                onViewableItemsChanged: onViewableItemsChanged,
+            },
+        ]);
+
+        const [flatListRenderKey, setFlatListRenderKey] = useState(0);
+
+        const initialRender = useRef(true);
+
+        useEffect(() => {
+            // don't run on first render
+            if (initialRender.current) {
+                initialRender.current = false;
+                return;
+            }
+
+            // if the onViewableItemsChanged callback changes, we need to update viewabilityConfigCallbackPairs
+            // which requires the FlatList to be remounted, hence the increase of the FlatList key
+            setFlatListRenderKey((prev) => prev + 1);
+            setViewabilityConfigCallbackPairs([
+                {
+                    viewabilityConfig: { viewAreaCoveragePercentThreshold: 0 },
+                    onViewableItemsChanged: onViewableItemsChanged,
+                },
+            ]);
+        }, [onViewableItemsChanged]);
+
         const getItemLayout = useCallback(
             (_: ArrayLike<string> | null | undefined, index: number) => ({
                 length: styles.pickerItemContainer.height,
@@ -414,14 +450,6 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             [styles.pickerItemContainer.height]
         );
 
-        const viewabilityConfigCallbackPairs =
-            useRef<ViewabilityConfigCallbackPairs>([
-                {
-                    viewabilityConfig: { viewAreaCoveragePercentThreshold: 0 },
-                    onViewableItemsChanged: onViewableItemsChanged,
-                },
-            ]);
-
         useImperativeHandle(ref, () => ({
             reset: (options) => {
                 flatListRef.current?.scrollToIndex({
@@ -458,6 +486,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                 ]}
                 testID={testID}>
                 <FlatList
+                    key={flatListRenderKey}
                     ref={flatListRef}
                     data={numbersForFlatList}
                     decelerationRate={0.88}
@@ -479,7 +508,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     testID="duration-scroll-flatlist"
                     viewabilityConfigCallbackPairs={
                         !disableInfiniteScroll
-                            ? viewabilityConfigCallbackPairs?.current
+                            ? viewabilityConfigCallbackPairs
                             : undefined
                     }
                     windowSize={numberOfItemsToShow}