Refactor example to use Canvas as children of GestureDector (#2520)

Shopify · Jul 8, 2024 · cc7f30d · cc7f30d
1 parent 5665baa
commit cc7f30d
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 147 deletions.
diff --git a/example/jestSetup.mjs b/example/jestSetup.mjs
@@ -56,3 +56,10 @@ jest.mock("@react-navigation/native", () => {
     }),
   };
 });
+
+jest.mock("react-native-gesture-handler", () => {
+  return {
+    ...jest.requireActual("react-native-gesture-handler"),
+    GestureDetector: jest.fn(),
+  };
+});
diff --git a/example/src/Examples/API/Touch.tsx b/example/src/Examples/API/Touch.tsx
@@ -71,14 +71,13 @@ export const Touch = () => {
     <View style={styles.container}>
       <Title>Touch handling</Title>
       <View style={{ flex: 1 }}>
-        <Canvas style={styles.container}>
-          <Fill color="white" />
-          <Group style="stroke" strokeWidth={8}>
-            <Picture picture={picture} />
-          </Group>
-        </Canvas>
         <GestureDetector gesture={gesture}>
-          <View style={StyleSheet.absoluteFill} />
+          <Canvas style={styles.container}>
+            <Fill color="white" />
+            <Group style="stroke" strokeWidth={8}>
+              <Picture picture={picture} />
+            </Group>
+          </Canvas>
         </GestureDetector>
       </View>
     </View>

diff --git a/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx b/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
@@ -12,12 +12,9 @@ import {
   useImage,
   useClock,
 } from "@shopify/react-native-skia";
-import { View, useWindowDimensions, StyleSheet } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { GestureDetector } from "react-native-gesture-handler";
 
 import { createNoise2D } from "../../../components/SimpleNoise";
@@ -178,39 +175,38 @@ export const CoonsPatchMeshGradient = ({
 
   return (
     <View>
-      <Canvas style={{ width, height }}>
-        <Group>
-          <ImageShader image={image} tx="repeat" ty="repeat" />
-          {rects.map((r, i) => {
+      <GestureDetector gesture={gesture}>
+        <Canvas style={{ width, height }}>
+          <Group>
+            <ImageShader image={image} tx="repeat" ty="repeat" />
+            {rects.map((r, i) => {
+              return (
+                <RectPatch
+                  key={i}
+                  r={r}
+                  mesh={mesh}
+                  debug={debug}
+                  lines={lines}
+                  colors={colors}
+                  defaultMesh={defaultMesh}
+                />
+              );
+            })}
+          </Group>
+          {defaultMesh.map(({ pos }, index) => {
+            if (isEdge(pos, window) || !handles) {
+              return null;
+            }
             return (
-              <RectPatch
-                key={i}
-                r={r}
+              <Cubic
+                key={index}
                 mesh={mesh}
-                debug={debug}
-                lines={lines}
-                colors={colors}
-                defaultMesh={defaultMesh}
+                index={index}
+                color={colors[index]}
               />
             );
           })}
-        </Group>
-        {defaultMesh.map(({ pos }, index) => {
-          if (isEdge(pos, window) || !handles) {
-            return null;
-          }
-          return (
-            <Cubic
-              key={index}
-              mesh={mesh}
-              index={index}
-              color={colors[index]}
-            />
-          );
-        })}
-      </Canvas>
-      <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        </Canvas>
       </GestureDetector>
     </View>
   );

diff --git a/example/src/Examples/Gooey/Gooey.tsx b/example/src/Examples/Gooey/Gooey.tsx
@@ -15,9 +15,9 @@ import {
   Blur,
   ColorMatrix,
 } from "@shopify/react-native-skia";
-import { View, useWindowDimensions, StyleSheet } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
+import {
   useDerivedValue,
   useSharedValue,
   withSpring,
@@ -111,42 +111,47 @@ export const Gooey = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={{ flex: 1 }}>
-        <Fill color={BG} />
-        <Group
-          layer={
-            <Paint>
-              <ColorMatrix
-                matrix={[
-                  1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7,
-                ]}
+      <GestureDetector gesture={gesture}>
+        <Canvas style={{ flex: 1 }}>
+          <Fill color={BG} />
+          <Group
+            layer={
+              <Paint>
+                <ColorMatrix
+                  matrix={[
+                    1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18,
+                    -7,
+                  ]}
+                />
+                <Blur blur={20} />
+              </Paint>
+            }
+          >
+            {icons.map((icon, i) => (
+              <IconBackground
+                key={i}
+                progress={progress}
+                c={c}
+                dst={icon.dst}
               />
-              <Blur blur={20} />
-            </Paint>
-          }
-        >
+            ))}
+            <Group transform={translate(c)}>
+              <Circle r={R} color={FG} />
+            </Group>
+          </Group>
           {icons.map((icon, i) => (
-            <IconBackground key={i} progress={progress} c={c} dst={icon.dst} />
+            <IconForeground
+              key={i}
+              progress={progress}
+              c={c}
+              dst={icon.dst}
+              path={icon.path}
+            />
           ))}
           <Group transform={translate(c)}>
-            <Circle r={R} color={FG} />
+            <Hamburger />
           </Group>
-        </Group>
-        {icons.map((icon, i) => (
-          <IconForeground
-            key={i}
-            progress={progress}
-            c={c}
-            dst={icon.dst}
-            path={icon.path}
-          />
-        ))}
-        <Group transform={translate(c)}>
-          <Hamburger />
-        </Group>
-      </Canvas>
-      <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        </Canvas>
       </GestureDetector>
     </View>
   );

diff --git a/example/src/Examples/Graphs/Slider.tsx b/example/src/Examples/Graphs/Slider.tsx
@@ -14,10 +14,7 @@ import {
 import React, { useMemo } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
 import { createGraphPath } from "./createGraphPath";
 import type { GraphProps } from "./types";
@@ -54,30 +51,29 @@ export const Slider: React.FC<GraphProps> = ({ height, width }) => {
   });
   return (
     <View style={{ height, marginBottom: 10 }}>
-      <Canvas style={styles.graph}>
-        <Fill color="black" />
-        <Path
-          path={path}
-          strokeWidth={4}
-          style="stroke"
-          strokeJoin="round"
-          strokeCap="round"
-        >
-          <LinearGradient
-            start={vec(0, height * 0.5)}
-            end={vec(width * 0.5, height * 0.5)}
-            colors={["black", "#DA4167"]}
-          />
-        </Path>
-        <Group color="#fff">
-          <Circle c={touchPos} r={10} />
-          <Circle color="#DA4167" c={touchPos} r={7.5} />
-          <SkiaText font={font} x={textX} y={textY} text={label} />
-          <Line p1={lineP1} p2={lineP2} />
-        </Group>
-      </Canvas>
       <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        <Canvas style={styles.graph}>
+          <Fill color="black" />
+          <Path
+            path={path}
+            strokeWidth={4}
+            style="stroke"
+            strokeJoin="round"
+            strokeCap="round"
+          >
+            <LinearGradient
+              start={vec(0, height * 0.5)}
+              end={vec(width * 0.5, height * 0.5)}
+              colors={["black", "#DA4167"]}
+            />
+          </Path>
+          <Group color="#fff">
+            <Circle c={touchPos} r={10} />
+            <Circle color="#DA4167" c={touchPos} r={7.5} />
+            <SkiaText font={font} x={textX} y={textY} text={label} />
+            <Line p1={lineP1} p2={lineP2} />
+          </Group>
+        </Canvas>
       </GestureDetector>
       <Text>Touch and drag to move center point</Text>
     </View>

diff --git a/example/src/Examples/Hue/Hue.tsx b/example/src/Examples/Hue/Hue.tsx
@@ -12,9 +12,9 @@ import {
   polar2Canvas,
   Shader,
 } from "@shopify/react-native-skia";
-import { StyleSheet, View, useWindowDimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { useSharedValue } from "react-native-reanimated";
+import { useSharedValue } from "react-native-reanimated";
 
 import { polar2Color } from "./Helpers";
 
@@ -57,19 +57,18 @@ export const Hue = () => {
   });
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={{ flex: 1 }}>
-        <Fill color={color} />
-        <Circle c={c} r={r}>
-          <BlurMask blur={40} style="solid" />
-          <Shader source={source} uniforms={{ c, r }} />
-        </Circle>
-        <Circle r={20} color="black" cx={translateX} cy={translateY}>
-          <BlurMask blur={10} style="solid" />
-        </Circle>
-        <Circle r={15} color={color} cx={translateX} cy={translateY} />
-      </Canvas>
       <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        <Canvas style={{ flex: 1 }}>
+          <Fill color={color} />
+          <Circle c={c} r={r}>
+            <BlurMask blur={40} style="solid" />
+            <Shader source={source} uniforms={{ c, r }} />
+          </Circle>
+          <Circle r={20} color="black" cx={translateX} cy={translateY}>
+            <BlurMask blur={10} style="solid" />
+          </Circle>
+          <Circle r={15} color={color} cx={translateX} cy={translateY} />
+        </Canvas>
       </GestureDetector>
     </View>
   );

diff --git a/example/src/Examples/Performance/PerformanceRects.tsx b/example/src/Examples/Performance/PerformanceRects.tsx
@@ -10,10 +10,7 @@ import {
 } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
 const Size = 25;
 const Increaser = 50;
@@ -66,13 +63,12 @@ export const PerformanceDrawingTest: React.FC = () => {
         </View>
       </View>
       <View style={{ flex: 1 }}>
-        <Canvas style={styles.container} mode="default">
-          {rects.map((_, i) => (
-            <Rct pos={pos} key={i} rct={rects[i]} />
-          ))}
-        </Canvas>
         <GestureDetector gesture={gesture}>
-          <Animated.View style={StyleSheet.absoluteFill} />
+          <Canvas style={styles.container} mode="default">
+            {rects.map((_, i) => (
+              <Rct pos={pos} key={i} rct={rects[i]} />
+            ))}
+          </Canvas>
         </GestureDetector>
       </View>
     </View>