initialize SharedValue from another SharedValue

[freeboub]

Hello,

For some reason, I need to initialize a SharedValue with the value of another SharedValue (ParentComponent provide a SharedValue to ChildComponent and the ChildComponent need to animate the value in another way).

Can you please explicite what is the best way to do that ?

this natural way is intialize it like this:

const childSharedValue = useSharedValue(parentSharedValue.value);

But it causes a warning on last version as we access to the .value from JS thread.

I currently workaround it like this:

  const childSharedValue = useSharedValue(0);

  useEffect(() => {
    runOnUI(() => {
      childSharedValue.value = parentSharedValue.value;
    });
  }, [childSharedValue, parentSharedValue]);

But it is not really clean as we have a small time where childSharedValue is 0

ideally, I would like to write it like this:

const childSharedValue = useSharedValue(parentSharedValue);

but use useSharedValue doesn't accept a SharedValue as prop, but I think it can be an interesting enhancement.

[freeboub]

I had a look into the code, it looks like easy to extend the api to accept a SharedValue as useSharedValue parameter.
Do it make sense for software-mansion team ?
I regarding to the the code, can implement it.

[MatiPl01]

I think that this may be useful to extend the behavior of the useSharedValue hook. We will talk internally about that. You can always write your own hook, like the proposed one below.

[MatiPl01]

Hey @freeboub!

Sorry for the late response.

You can safely read the .value property of the SharedValue when the component mounts (during the initial render) but not during subsequent renders. To do this, you can implement your own hook similar to this:

function useOtherSharedValue<T>(value: SharedValue<T>): SharedValue<T> {
  const initialValueRef = useRef<T | undefined>(undefined);
  const isFirstRenderRef = useRef(true);

  if (isFirstRenderRef.current) {
    initialValueRef.current = value.value;
    isFirstRenderRef.current = false;
  }

  return useSharedValue(initialValueRef.current as T);
}

Since we need the initial value only once, when the useSharedValue is called (which happens when the component mounts), you can read the .value only during initial render and pass it to the useSharedValue hook.

[MatiPl01]

You can also use the .modify method of the SharedValue which will update the value right away.

function useOtherSharedValue<T>(value: SharedValue<T>): SharedValue<T> {
  const isFirstRenderRef = useRef(true);
  const otherValue = useSharedValue<T | undefined>(undefined);

  if (isFirstRenderRef.current) {
    otherValue.modify(() => {
      'worklet';
      return value.value as any;
    });
  }

  return otherValue as SharedValue<T>;
}

But I don't recommend this solution as the .modify shouldn't be used in most cases.