Dynamic Shared Values

[jakubgrzelak]

Hey community!
I am struggling with adding shared values dynamically. I am building trello like board from the scratch. Before I render cards in their lists I have to build values such as x, y and order. It is done like that cause I must be able to modify cards from inside other card - for instance to reorder them.

const offsets = lists.map((list, index) => {
  return {
    x: useSharedValue(0),   // list x placement 
    y: useSharedValue(0),   // list y placement 
    items: list.items.map((item, i) => ({
      x: useSharedValue(0),   // item x placement 
      y: useSharedValue(0),   // item y placement 
      order: useSharedValue(i),
    }))
 });

After that I am able to attach that values onLayout. I made it work but unfortunately there is a huge memory leak with such implementation. @wcandillon uses such approach in his tutorial https://www.youtube.com/watch?v=tHWGKdpj1rs
I know that such usage validates rules of hooks ... Can you suggest other solution? Another suggestion to use makeMutable instead of useSharedValue doesn't help cause memory leak increases after each come back to board.

[NiccoloCase]

i have the same problem. documentation lacks of real word examples. Have you found a solution? Thanks

[MatiPl01]

I shouldn't recommend you using makeMutable, but it is the only way to achieve what you want. See this page in docs.

In general, if you forget to cleanup these values when your component unmounts (run cancelAnimation on the shared value), you can get memory leaks and huge performance issues as animations might be never cancelled and run in the background so use this carefully.

There is no safe API to create shared values in other way than by using a dedicated useSharedValue hook. I know that this is cumbersome but, unfortunately, reanimated doesn't provide other safe way to deal with shared values.