How to combine worklets and useImperativeHandle?

[enzomanuelmangano]

Specifically, the problem I am experiencing occurs when I try to pass a function into useImperativeHandle, for instance:

const scrollTo = useCallback((destination: number) => {
 'worklet';
 active.value = destination !== 0;

 translateY.value = withSpring(destination, { damping: 50 });
}, []);

useImperativeHandle(ref, () => ({ scrollTo, isActive }), [
 scrollTo,
 isActive,
]);

scrollTo is a worklet, but when I pass it into the ref and try to call it from the parent component, I can't reuse it as a worklet.
For example, the code below will not work and we'll get the error "Cannot assign to read-only property 'current'".
What is interesting is that by doing a hot reload and passing the same code instead, the function will be considered a worklet 🫣

useDerivedValue(() => {
  ref.current?.scrollTo(100);
}, []);

However, I was wondering if there was a way to handle this pattern so that the function of a child component could be reused in a parent component.
An initial idea was to not use the useImperativeHandle but perhaps pass the function into a SharedValue, but unfortunately even then it does not work, since we can't pass functions through SharedValues 🙄

I sincerely hope that someone has an answer to this topic 🥹

[mr-ryan-james]

@enzomanuelmangano Thanks so much for posting this. I thought I was going crazy—I'm experiencing the same issue with an Imperative Handle and the same error. I kept trying to fix it the wrong way, but now I know what the problem is. It looks like I'll need to find a different method to get it to work without the Imperative Handle for now. Cheers!

[VictorioMolina]

same here

[VictorioMolina]

@enzomanuelmangano @mr-ryan-james did you guys find any workaround?

[mr-ryan-james]

In my case specifically, I was able to write most of my animations outside of any react context, and animate them by passing in the shared value

import { voiceCaptureTime } from "app/store/VoiceOnboardingStore"
import { useState } from "react"
import {
  runOnJS,
  useSharedValue,
  useAnimatedReaction,
  withTiming,
  SharedValue,
  Easing,
} from "react-native-reanimated"

export const animateToEnd = (progress: SharedValue<number>) => {
  "worklet"
  progress.value = withTiming(1, {
    duration: voiceCaptureTime - voiceCaptureTime * progress.value,
    easing: Easing.inOut(Easing.ease),
  })
}

export const animateIncrementAndFinish = (progress: SharedValue<number>) => {
  "worklet"
  progress.value = withTiming(
    Math.min(progress.value + 0.05, 1),
    {
      duration: 100,
    },
    () => {
      animateToEnd(progress)
    },
  )
}

export const incrementAnimation = (progress: SharedValue<number>) => {
  animateIncrementAndFinish(progress)
}

export const startAnimation = (progress: SharedValue<number>) => {
  animateToEnd(progress)
}

export const finishAnimationQuickly = (progress: SharedValue<number>) => {
  "worklet"
  progress.value = withTiming(1, { duration: 200 })
}

export const resetAnimation = (progress: SharedValue<number>) => {
  "worklet"
  progress.value = withTiming(0, { duration: 200 })
}

const useCircleAnimation = () => {
  const progress = useSharedValue(0)
  const [hasFinished, setHasFinished] = useState(false)

  useAnimatedReaction(
    () => {
      return progress.value
    },
    (currentValue, previousValue) => {
      if (currentValue !== previousValue && progress.value === 1) {
        runOnJS(setHasFinished)(true)
      }
    },
  )

  return {
    progress,
    hasFinished,
  }
}

export default useCircleAnimation