Dynamically render Skia elements from a SharedValue<[]>?

[davidjosefson]

I'm stuck with an issue that I've struggling with for the past two days, which is how to render Skia elements dynamically based on items inside a SharedValue<Object[]>.

The effect I'm after is that when panning inside a chart the number of rows in my legend should instantly be updated with the corresponding y-values.

I'm using victory-native, react-native-reanimated and react-native-skia. I get a "chart press state" from victory which is defined like this:

export type ChartPressState<Init extends ChartPressStateInit> = {
  isActive: SharedValue<boolean>;
  x: { value: SharedValue<Init["x"]>; position: SharedValue<number> };
  y: Record<
    keyof Init["y"],
    { value: SharedValue<number>; position: SharedValue<number> }
  >;
};

So I basically get an object that looks like this:

{
  y:  {
    "apple {
         value: 10  // this is a shared value
     },
    "orange" {
         value: 50  // this is a shared value
     }
     ...   // I can get 0-n fields here depending on the data on the clicked point in the chart
  }
}

I need to filter this data for non-unique and empty values everytime it updates, which I can do successfully inside a useDerivedValue(), like this:

const uniqueValues = useDerivedValue(() => {
	const seenLegendRows = new Set<string>();
        return Object.values(pressState.y).filter((point, index) => {
		const uniqueKey = graphBlock.layout[index].name + ':' + point?.value?.value;
		return (point != null || point != undefined) && !seenLegendRows.has(uniqueKey) &&  seenLegendRows.add(uniqueKey);
	});
});

uniqueValues is now a Readonly<SharedValue<{value: SharedValue<number>, position: SharedValue<number>}[]>>

Is it possible to somehow map over this SharedValue-array and render one Skia <Text> per item dynamically - all on the UI thread?
Or is there any other Skia element that is better suited for this kind of task?

As long as I keep the original data structure without filtering (an array of SharedValues) its no biggie to render the legend - but I have to filter the values before using them. Is it possible to somehow get an array of SharedValues from useDerivedValues() instead of an array inside a SharedValue?

[wcandillon]

you probably want to use an offscreen surface for that or a picture: https://shopify.github.io/react-native-skia/docs/shapes/pictures/