feat. maskedView

reanimatedRN/App.tsx

@@ -10,6 +10,7 @@ import Transitions from "./src/Transitions";
 import FlatList from "./src/FlatList";
 import StickyFooter from "./src/StickyFooter";
 import ProgressBar from "./src/ProgressBar";
+import MaskedView from "./src/MaskedView";
 
 const Stack = createStackNavigator();
 
@@ -91,6 +92,14 @@ const AppNavigator = () => (
                 header: () => null,
             }}
         />
+        <Stack.Screen
+            name='MaskedView'
+            component={MaskedView}
+            options={{
+                title: "MaskedView",
+                header: () => null,
+            }}
+        />
     </Stack.Navigator>
 );
 

reanimatedRN/src/Main/Main.tsx

@@ -32,6 +32,9 @@ const Main = ({ navigation }: any) => {
                 <Pressable onPress={() => navigation.navigate("ProgressBar")} style={styles.buttonContainer}>
                     <Text style={styles.text}>ProgressBar</Text>
                 </Pressable>
+                <Pressable onPress={() => navigation.navigate("Masked View")} style={styles.buttonContainer}>
+                    <Text style={styles.text}>Masked View</Text>
+                </Pressable>
             </View>
         </ScrollView>
     );

reanimatedRN/src/MaskedView/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { View, Image } from "react-native";
+import MaskedView from "@react-native-community/masked-view";
+
+interface ComponentProps {
+    ring: Ring;
+}
+
+type Color = string;
+
+interface Ring {
+    start: Color;
+    end: Color;
+    bg: Color;
+    theta: number;
+    size: number;
+}
+
+export default ({ ring }: ComponentProps) => {
+    const maskElement = (
+        <Image
+            style={{
+                width: ring.size,
+                height: ring.size,
+                backgroundColor: "transparent",
+                borderRadius: ring.size / 2,
+            }}
+            source={require("./mask.png")}
+        />
+    );
+    return (
+        <View
+            style={{
+                width: ring.size,
+                height: ring.size,
+                borderRadius: ring.size / 2,
+                backgroundColor: ring.start,
+            }}
+        >
+            <MaskedView style={{ flex: 1, backgroundColor: "transparent" }} {...{ maskElement }}>
+                <View style={{ flex: 1, borderRadius: ring.size / 2, backgroundColor: ring.start }} />
+            </MaskedView>
+        </View>
+    );
+};

reanimatedRN/yarn.lock

@@ -1528,7 +1528,7 @@
 
 "@react-native-community/masked-view@^0.1.11":
   version "0.1.11"
-  resolved "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.11.tgz"
+  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
   integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
 
 "@react-native/[email protected]":