How can I pass a useSharedValue to another component so it can be used in useAnimatedStyle, but only allow read access (preventing .value from being mutated)?

[Choco-milk-for-u]

Hello everyone,
This isn't exactly an issue for me, but would be nice if there would be a way.
passing a useSharedValue to another component works fine. My problem is more on my side. sometimes im not careful enough and accidentally mutate the .value instead of just reading it.
I tried passing a function that returns .value and even tried marking it as a worklet, but then useAnimatedStyle does not react to changes in .value which makes sense.
Still, I’m wondering if there’s a way to enforce read-only access to a shared value. Thanks in advance for any help!

[MatiPl01]

Hey @Choco-milk-for-u!

1. TypeScript solution

If you use TypeScript, then you can use the type that won't allow .value assignment like this:

function ComponentA() {
  const sv = useSharedValue(0);

  return <ComponentB sv={sv} />;
}

type ComponentBProps = {
  sv: Readonly<SharedValue<number>>;
};

function ComponentB({ sv }: ComponentBProps) {
  useEffect(() => {
    // Writing is not allowed
    sv.value = 1;

    // Reading is fine
    console.log('sv', sv.value);
  }, [sv]);

  return null;
}

It still won't prevent you from assigning the value if you decide to ignore the TS error. For more safety, you can use the following approach.

2. Using Derived Values

Instead of passing a SharedValue object, you can use the useDerivedValue hook, which returns a value similar to the SharedValue with one important difference - this value cannot be assigned later on.

function ComponentA() {
  const sv = useSharedValue(0);

  const svDerived = useDerivedValue(() => {
    return sv.value + 1;
  });

  return <ComponentB sv={svDerived} />;
}

type ComponentBProps = {
  sv: DerivedValue<number>;
};

function ComponentB({ sv }: ComponentBProps) {
  useEffect(() => {
    console.log('ComponentB');
    // Writing is not allowed
    sv.value = 100;

    setTimeout(() => {
      console.log('sv timeout', sv.value);
    }, 1000);

    // Reading is fine
    console.log('sv', sv.value);
  }, [sv]);

  return null;
}

The use of the DerivedValue type instead of the SharedValue type ensures that TS won't allow you to assign to the .value filed. The sv.value = 100; still won't crash in the runtime but the value stored internally won't be updated so you won't mistakenly override it.

See that in the example above it still returns the same value after the timeout. When you replace the svDerived, passed from the ComponentA to the ComponentB, with the sv (<ComponentB sv={sv} />), then you will see that the value is changed after the timeout, so the plain SharedValue will get modified, whilst the derived value prevents you from unintentional modifications.

[Choco-milk-for-u]

Thank you so much! This is exactly what i needed