performance drawing/painting using skia

[mihaiserban]

I've tried to implement a drawing component using skia, but failed so far to get a decent experience for this use case using react-native-skia

Most examples of drawing/painting use useState to store the paths, and then use the declarative API to draw onto Canvas. after a couple of paths it get's really slow.

There's one repo drawing-board which uses both the declarative and imperative APIs. It uses a SkiaView to get the reference of the canvas and drawPath on touches, when finished sets the path in state and uses to draw the completed paths. This crashes on iOS.. so no good, wasn't able to debug it.

Can react-native-skia be used for this use case? 60fps drawing app?

[ludwighen]

I wanted to achieve something similar today and managed to get to a smooth experience by using Reanimated.
My project was already using Reanimated 3 so it was fine but I am not sure if you can achieve it with just RN Skia.

Basically the part about using the state to render the already drawn paths work fine, we just need a solution to animate the currently drawn path which has to be an animated prop using useDerivedValue and Reanimated's gesture API.

My implementation (not perfect but at least working, hope it helps):

  const currentPathObject = useSharedValue(Skia.Path.Make());
  const currentPathX = useSharedValue(0);
  const currentPathY = useSharedValue(0);
  const isStartDrawing = useSharedValue(false);

  const currentPath = useDerivedValue(() => {
    const newPath = currentPathObject.value.copy();
    if (isStartDrawing.value) {
      newPath.moveTo(currentPathX.value, currentPathY.value);
      newPath.lineTo(currentPathX.value, currentPathY.value);
    } else if (currentPathX.value !== 0 && currentPathY.value !== 0) {
      newPath.lineTo(currentPathX.value, currentPathY.value);
    }
    currentPathObject.value = newPath;
    return newPath;
  });

 const pan = Gesture.Pan()
    .averageTouches(true)
    .maxPointers(1)
    .onBegin(e => {
      currentPathX.value = e.x;
      currentPathY.value = e.y;
      isStartDrawing.value = true;
    })
    .onChange(e => {
      currentPathX.value = e.x;
      currentPathY.value = e.y;
      isStartDrawing.value = false;
    });

return (
  <GestureDetector gesture={pan}>
     <Canvas
        style={{ width, height: canvasHeight }}
      >
              <Path
                path={currentPath}
                style="stroke"
                strokeWidth={20}
                strokeCap="round"
                strokeJoin="round"
              />
    </Canvas>
  </GestureDetector>
)

[ludwighen]

Update: I just found this in the doc, I am very dumb :)

Just tested it and the implementation actually becomes way easier and it's the correct way to do it:

const currentPath = useSharedValue(Skia.Path.Make().moveTo(0, 0));

  const pan = Gesture.Pan()
    .averageTouches(true)
    .maxPointers(1)
    .onBegin(e => {
      currentPath.value.moveTo(e.x, e.y);
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    })
    .onChange(e => {
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    });

return (
  <GestureDetector gesture={pan}>
     <Canvas
        style={{ width, height: canvasHeight }}
      >
              <Path
                path={currentPath}
                style="stroke"
                strokeWidth={20}
                strokeCap="round"
                strokeJoin="round"
              />
    </Canvas>
  </GestureDetector>
)

[mihaiserban]

just tried it myself, performance is decent :) nice find! thank you!

[chris24elias]

If you wanted to have multiple paths with different colors or stroke widths, relying on a single Path wouldn't work. What would you suggest would be the most performant way to handle it in this case?

[brandtnewlabs]

Update: I just found this in the doc, I am very dumb :)

Just tested it and the implementation actually becomes way easier and it's the correct way to do it:

const currentPath = useSharedValue(Skia.Path.Make().moveTo(0, 0));

  const pan = Gesture.Pan()
    .averageTouches(true)
    .maxPointers(1)
    .onBegin(e => {
      currentPath.value.moveTo(e.x, e.y);
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    })
    .onChange(e => {
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    });

return (
  <GestureDetector gesture={pan}>
     <Canvas
        style={{ width, height: canvasHeight }}
      >
              <Path
                path={currentPath}
                style="stroke"
                strokeWidth={20}
                strokeCap="round"
                strokeJoin="round"
              />
    </Canvas>
  </GestureDetector>
)

Thanks so much for this example! Here's the component I created (and don't forget to wrap your whole app in the ... 👇

import React from "react";
import { StyleSheet, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";

import { Canvas, Path, Skia, notifyChange } from "@shopify/react-native-skia";

const DrawingCanvas: React.FC = () => {
  const currentPath = useSharedValue(Skia.Path.Make().moveTo(0, 0));

  const pan = Gesture.Pan()
    .averageTouches(true)
    .maxPointers(1)
    .onBegin((e) => {
      currentPath.value.moveTo(e.x, e.y);
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    })
    .onChange((e) => {
      currentPath.value.lineTo(e.x, e.y);
      notifyChange(currentPath);
    });

  return (
    <View style={StyleSheet.absoluteFill}>
      <GestureDetector gesture={pan}>
        <Canvas style={StyleSheet.absoluteFill}>
          <Path
            path={currentPath}
            style="stroke"
            strokeWidth={40}
            strokeCap="round"
            strokeJoin="round"
            color="rgba(255, 255, 255, 0.5)"
          />
        </Canvas>
      </GestureDetector>
    </View>
  );
};

export { DrawingCanvas };

[thinhcnb297]

I follow code example but error

[mzruiz]

Hola hola,

For PencilBible we:

1. Store all drawings (we call Annotations) for a single Page/Document/etc in a single redux slice
2. Created an OldAnnotationCanvas that component uses these 'oldAnnotations'
3. Created a CurrentAnnotationCanvas component that declares a touchHandler that, onEnd (which represents a finger/pencil lift), we take the SVG created by Skia, format it and add to the redux slice mentioned in step 1 - we then reset the 'path' used by CurrentAnnotationCanvas
4. As we transition pages, retrieve those Annotations from an external (MMKV/Firebase) source and update redux (removing old via complete reset) to use the newly-retrieved Annotations

Having these two separate components makes it pretty performant before you get to 1k+ Annotations on a single page. Some folks Annotate a lot in PB as they draw, highlight, and take notes.