Animating multiple text components

[ronickg]

So I have stumbled upon a little road block trying to figure out how to animate my text with the scale value. Creating the path was easy as all I needed to do is useDerivedValue which then returns the full path of the x-axis with ticks. But for drawing text I have to always set an x and y value, which has to be a useValue in order to update the position. But I can just loop through scale..current.ticks() as the x values are static then.

The text glyps look promising for a second, but it only takes a single string and divides the string into each character. Maybe something like this but for an array of text would be useful aswell ?

Is there any example of using the useValue with an array ?

https://gyazo.com/433960663be215b4f2d480a041094b49

    <Group>
      <Path path={path} color={'grey'} />
      {'bandwidth' in scale.current
        ? scale.current.domain().map((d) => {
            return <></>;
          })
        : scale.current.ticks(numTicks).map((d, i) => {
            return (
              <TextComponent
                d={d}
                i={i}
                scale={scale}
                orientation={orientation}
                tickLength={tickLength}
                tickLabelOffset={tickLabelOffset}
                left={left}
                top={top}
              />
            );
          })}
    </Group>

Text Component

const TextComponent = ({ scale, d, orientation, tickLength, tickLabelOffset, left, top, i }) => {
  const typeface = Skia.FontMgr.RefDefault().matchFamilyStyle('serif');
  const font = Skia.Font(typeface, 9);
  const fontMeasurements = font.measureText(i.toString());

  const x = useDerivedValue(() => {
    const barX = scale.current(d);
    const isVertical = orientation === Orientation.left || orientation === Orientation.right;

    let labelX, labelY;
    if (isVertical) {
      labelX =
        orientation === Orientation.left
          ? -tickLength - fontMeasurements.width - tickLabelOffset
          : left + tickLabelOffset + tickLength;
      labelY = barX + fontMeasurements.height / 2;
    } else {
      labelX = barX - fontMeasurements.width / 2;
      labelY =
        orientation === Orientation.top
          ? top - tickLength - tickLabelOffset
          : top + tickLength + fontMeasurements.height + tickLabelOffset;
    }
    return labelX;
  }, [scale, orientation, d]);

  return (
    <Text
      x={x}
      y={
        orientation === Orientation.top
          ? top - tickLength - tickLabelOffset
          : top + tickLength + fontMeasurements.height + tickLabelOffset
      }
      text={i.toString()}
      color={'grey'}
      familyName="serif"
      size={9}
    />
  );
};

[ronickg]

I was able to find the op function, which seems to solve my issues.

[ronickg]

Here's an example for anyone facing something similar. Creating one path in a computed value and by using the op function to combine paths.

  const computedPath = useComputedValue(() => {
    const path = Skia.Path.Make();
    const lineRect = {
      x: left,
      y: top,
      width: isVertical ? strokeWidth : width,
      height: isVertical ? width : strokeWidth,
    };

    path.addRect(lineRect);
    const textPath = Skia.Path.MakeFromText("random text", 0, 0, font);
    path.op(textPath, 2);
    return path;
}, []);

[chrfalch]

I would not create a path inside the computed value hook - the computed value's evaluation function is called whenever a dependency is changed - and might be called a lot of times when doing animations or touch events.

Since you don't provide any dependencies for the computed value it should be enough to create it within a memo:

const computedPath = useMemo(() => {
 const path = Skia.Path.Make();
 const lineRect = {
      x: left,
      y: top,
      width: isVertical ? strokeWidth : width,
      height: isVertical ? width : strokeWidth,
  };

  path.addRect(lineRect);
  const textPath = Skia.Path.MakeFromText("random text", 0, 0, font);
  path.op(textPath, 2);
  return path;
}, []);

[ronickg]

Okay thx for the tipp, as I am currently having some perfomance issues which might be solved by using useMemo instead.

[chrfalch]

Adding a reference to #648 here - guess it is related :)

[quicksilverr]

Hey @BubbleTrouble14 , In your design, can't we use the axisBottom function? That d3 provides?

[ronickg]

Yea, thats why I think one has to do it manually. I can share the code I am using, its not perfect yet though.

[quicksilverr]

Please do share, I'm like a super beginner at React Native Skia, D3 and Charts. So, Trying to figure out as I go.

The React native Skia docs also are not that helpful IMO. Like Could you share a good learning resource as well?

[ronickg]

Sure will do. Having a look at visx helped me a lot. But otherwise just reading and watching video's helped me learn it.

[ronickg]

U got discord ? Its easier for me to share certain files like that.

[quicksilverr]

Sure, I got discord. Here's my ID - ali21#5330