Merge pull request #49 from troberts-28/release/v2.1.0

Release/v2.1.0

Author: troberts-28

.yarn/releases/yarn-3.6.4.cjs

@@ -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)
 

.yarn/releases/yarn-4.6.0.cjs

@@ -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",

.yarnrc.yml

@@ -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",