Animated domain for CartesianChart

[bryanmylee]

Currently, I'm trying to implement a feature where the cartesian chart's domain updates as the user scrolls through the dataset.

I'm achieving this by updating domain.y on the chart and handling the pan gesture manually.

However, the performance is less than ideal due to React re-rendering.

// ...
// `panGesture: Gesture`
// `xDomain: [number, number]`
// `yDomain: [number, number]`
const { panGesture, xDomain, yDomain } = useScrollableChartDomain();

return (
  <GestureDetector gesture={panGesture}>
    <View>
      <CartesianChart
        // ...
        domain={{ x: xDomain, y: yDomain }}
      >
        {({ points }) => (...)}
      </CartesianChart>
    </View>
  </GestureDetector>
);

Would it be possible to support a shared value for the domain prop on <CartesianChart />, so I could pass a shared value and skip re-rendering on React?

Ideally:

// ...
// `panGesture: Gesture`
// `domain: SharedValue<{ x: [number, number], y: [number, number] }}>`
const { panGesture, domain } = useScrollableChartDomain();

return (
  <GestureDetector gesture={panGesture}>
    <View>
      <CartesianChart
        // ...
        domain={domain}
      >
        {({ points }) => (...)}
      </CartesianChart>
    </View>
  </GestureDetector>
);