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:
- 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). - 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:
- 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?
- Do you know what might be causing the error "malformed path data"?
- 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.






