set minWidth on DurationScroll FlatList to fix issue where pickers don't always show on Android until you scroll (#43)

Author: troberts-28

src/components/DurationScroll/index.tsx

@@ -499,18 +499,21 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             <View
                 pointerEvents={isDisabled ? "none" : undefined}
                 style={[
+                    styles.durationScrollFlatListContainer,
                     {
                         height:
                             styles.pickerItemContainer.height *
                             numberOfItemsToShow,
-                        overflow: "visible",
                     },
                     isDisabled && styles.disabledPickerContainer,
                 ]}
                 testID={testID}>
                 <FlatList
                     key={flatListRenderKey}
                     ref={flatListRef}
+                    contentContainerStyle={
+                        styles.durationScrollFlatListContentContainer
+                    }
                     data={numbersForFlatList}
                     decelerationRate={0.88}
                     getItemLayout={getItemLayout}
@@ -528,6 +531,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     snapToOffsets={[...Array(numbersForFlatList.length)].map(
                         (_, i) => i * styles.pickerItemContainer.height
                     )}
+                    style={styles.durationScrollFlatList}
                     testID="duration-scroll-flatlist"
                     viewabilityConfigCallbackPairs={
                         viewabilityConfigCallbackPairs

src/components/TimerPicker/styles.ts

@@ -5,6 +5,9 @@ export interface CustomTimerPickerStyles {
     backgroundColor?: string;
     disabledPickerContainer?: ViewStyle;
     disabledPickerItem?: TextStyle;
+    durationScrollFlatList?: ViewStyle;
+    durationScrollFlatListContainer?: ViewStyle;
+    durationScrollFlatListContentContainer?: ViewStyle;
     pickerAmPmContainer?: ViewStyle;
     pickerAmPmLabel?: TextStyle;
     pickerContainer?: ViewStyle & { backgroundColor?: string };
@@ -37,6 +40,17 @@ export const generateStyles = (
                     : LIGHT_MODE_BACKGROUND_COLOR),
             ...customStyles?.pickerContainer,
         },
+        durationScrollFlatList: {
+            minWidth: 1,
+            ...customStyles?.durationScrollFlatList,
+        },
+        durationScrollFlatListContainer: {
+            overflow: "visible",
+            ...customStyles?.durationScrollFlatListContainer,
+        },
+        durationScrollFlatListContentContainer: {
+            ...customStyles?.durationScrollFlatListContentContainer,
+        },
         pickerLabelContainer: {
             position: "absolute",
             right: 4,