Render an array of <Circle> based on an useValue<Array<Vector>>

[xcoderreal]

Hi!

I'm looking into a simple use case of useMultiTouchHandler: Render a <Circle> for each tracked touch and update its positions with the updated positions of these touches.

One idea was to track these touches as an useRef<Array<TouchInfo>> and the positions with useValue<Array<Vector>>.

However, I'm struggling to do a .current.map(...) to render a <Circle> for each position.

Here's my code:

import {
  Canvas,
  Circle,
  TouchInfo,
  useMultiTouchHandler,
  useValue,
  Vector,
} from "@shopify/react-native-skia";
import React, { useRef } from "react";

// Draw the i-th touch using the colors[i] as the color.
const colors = ["#2D4CD2", "#3CF2B5", "#A80DD8", "#36B6D9", "#37FF5E"] as const;
const maxNumTouches = 5;

const MyComponent = () => {
  const currentTouches = useRef<Array<TouchInfo>>([]);
  const centerArray = useValue<Array<Vector>>([]);

  const touchHandler = useMultiTouchHandler({
    onStart: (t) => {
      // Handle up to 5 touches.
      if (currentTouches.current.length < maxNumTouches) {
        currentTouches.current.push(t);
        centerArray.current.push({ x: t.x, y: t.y });
      }
    },
    onActive: (t) => {
      // Update the circle center using the touch's new position.
      const index = currentTouches.current.findIndex((p) => p.id === t.id);
      console.log(t);
      if (index >= 0) {
        centerArray.current[index] = { x: t.x, y: t.y };
      }
    },
    onEnd: (t) => {
      // Remove the touch from the list of touch/colors if it is being tracked.
      const index = currentTouches.current.findIndex((p) => p.id === t.id);
      if (index > -1) {
        // only splice array when item is found
        currentTouches.current.splice(index, 1);
        centerArray.current.splice(index, 1);
      }
    },
  });

  return (
    <Canvas style={{ flex: 1 }} onTouch={touchHandler}>
      {centerArray.current.map(({ x, y }, index) => {
        return <Circle cx={x} cy={y} r={10} color={colors[index]} />;
      })}
    </Canvas>
  );
};

export default MyComponent;

I think the gist of the issue is centerArray.current is stuck at being [].

Any thoughts or suggestions?

(Basically a clone of https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/API/Touch.tsx, but avoiding more advanced API like Drawing and DrawingContext.)

Thanks!

(P.S.: As you might recognize, this is an attempt to address change requests in #911 -- sorry for the delay there.)

[wcandillon]

Hello there,

if the number of drawing commands is animated (e.g. changing the React tree/start won't be fast enough), you need to use the custom drawing component: https://shopify.github.io/react-native-skia/docs/getting-started/hello-world#example-2

Here is an example: https://github.com/software-mansion-labs/drawings-and-animations-workshop/blob/main/src/SkiaLogo/PathGradient.tsx#L97

[xcoderreal]

Thanks for the response.

I guess I get the performance reason of using <Drawing>.

If we really want to do something like centerArray.map, where centerArray is a useValue<Array<Vector>>, is there a way?

[wcandillon]

You have to choose if you want to render things in the React rendering cycle or the animation rendering cycle. Based on those decisions, you can use the right construct. In React: you can have a "dynamic" number of children, if you want the same at animation time, you need to use the Drawing component.

Another solution is if you know the "max" number of circle, you can display them using Circle and have them visible only if activated

[xcoderreal]

Thanks again William! Also appreciate the multiple alternatives :)

React state, Drawing component, pre-determined max number of circles.