More examples + minor fixes

example/.eslintrc

@@ -12,6 +12,8 @@
     "no-var": "off",
     "@typescript-eslint/no-var-requires": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-empty-function": "off"
+    "@typescript-eslint/no-empty-function": "off",
+    "react/jsx-uses-react": "error",
+    "react/react-in-jsx-scope": "error"
   }
 }

example/src/App.tsx

@@ -7,6 +7,7 @@ import { API } from "./Examples/API";
 import { Breathe } from "./Examples/Breathe";
 import { Filters } from "./Examples/Filters";
 import { Gooey } from "./Examples/Gooey";
+import { Hue } from "./Examples/Hue";
 
 const App = () => {
   const Stack = createNativeStackNavigator();
@@ -25,6 +26,7 @@ const App = () => {
         <Stack.Screen name="Breathe" component={Breathe} />
         <Stack.Screen name="Filters" component={Filters} />
         <Stack.Screen name="Gooey" component={Gooey} />
+        <Stack.Screen name="Hue" component={Hue} />
         <Stack.Screen name="Drawing" component={DrawingExample} />
       </Stack.Navigator>
     </NavigationContainer>

example/src/Examples/API/Gradients2.tsx

@@ -16,7 +16,7 @@ import {
   vec,
   Turbulence,
   ColorShader,
-  Blend,
+  BlendShader,
 } from "@shopify/react-native-skia";
 
 const { width } = Dimensions.get("window");
@@ -69,10 +69,10 @@ export const Gradients = () => {
         </Paint>
         <Rect rect={r4} />
         <Paint>
-          <Blend mode="difference">
+          <BlendShader mode="difference">
             <ColorShader color="#61DAFB" />
             <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
-          </Blend>
+          </BlendShader>
         </Paint>
         <Rect rect={r5} />
       </Canvas>

example/src/Examples/API/PathEffect2.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import { StyleSheet, Dimensions, ScrollView } from "react-native";
+import {
+  Rect,
+  Paint,
+  transformOrigin,
+  sub,
+  Canvas,
+  Circle,
+  translate,
+  Skia,
+  PaintStyle,
+  DiscretePathEffect,
+  DashPathEffect,
+  Defs,
+  usePaintRef,
+  CornerPathEffect,
+  rect,
+  Path,
+  Group,
+} from "@shopify/react-native-skia";
+
+import { Title } from "./components/Title";
+
+const { width } = Dimensions.get("window");
+const SIZE = width;
+const path = Skia.Path.MakeFromSVGString(
+  // eslint-disable-next-line max-len
+  "M466 91C466 141.258 361.682 182 233 182C104.318 182 0 141.258 0 91C0 40.7421 104.318 0 233 0C361.682 0 466 40.7421 466 91Z"
+)!;
+
+const vWidth = 466;
+const vHeight = 182;
+const vOrigin = { x: vWidth / 2, y: vHeight / 2 };
+const scale = (SIZE - 64) / vWidth;
+const origin = { x: (vWidth * scale) / 2, y: (vHeight * scale) / 2 };
+const center = { x: SIZE / 2, y: SIZE / 2 };
+const basePaint = Skia.Paint();
+basePaint.setAntiAlias(true);
+basePaint.setColor(Skia.Color("#61DAFB"));
+
+const strokePaint = basePaint.copy();
+strokePaint.setStyle(PaintStyle.Stroke);
+strokePaint.setStrokeWidth(15);
+strokePaint.setPathEffect(Skia.PathEffect.MakeDiscrete(10, 4, 0));
+
+const transparentPaint = basePaint.copy();
+transparentPaint.setStyle(PaintStyle.Stroke);
+transparentPaint.setStrokeWidth(15);
+transparentPaint.setAlphaf(0.2);
+
+const Logo = () => {
+  return (
+    <>
+      <Circle c={center} r={30} style="fill" />
+      <Group>
+        <Group transform={[...translate(sub(center, origin)), { scale }]}>
+          <Path path={path} style="stroke" strokeWidth={15} />
+        </Group>
+        <Group
+          transform={[
+            ...translate(sub(center, origin)),
+            { scale },
+            ...transformOrigin(vOrigin, [{ rotate: Math.PI / 3 }]),
+          ]}
+        >
+          <Path path={path} style="stroke" strokeWidth={15} />
+        </Group>
+        <Group
+          transform={[
+            ...translate(sub(center, origin)),
+            { scale },
+            ...transformOrigin(vOrigin, [{ rotate: -Math.PI / 3 }]),
+          ]}
+        >
+          <Path path={path} style="stroke" strokeWidth={15} />
+        </Group>
+      </Group>
+    </>
+  );
+};
+
+const rect1 = rect(0, 0, vWidth, vHeight);
+const SquaredLogo = () => {
+  const regularPaint = usePaintRef();
+  return (
+    <>
+      <Defs>
+        <Paint
+          ref={regularPaint}
+          color="#61DAFB"
+          opacity={0.5}
+          style="stroke"
+          strokeWidth={15}
+        />
+      </Defs>
+      <Circle c={center} r={30} style="fill" />
+      <Group>
+        <Group transform={[...translate(sub(center, origin)), { scale }]}>
+          <Rect rect={rect1} paint={regularPaint} />
+          <Rect rect={rect1} />
+        </Group>
+        <Group
+          transform={[
+            ...translate(sub(center, origin)),
+            { scale },
+            ...transformOrigin(vOrigin, [{ rotate: Math.PI / 3 }]),
+          ]}
+        >
+          <Rect rect={rect1} paint={regularPaint} />
+          <Rect rect={rect1} />
+        </Group>
+        <Group
+          transform={[
+            ...translate(sub(center, origin)),
+            { scale },
+            ...transformOrigin(vOrigin, [{ rotate: -Math.PI / 3 }]),
+          ]}
+        >
+          <Rect rect={rect1} paint={regularPaint} />
+          <Rect rect={rect1} />
+        </Group>
+      </Group>
+    </>
+  );
+};
+
+export const PathEffectDemo = () => {
+  return (
+    <ScrollView>
+      <Title>Discrete</Title>
+      <Canvas style={styles.container}>
+        <Paint color="#61DAFB" style="stroke" strokeWidth={15}>
+          <DiscretePathEffect length={10} deviation={4} />
+        </Paint>
+        <Logo />
+      </Canvas>
+
+      <Title>Dash</Title>
+      <Canvas style={styles.container}>
+        <Paint color="#61DAFB" style="stroke" strokeWidth={15}>
+          <DashPathEffect intervals={[10, 10]} />
+        </Paint>
+        <Logo />
+      </Canvas>
+
+      <Title>Corner</Title>
+      <Canvas style={styles.container}>
+        <Paint color="#61DAFB" style="stroke" strokeWidth={15}>
+          <CornerPathEffect r={200} />
+        </Paint>
+        <SquaredLogo />
+      </Canvas>
+
+      <Title>Compose</Title>
+      <Canvas style={styles.container}>
+        <Paint color="#61DAFB" style="stroke" strokeWidth={15}>
+          <DashPathEffect intervals={[10, 10]}>
+            <DiscretePathEffect length={10} deviation={10} />
+          </DashPathEffect>
+        </Paint>
+        <Logo />
+      </Canvas>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: SIZE,
+    height: SIZE,
+  },
+});

example/src/Examples/API/Shapes2.tsx

@@ -14,6 +14,8 @@ import {
   vec,
   rect,
   rrect,
+  Paint,
+  DashPathEffect,
 } from "@shopify/react-native-skia";
 
 import { Title } from "./components/Title";
@@ -62,7 +64,7 @@ export const Shapes = () => {
       <Title>Rectangles</Title>
       <Canvas style={styles.container}>
         <Group color="#61DAFB">
-          <Rect rect={{ x: 0, y: 0, width: 100, height: 100 }} />
+          <Rect rect={{ x: PADDING, y: PADDING, width: 100, height: 100 }} />
           <Rect
             x={SIZE + 2 * PADDING}
             y={PADDING}
@@ -76,7 +78,16 @@ export const Shapes = () => {
       <Title>Ovals & Circles</Title>
       <Canvas style={styles.container}>
         <Group color="#61DAFB">
-          <Oval x={PADDING} y={PADDING} width={2 * SIZE} height={SIZE} />
+          <Oval x={PADDING} y={PADDING} width={2 * SIZE} height={SIZE}>
+            <Paint
+              style="stroke"
+              color="#61fbcf"
+              strokeWidth={10}
+              opacity={0.5}
+            >
+              <DashPathEffect intervals={[10, 10]} />
+            </Paint>
+          </Oval>
           <Oval
             rect={rect(2 * SIZE + 2 * 16 + SIZE / 2, PADDING, SIZE, SIZE)}
           />

example/src/Examples/API/index.tsx

@@ -3,7 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import type { Routes } from "./Routes";
 import { List } from "./List";
-import { PathEffect } from "./PathEffect";
+import { PathEffectDemo } from "./PathEffect2";
 import { Shapes } from "./Shapes2";
 import { Clipping } from "./Clipping2";
 import { Transform } from "./Transform";
@@ -68,7 +68,7 @@ export const API = () => {
       />
       <Stack.Screen
         name="PathEffect"
-        component={PathEffect}
+        component={PathEffectDemo}
         options={{
           title: "⭐️ Path Effects",
         }}

example/src/Examples/Breathe/Breathe.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { Dimensions, StyleSheet } from "react-native";
 import type { FrameValue } from "@shopify/react-native-skia";
 import {
-  vec,
   Blur,
+  vec,
   Canvas,
   Circle,
   Fill,

example/src/Examples/Gooey/Gooey.tsx

@@ -1,13 +1,102 @@
-import { Canvas, Fill } from "@shopify/react-native-skia";
-//import { Dimensions } from "react-native";
+/* eslint-disable max-len */
+import React from "react";
+import {
+  Canvas,
+  Fill,
+  Skia,
+  translate,
+  vec,
+  useLoop,
+  Group,
+  PathOp,
+  rotate,
+  mixVector,
+  Paint,
+  usePaintRef,
+  Defs,
+  Circle,
+  BlurImageFilter,
+  ColorMatrix,
+  ColorFilterAsImageFilter,
+} from "@shopify/react-native-skia";
+import { Dimensions } from "react-native";
 
-//const { width, height } = Dimensions.get("window");
-//const center = vec(width / 2, height / 2 - 64);
+import { Icon, R } from "./components/Icon";
+import { Hamburger } from "./components/Hamburger";
+import { BG, FG } from "./components/Theme";
+
+const { width, height } = Dimensions.get("window");
+const c = vec(width / 2, height / 2 - 64);
+
+const p1 = Skia.Path.MakeFromSVGString(
+  "M 22.54 6.42 A 2.78 2.78 0 0 0 20.6 4.42 C 18.88 4 12 4 12 4 C 12 4 5.12 4 3.4 4.46 A 2.78 2.78 0 0 0 1.46 6.46 A 29 29 0 0 0 1 11.75 A 29 29 0 0 0 1.46 17.08 A 2.78 2.78 0 0 0 3.4 19 C 5.12 19.46 12 19.46 12 19.46 C 12 19.46 18.88 19.46 20.6 19 A 2.78 2.78 0 0 0 22.54 17 A 29 29 0 0 0 23 11.75 A 29 29 0 0 0 22.54 6.42 Z"
+)!;
+const p2 = Skia.Path.MakeFromSVGString(
+  "M 9.75 15.02 L 15.5 11.75 L 9.75 8.48 L 9.75 15.02 Z"
+)!;
+const youtube = Skia.Path.MakeFromOp(p1, p2, PathOp.Difference)!;
+
+const icons = [
+  {
+    path: Skia.Path.MakeFromSVGString(
+      "M 23 3 A 10.9 10.9 0 0 1 19.86 4.53 A 4.48 4.48 0 0 0 12 7.53 L 12 8.53 A 10.66 10.66 0 0 1 3 4 C 3 4 -1 13 8 17 A 11.64 11.64 0 0 1 1 19 C 10 24 21 19 21 7.5 A 4.5 4.5 0 0 0 20.92 6.67 A 7.72 7.72 0 0 0 23 3 Z"
+    )!,
+    dst: rotate(vec(c.x + 150, c.y), c, Math.PI / 4),
+  },
+  {
+    path: Skia.Path.MakeFromSVGString(
+      "M 18 2 L 15 2 A 5 5 0 0 0 10 7 L 10 10 H 7 V 14 H 10 V 22 H 14 V 14 H 17 L 18 10 H 14 V 7 A 1 1 0 0 1 15 6 H 18 Z"
+    )!,
+    dst: rotate(vec(c.x + 150, c.y), c, Math.PI / 2),
+  },
+  {
+    path: youtube,
+    dst: rotate(vec(c.x + 150, c.y), c, 0.75 * Math.PI),
+  },
+];
 
 export const Gooey = () => {
+  const paint = usePaintRef();
+  const progress = useLoop({ duration: 2000 });
   return (
-    <Canvas style={{ flex: 1 }}>
-      <Fill color="lightblue" />
+    <Canvas style={{ flex: 1 }} mode="continuous">
+      <Defs>
+        <Paint ref={paint}>
+          <ColorFilterAsImageFilter>
+            <ColorMatrix
+              value={[
+                1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7,
+              ]}
+            />
+            <BlurImageFilter sigmaX={20} sigmaY={20} />
+          </ColorFilterAsImageFilter>
+        </Paint>
+      </Defs>
+      <Fill color={BG} />
+      <Group rasterize={paint}>
+        {icons.map(({ dst }, i) => (
+          <Group
+            key={i}
+            transform={(ctx) => translate(mixVector(progress(ctx), c, dst))}
+          >
+            <Circle r={R} color={FG} />
+          </Group>
+        ))}
+        <Group transform={translate(c)}>
+          <Circle r={R} color={FG} />
+        </Group>
+      </Group>
+      {icons.map(({ path, dst }, i) => (
+        <Group
+          key={i}
+          transform={(ctx) => translate(mixVector(progress(ctx), c, dst))}
+        >
+          <Icon path={path} />
+        </Group>
+      ))}
+      <Group transform={translate(c)}>
+        <Hamburger />
+      </Group>
     </Canvas>
   );
 };