Compatibility with React compiler

[eppisapiafsl]

Hello!

I have a few questions around the library and the React compiler, looking for implementation guidance and best practices

While using set together with withSequence isn't defined in the documentation, the animation works as expected, also help us to fix the Eslint react-compiler

We should use the sv.set and sv.get methods to comply with the compiler, while it fixes the EsLint plugin error, sometimes we get an Invariant error in the React Compiler logs.

Code example

function LoadingIndicator({
  onAnimationFinished,
}: {
  onAnimationFinished: () => void;
}) {
  const progressRef = useSharedValue(0);
  const [progress, setProgress] = useState(0);

  useDerivedValue(() => {
    runOnJS(setProgress)(progressRef.value);
  });

  useEffect(() => {
    progressRef.set(
      withSequence(
        withTiming(0.75, {
          duration: 3000,
          easing: Easing.inOut(Easing.ease),
        }),
        withDelay(
          500,
          withTiming(
            1,
            {
              duration: 1000,
              easing: Easing.inOut(Easing.ease),
            },
            () => runOnJS(onAnimationFinished)(),
          ),
        ),
      ),
    );
  }, [onAnimationFinished, progressRef]);
  
  return <View.....

Compiler detail

  "detail": {
transform[stderr]:     "reason": "[HIR] Forget internal error: cannot resolve shape ReanimatedSharedValueId",
transform[stderr]:     "description": null,
transform[stderr]:     "loc": null,
transform[stderr]:     "suggestions": null,
transform[stderr]:     "severity": "Invariant"
transform[stderr]:   }
transform[stderr]: }

[tjzel]

Hi @eppisapiafsl, I'm not sure what is that you're asking about. The error you are logging from the compiler seems like an internal compiler issue - from our point of view the code snippet you provided is 100% correct.

[eppisapiafsl]

from our point of view, the code snippet you provided is 100% correct.

Glad to hear that 🚀

The React compiler failed to compile that component due to the "Invariant" value; I guess it's due to the React compiler being in beta, so it's a case that they haven't added yet