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.