Initializing a shared value outside of component tree

[yukta357]

Inside of components, we'll do:
const foo = useSharedValue(0);

What if we want to do the same, but outside of a react component? For example, how can this be done from inside a store like Redux or Zustand?

In my case, I have a zustand store in which I'm orchestrating complex animations. I'd like to be able to initialize and modify shared values directly in the store, so I can continue to have dumb, modular components.

I hear there is makeMutable, but I can't find anything official on it.

[MatiPl01]

Hey!

If you want to initialize the shared value outside of the component, you can use the makeMutable function that is used internally by the useSharedValue hook.

It is not documented yet and it is generally not recommended to use makeMutable as it's API may change over time between reanimated versions but it is the only way to suit your needs.

Example code:

const globalSharedValue = makeMutable(0);

[MatiPl01]

I will mark this comment as answer because it is the only possible way to initialize mutable values outside of components in the current reanimated implementation and it probably won't change in the near future.

More details about makeMutable and its caveats can be found in docs.

[AdamGerthel]

I have the exact same request. I have a big state tree in MobX and sometimes I (currently) have to jump through hoops to combine what I need from my state management and the components. I can do this with Animated quite easily since it doesn't require hooks.

Would love to see makeMutable become more publicly visible/usable.