Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6581

React Native Skia chart not reactive (interpolation?)

$
0
0

I'm building a chart with react native skia, the chart has a few data options (eg. 8h, 24h, 7days etc.).

Initially the chart works perfectly fine, but when I change to a different data option a few things go wrong. (So basically when the data set provided for building a Path changes).

When the data changes:

  1. The new Path is being drawn, but the old one is not erased, it's still visible on Canvas (I have one , I only change it's 'path' prop value after recalculating linePath with Skia.Path.MakeFromSVGString).
  2. Sometimes after changing data set I get an error "malformed path data", but not always.

I wonder what can be done about this? Preferably I'd like to interpolate my path to a new one after data changes, but I have seen some tutorials/threads in the web, but they all seem outdated, using useValue, which is no longer available in Skia. They say that it was replaced by react-native-reanimated useSharedValue, but it doesn't work for path prop xd.

To summarize:

  1. How can I make the path to be drawn from scratch when data changes instead of having the old and the new path on the screen?
  2. Do you know what might be causing the error "malformed path data"?
  3. Do you know how I can interpolate Path to a new one after the data changes? Is it possible currently?

The way I get line path for reference (not providing all props and other logic to keep it easier to read):

`

const xDomain = data.map(dataPoint => dataPoint.label);const xRange = [chartMargin, chartWidth - chartMargin];const x = scalePoint().domain(xDomain).range(xRange).padding(0);    const yRange = [chartHeight, 0];    const max = Math.max(...data.map(item => item.value));const min = Math.min(...data.map(item => item.value));const yDomain = [min, max];const y = scaleLinear().domain(yDomain).range(yRange);    const curvedLine = line<MockedChartData>()    .x(d => x(d.label)!)    .y(d => y(d.value))    .curve(curveBasis)(data);const linePath = Skia.Path.MakeFromSVGString(curvedLine!);    return <Path path={linePath} />

`

I tried some solutions from the web which use useValue to interpolate path, but useValue is no longer available in Skia and useSharedValue doesn't work, resulting in a wrong type for path prop.


Viewing all articles
Browse latest Browse all 6581

Latest Images

Trending Articles



Latest Images