📝 ➕ add MaskedView dependency to example and update example app to show usage

Author: troberts-28

examples/example-expo/App.tsx

@@ -11,6 +11,7 @@ import { Audio } from "expo-av";
 import * as Haptics from "expo-haptics";
 import { LinearGradient } from "expo-linear-gradient";
 import {
+    Image,
     LayoutAnimation,
     Platform,
     Pressable,
@@ -27,6 +28,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 import { TimerPicker, TimerPickerModal } from "../../src";
 
 import { formatTime } from "./utils/formatTime";
+import MaskedView from "@react-native-masked-view/masked-view";
 
 if (Platform.OS === "android") {
     UIManager.setLayoutAnimationEnabledExperimental?.(true);
@@ -118,6 +120,7 @@ export default function App() {
                         setAlarmStringExample1(formatTime(pickedDuration));
                         setShowPickerExample1(false);
                     }}
+                    hideHours
                     setIsVisible={setShowPickerExample1}
                     styles={{
                         theme: "dark",
@@ -187,7 +190,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 +204,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,
                         },
@@ -226,7 +233,7 @@ export default function App() {
                         },
                     }}
                 />
-            </View>
+            </LinearGradient>
         );
     }, [screenWidth]);
 
@@ -363,7 +370,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.11",
         "expo-av": "~15.0.1",
         "expo-haptics": "~14.0.0",

yarn.lock

@@ -2881,6 +2881,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-masked-view/masked-view@npm:0.3.2":
+  version: 0.3.2
+  resolution: "@react-native-masked-view/masked-view@npm:0.3.2"
+  peerDependencies:
+    react: ">=16"
+    react-native: ">=0.57"
+  checksum: e35ab882148df3f9b71f04355d2fb1b24d6f2aaf29043f80758f398bdf905eed67734b36b072fa8b934923ff4e3d80ccb5e37d8376cb1825272078b96a21dadc
+  languageName: node
+  linkType: hard
+
 "@react-native/assets-registry@npm:0.76.2":
   version: 0.76.2
   resolution: "@react-native/assets-registry@npm:0.76.2"
@@ -6326,6 +6336,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.24.0
     "@expo/vector-icons": ^14.0.3
+    "@react-native-masked-view/masked-view": 0.3.2
     "@types/react": ~18.3.12
     "@typescript-eslint/eslint-plugin": ">=5.49.0"
     "@typescript-eslint/parser": ">=5.49.0"