Organising code: useValue, useSharedValue, useState

[ryanpwaldon]

I'm using both Reanimated & Skia.

I have many components consuming different types of values (i.e. useValue, useSharedValue, useState).

At times, it feels super overwhelming to organise. Particularly, when I have to convert values before they're passed as props into a component (for example, state value → SkiaValue, or from a SharedValue to a SkiaValue).

Are there any nice ways / tips on how to manage this?

[wcandillon]

Yes Ryan we share this feeling. We recommend to use the Reanimated 3 integration if possible: https://shopify.github.io/react-native-skia/docs/animations/reanimated
This solves the confusion and also enables Skia animation on the UI-thread which is pretty fun :)

[ryanpwaldon]

Oh, I can't get it to work without Selectors, I've tried like so:

{bars.map((i) => (
  <Group key={i} opacity={barOpacities.current[index]}>
    ...
  </Group>
)}

But this will lose reactivity. Is there another method?

[wcandillon]

yes you need to wrap the Group in a component which receives i as a prop and within that component you can use useDerivedValue.
See this example: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Matrix/Matrix.tsx

[ryanpwaldon]

Yes! Thanks William, much better now :)

[schutzie]

yes you need to wrap the Group in a component which receives i as a prop and within that component you can use useDerivedValue. See this example: https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Matrix/Matrix.tsx

Missing in action - 404 :(

[wcandillon]

this is the link https://github.com/Shopify/react-native-skia/blob/main/apps/example/src/Examples/Matrix/Matrix.tsx