getTextWidth and array of SkiaMutableValue

[LucasReinaldo]

Hey folks, I have a chart component where I am rendering a tooltip in case the user presses and slide across the bars right.

The bars can be stacked and I want to render a tooltip based on the values of the bars, but for some reason when I pass an array of strings to the SkiaText component it doesn't update the value on the screen, only when I use a useValue, is it right or can I follow another approach?

My second issue seems to be in getTextWidth, depending on how I move the width of the tooltip changes but not how it should, sometimes it has different sizes for the same value.

Attached is an example with a line chart.
https://github.com/Shopify/react-native-skia/assets/26369276/eceee745-9921-4e3a-b3e1-22f752b92f3f

export interface ChartPoint {
  x: string;
  y: number;
}

type Margin = {
  top: number;
  right: number;
  bottom: number;
  left: number;
};

export interface TooltipProps {
  x: SkiaMutableValue<number>;
  margin: Margin;
  backgroundColor?: string;
  height?: number;
  values: SkiaMutableValue<string>[];
  fontSize?: number;
  opacity: SkiaMutableValue<number>;
  index: SkiaMutableValue<number>;
}

const Tooltip = (props: TooltipProps) => {
  const {
    x,
    margin,
    backgroundColor = appStyles.colors.gray_800,
    height = constants.GRAPH_HEIGHT,
    values,
    fontSize = 16,
    opacity,
    index,
  } = props;

  const font = useFont(Font.medium, fontSize, error => {
    console.log('Tooltip:useFont: ', error);
  });

  const xScaleBounds = React.useMemo(() => {
    return [margin.left, constants.GRAPH_WIDTH - margin.right / 2] as const;
  }, [margin]);

  const xPos = useComputedValue(() => {
    return clamp(x.current, xScaleBounds[0], xScaleBounds[1]);
  }, [x]);

  const width = useComputedValue(() => {
    if (!values.length) {
      return 32;
    }

    const widths = values.map(value => {
      return font?.getTextWidth(value.current) || 0;
    });

    const maxWidth = Math.max(...widths);

    return maxWidth + 12;
  }, [opacity, values, font, index]);

  const transformLine = useComputedValue(() => {
    return [{ translateX: clamp(x.current, xScaleBounds[0], xScaleBounds[1]) }];
  }, [x]);

  const transformTooltip = useComputedValue(() => {
    const alignRight = xPos.current - width.current <= xScaleBounds[0];

    if (alignRight) {
      return [{ translateX: xPos.current - 6 }];
    }

    const alignLeft = xPos.current + width.current >= xScaleBounds[1];

    if (alignLeft) {
      return [{ translateX: xPos.current - width.current + 6 }];
    }

    return [{ translateX: xPos.current - width.current / 2 }];
  }, [xPos, width]);

  if (!font) {
    return null;
  }

  return (
    <Group opacity={opacity}>
      <Group transform={transformLine}>
        <Line
          p1={vec(0, height - margin.bottom)}
          p2={vec(0, margin.top)}
          color={appStyles.colors.gray_300}
          style="stroke"
          strokeWidth={1.5}>
          <DashPathEffect intervals={[2, 2]} />
        </Line>
      </Group>

      <Group transform={transformTooltip}>
        <RoundedRect
          r={10}
          x={0}
          y={0}
          strokeCap="round"
          strokeJoin="round"
          width={width}
          height={Math.max(32, fontSize + 18 * (values.length || 1))}
          color={backgroundColor}
        />

        {values.map((value, index) => {
          return (
            <SkiaText
              key={index}
              x={8}
              y={Math.max((32 + 14) / 2, fontSize + 14 / 2) * (index + 1)}
              text={value}
              color={appStyles.colors.white}
            />
          );
        })}
      </Group>
    </Group>
  );
};

export default Tooltip;