Storing multiple animated refs in shared value

[ciza99]

Hey,

I want to store multiple animated refs in a shared value. I add the refs to the shared value by registering from child components in a useEffect. However I guess since the setter function of a shared value is not synchronous, some of the refs dont get registered. How would I go about this?

shared value in parent context

  const draggables = useSharedValue<Record<Key, RefObject<Animated.View>>>({});

registering a new ref from a child component

  useEffect(() => {
    console.log("useDraggable register", id);
    // here is the problem I guess
    draggables.value = { ...draggables.value, [id]: ref };

    // cleanup
    return () => {
      draggables.value = Object.entries(draggables.value).reduce(
        (acc, [key, value]) => (key === id ? acc : { ...acc, [key]: value }),
        {}
      );
    };
  }, [id]);

After all components mount, some refs are missing in my shared value object. Tahnks for any tips :)

[ciza99]

I solved this by putting the refs into a state and when registering on mount using setState function with a callback