Release/v2.1.0

.yarnrc.yml

@@ -1,6 +1,6 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
 
 nmHoistingLimits: workspaces # disable hoisting for all workspaces (causes issues with bare example)
 

examples/example-expo/App.tsx

@@ -7,10 +7,12 @@ import React, {
 } from "react";
 
 import Ionicons from "@expo/vector-icons/Ionicons";
+import MaskedView from "@react-native-masked-view/masked-view";
 import { Audio } from "expo-av";
 import * as Haptics from "expo-haptics";
 import { LinearGradient } from "expo-linear-gradient";
 import {
+    Image,
     LayoutAnimation,
     Platform,
     Pressable,
@@ -98,7 +100,7 @@ export default function App() {
                             <View style={styles.buttonContainer}>
                                 <Text
                                     style={[styles.button, styles.buttonDark]}>
-                                    Set Alarm 🔔
+                                    {"Set Alarm 🔔"}
                                 </Text>
                             </View>
                         </TouchableOpacity>
@@ -156,7 +158,7 @@ export default function App() {
                             <View style={styles.buttonContainer}>
                                 <Text
                                     style={[styles.button, styles.buttonLight]}>
-                                    Set Alarm 🔔
+                                    {"Set Alarm 🔔"}
                                 </Text>
                             </View>
                         </TouchableOpacity>
@@ -187,7 +189,10 @@ export default function App() {
 
     const renderExample3 = useMemo(() => {
         return (
-            <View
+            <LinearGradient
+                colors={["#202020", "#220578"]}
+                start={{ x: 0, y: 0 }}
+                end={{ x: 1, y: 1 }}
                 style={[
                     styles.container,
                     styles.page3Container,
@@ -198,12 +203,13 @@ export default function App() {
                     Haptics={Haptics}
                     hourLabel=":"
                     LinearGradient={LinearGradient}
+                    MaskedView={MaskedView}
                     minuteLabel=":"
                     padWithNItems={2}
                     secondLabel=""
                     styles={{
                         theme: "dark",
-                        backgroundColor: "#202020",
+                        backgroundColor: "transparent",
                         pickerItem: {
                             fontSize: 34,
                         },
@@ -221,12 +227,12 @@ export default function App() {
                             right: -20,
                             top: 0,
                             bottom: 6,
-                            width: 40,
+                            width: 46,
                             alignItems: "center",
                         },
                     }}
                 />
-            </View>
+            </LinearGradient>
         );
     }, [screenWidth]);
 
@@ -363,7 +369,7 @@ const styles = StyleSheet.create({
         backgroundColor: "#F1F1F1",
     },
     page3Container: {
-        backgroundColor: "#202020",
+        flex: 1,
     },
     page4Container: {
         backgroundColor: "#F1F1F1",

examples/example-expo/package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "@expo/vector-icons": "^14.0.3",
+        "@react-native-masked-view/masked-view": "0.3.2",
         "expo": "~52.0.31",
         "expo-av": "~15.0.2",
         "expo-haptics": "~14.0.1",

package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "2.0.3",
+    "version": "2.1.0",
     "main": "dist/commonjs/index.js",
     "module": "dist/module/index.js",
     "types": "dist/typescript/index.d.ts",

src/components/DurationScroll/index.tsx

@@ -34,7 +34,6 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             allowFontScaling = false,
             amLabel,
             Audio,
-            bottomPickerGradientOverlayProps,
             clickSoundAsset,
             disableInfiniteScroll = false,
             FlatList = RNFlatList,
@@ -46,6 +45,7 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             label,
             limit,
             LinearGradient,
+            MaskedView,
             maximumValue,
             onDurationChange,
             padNumbersWithZero = false,
@@ -57,7 +57,6 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             repeatNumbersNTimesNotExplicitlySet,
             styles,
             testID,
-            topPickerGradientOverlayProps,
         } = props;
 
         const numberOfItems = useMemo(() => {
@@ -495,6 +494,127 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
             latestDuration: latestDuration,
         }));
 
+        const renderContent = useMemo(() => {
+            return (
+                <>
+                    <FlatList
+                        key={flatListRenderKey}
+                        ref={flatListRef}
+                        contentContainerStyle={
+                            styles.durationScrollFlatListContentContainer
+                        }
+                        data={numbersForFlatList}
+                        decelerationRate={0.88}
+                        getItemLayout={getItemLayout}
+                        initialScrollIndex={initialScrollIndex}
+                        keyExtractor={(_, index) => index.toString()}
+                        nestedScrollEnabled
+                        onMomentumScrollEnd={onMomentumScrollEnd}
+                        onScroll={onScroll}
+                        renderItem={renderItem}
+                        scrollEnabled={!isDisabled}
+                        scrollEventThrottle={16}
+                        showsVerticalScrollIndicator={false}
+                        snapToAlignment="start"
+                        // used in place of snapToInterval due to bug on Android
+                        snapToOffsets={[
+                            ...Array(numbersForFlatList.length),
+                        ].map((_, i) => i * styles.pickerItemContainer.height)}
+                        style={styles.durationScrollFlatList}
+                        testID="duration-scroll-flatlist"
+                        viewabilityConfigCallbackPairs={
+                            viewabilityConfigCallbackPairs
+                        }
+                        windowSize={numberOfItemsToShow}
+                    />
+                    <View
+                        pointerEvents="none"
+                        style={styles.pickerLabelContainer}>
+                        {typeof label === "string" ? (
+                            <Text
+                                allowFontScaling={allowFontScaling}
+                                style={styles.pickerLabel}>
+                                {label}
+                            </Text>
+                        ) : (
+                            label ?? null
+                        )}
+                    </View>
+                </>
+            );
+        }, [
+            FlatList,
+            allowFontScaling,
+            flatListRenderKey,
+            getItemLayout,
+            initialScrollIndex,
+            isDisabled,
+            label,
+            numberOfItemsToShow,
+            numbersForFlatList,
+            onMomentumScrollEnd,
+            onScroll,
+            renderItem,
+            styles.durationScrollFlatList,
+            styles.durationScrollFlatListContentContainer,
+            styles.pickerItemContainer.height,
+            styles.pickerLabel,
+            styles.pickerLabelContainer,
+            viewabilityConfigCallbackPairs,
+        ]);
+
+        const renderLinearGradient = useMemo(() => {
+            if (!LinearGradient) {
+                return null;
+            }
+
+            let colors: string[];
+
+            if (MaskedView) {
+                // if using masked view, we only care about the opacity
+                colors = [
+                    "rgba(0,0,0,0)",
+                    "rgba(0,0,0,1)",
+                    "rgba(0,0,0,1)",
+                    "rgba(0,0,0,0)",
+                ];
+            } else {
+                const backgroundColor =
+                    styles.pickerContainer.backgroundColor ?? "white";
+                const transparentBackgroundColor = colorToRgba({
+                    color: backgroundColor,
+                    opacity: 0,
+                });
+                colors = [
+                    backgroundColor,
+                    transparentBackgroundColor,
+                    transparentBackgroundColor,
+                    backgroundColor,
+                ];
+            }
+
+            // calculate the gradient height to cover the top item and bottom item
+            const gradientHeight =
+                padWithNItems > 0 ? 1 / (padWithNItems * 2 + 1) : 0.3;
+
+            return (
+                <LinearGradient
+                    colors={colors}
+                    locations={[0, gradientHeight, 1 - gradientHeight, 1]}
+                    pointerEvents="none"
+                    style={styles.pickerGradientOverlay}
+                    {...pickerGradientOverlayProps}
+                />
+            );
+        }, [
+            LinearGradient,
+            MaskedView,
+            padWithNItems,
+            pickerGradientOverlayProps,
+            styles.pickerContainer.backgroundColor,
+            styles.pickerGradientOverlay,
+        ]);
+
         return (
             <View
                 pointerEvents={isDisabled ? "none" : undefined}
@@ -508,90 +628,18 @@ const DurationScroll = forwardRef<DurationScrollRef, DurationScrollProps>(
                     isDisabled && styles.disabledPickerContainer,
                 ]}
                 testID={testID}>
-                <FlatList
-                    key={flatListRenderKey}
-                    ref={flatListRef}
-                    contentContainerStyle={
-                        styles.durationScrollFlatListContentContainer
-                    }
-                    data={numbersForFlatList}
-                    decelerationRate={0.88}
-                    getItemLayout={getItemLayout}
-                    initialScrollIndex={initialScrollIndex}
-                    keyExtractor={(_, index) => index.toString()}
-                    nestedScrollEnabled
-                    onMomentumScrollEnd={onMomentumScrollEnd}
-                    onScroll={onScroll}
-                    renderItem={renderItem}
-                    scrollEnabled={!isDisabled}
-                    scrollEventThrottle={16}
-                    showsVerticalScrollIndicator={false}
-                    snapToAlignment="start"
-                    // used in place of snapToInterval due to bug on Android
-                    snapToOffsets={[...Array(numbersForFlatList.length)].map(
-                        (_, i) => i * styles.pickerItemContainer.height
-                    )}
-                    style={styles.durationScrollFlatList}
-                    testID="duration-scroll-flatlist"
-                    viewabilityConfigCallbackPairs={
-                        viewabilityConfigCallbackPairs
-                    }
-                    windowSize={numberOfItemsToShow}
-                />
-                <View pointerEvents="none" style={styles.pickerLabelContainer}>
-                    {typeof label === "string" ? (
-                        <Text
-                            allowFontScaling={allowFontScaling}
-                            style={styles.pickerLabel}>
-                            {label}
-                        </Text>
-                    ) : (
-                        label ?? null
-                    )}
-                </View>
-                {LinearGradient ? (
+                {MaskedView ? (
+                    <MaskedView
+                        maskElement={renderLinearGradient}
+                        style={[styles.maskedView]}>
+                        {renderContent}
+                    </MaskedView>
+                ) : (
                     <>
-                        <LinearGradient
-                            colors={[
-                                styles.pickerContainer.backgroundColor ??
-                                    "white",
-                                colorToRgba({
-                                    color:
-                                        styles.pickerContainer
-                                            .backgroundColor ?? "white",
-                                    opacity: 0,
-                                }),
-                            ]}
-                            end={{ x: 1, y: 1 }}
-                            pointerEvents="none"
-                            start={{ x: 1, y: 0.3 }}
-                            {...pickerGradientOverlayProps}
-                            {...topPickerGradientOverlayProps}
-                            style={[styles.pickerGradientOverlay, { top: 0 }]}
-                        />
-                        <LinearGradient
-                            colors={[
-                                colorToRgba({
-                                    color:
-                                        styles.pickerContainer
-                                            .backgroundColor ?? "white",
-                                    opacity: 0,
-                                }),
-                                styles.pickerContainer.backgroundColor ??
-                                    "white",
-                            ]}
-                            end={{ x: 1, y: 0.7 }}
-                            pointerEvents="none"
-                            start={{ x: 1, y: 0 }}
-                            {...pickerGradientOverlayProps}
-                            {...bottomPickerGradientOverlayProps}
-                            style={[
-                                styles.pickerGradientOverlay,
-                                { bottom: -1 },
-                            ]}
-                        />
+                        {renderContent}
+                        {renderLinearGradient}
                     </>
-                ) : null}
+                )}
             </View>
         );
     }

src/components/DurationScroll/types.ts

@@ -21,10 +21,10 @@ export interface DurationScrollProps {
     FlatList?: CustomFlatList;
     Haptics?: any;
     LinearGradient?: any;
+    MaskedView?: any;
     aggressivelyGetLatestDuration: boolean;
     allowFontScaling?: boolean;
     amLabel?: string;
-    bottomPickerGradientOverlayProps?: Partial<LinearGradientProps>;
     clickSoundAsset?: SoundAssetType;
     disableInfiniteScroll?: boolean;
     initialValue?: number;
@@ -44,7 +44,6 @@ export interface DurationScrollProps {
     repeatNumbersNTimesNotExplicitlySet: boolean;
     styles: ReturnType<typeof generateStyles>;
     testID?: string;
-    topPickerGradientOverlayProps?: Partial<LinearGradientProps>;
 }
 
 export interface DurationScrollRef {

src/components/TimerPicker/index.tsx

@@ -82,12 +82,9 @@ const TimerPicker = forwardRef<TimerPickerRef, TimerPickerProps>(
         );
 
         const styles = useMemo(
-            () =>
-                generateStyles(customStyles, {
-                    padWithNItems: safePadWithNItems,
-                }),
+            () => generateStyles(customStyles),
 
-            [safePadWithNItems, customStyles]
+            [customStyles]
         );
 
         const [selectedHours, setSelectedHours] = useState(