chore(📖): Add picture example (#3585)

Author: wcandillon

apps/docs/docs/pictures.md

@@ -33,6 +33,7 @@ const size = 256;
 const n = 20;
 
 const paint = Skia.Paint();
+const recorder = Skia.PictureRecorder();
 
 export const HelloWorld = () => {
   const progress = useSharedValue(0);
@@ -43,7 +44,6 @@ export const HelloWorld = () => {
 
   const picture = useDerivedValue(() => {
     "worklet";
-    const recorder = Skia.PictureRecorder();
     const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size));
     const numberOfCircles = Math.floor(progress.value * n);
     for (let i = 0; i < numberOfCircles; i++) {

apps/example/src/App.tsx

@@ -33,6 +33,7 @@ import {
   Video,
   Chat,
   LiquidGlass,
+  Pictures,
 } from "./Examples";
 import { CI, Tests } from "./Tests";
 import { HomeScreen } from "./Home";
@@ -71,6 +72,7 @@ const linking: LinkingOptions<StackParamList> = {
       SpeedTest: "speedtest",
       Video: "video",
       Chat: "chat",
+      Pictures: "pictures",
     },
   },
   prefixes: ["rnskia://"],
@@ -232,6 +234,7 @@ const App = () => {
               name="Performance"
               component={PerformanceDrawingTest}
             />
+            <Stack.Screen name="Pictures" component={Pictures} />
           </Stack.Navigator>
         </NavigationContainer>
       </GestureHandlerRootView>

apps/example/src/Examples/Pictures/Pictures.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import { Canvas, Picture, Skia } from "@shopify/react-native-skia";
+import {
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+
+const size = 256;
+const n = 20;
+
+const paint = Skia.Paint();
+
+export const Pictures = () => {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true);
+  }, [progress]);
+
+  const picture = useDerivedValue(() => {
+    "worklet";
+    const recorder = Skia.PictureRecorder();
+    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size));
+    const angle = progress.value * Math.PI * 2;
+    for (let i = 0; i < n; i++) {
+      const alpha = Math.pow((i + 1) / n, 5) * 200;
+      const r = ((i + 1) / n) * (size / 4);
+      const offset = ((i + 1) / n) * (size / 4);
+      const cx = size / 2 + Math.cos(angle + (i * Math.PI * 2) / n) * offset;
+      const cy = size / 2 + Math.sin(angle + (i * Math.PI * 2) / n) * offset;
+      paint.setColor(Skia.Color(`rgba(0, 122, 255, ${alpha / 255})`));
+      canvas.drawCircle(cx, cy, r, paint);
+    }
+    return recorder.finishRecordingAsPicture();
+  });
+
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Picture picture={picture} />
+    </Canvas>
+  );
+};

apps/example/src/Examples/Pictures/index.ts

@@ -0,0 +1 @@
+export * from "./Pictures";

apps/example/src/Examples/index.ts

@@ -28,3 +28,4 @@ export * from "./FrostedCard";
 export * from "./SpeedTest";
 export * from "./Video";
 export * from "./Chat";
+export * from "./Pictures";

apps/example/src/Home/HomeScreen.tsx

@@ -122,6 +122,11 @@ export const HomeScreen = () => {
       />
       <HomeScreenButton title="📹 Video" description="Video" route="Video" />
       <HomeScreenButton title="💬 Chat" description="Chat" route="Chat" />
+      <HomeScreenButton
+        title="🖼 Pictures"
+        description="Animated circle trail using Pictures"
+        route="Pictures"
+      />
     </ScrollView>
   );
 };

apps/example/src/types.ts

@@ -30,4 +30,5 @@ export type StackParamList = {
   SpeedTest: undefined;
   Video: undefined;
   Chat: undefined;
+  Pictures: undefined;
 };