Updating LottieView progress via useAnimatedProps broken

[AlexanderEggers]

Description

When trying to update the progress of a LottieView (lottie-react-native) via the useAnimatedProps hook, the actual update is not received by the component and nothing seems to change on the screen. That used to work in v2 without issues.

Possible workaround for a few cases but not all:

  const animationProgressController = useSharedValue(0);

  const animatedProps = useAnimatedProps(() => ({
    progress: animationProgressController.value,
  }));
  const [progress, setProgress] = useState<number>(0);
  useDerivedValue(() => {
    runOnJS(setProgress)(animationProgressController.value);
  }, [animationProgressController]);

Steps to reproduce

1. Checkout https://github.com/AlexanderEggers/ReanimatedIssue/tree/reanimated-hook-issue
2. You will notice that nothing happens on the screen
3. Update the reanimated version to the latest v2
4. Run the application again and the lottie animation progress is now correctly handled

Snack or a link to a repository

https://github.com/AlexanderEggers/ReanimatedIssue/tree/reanimated-hook-issue

Reanimated version

3.3.0

React Native version

0.71.11

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[AlexanderEggers]

@tomekzaw This is the other blocking issue in my project to update reanimated to v3 that I have mentioned here.

[tomekzaw]

@AlexanderEggers Thanks for submitting the issue as well as providing the repro, currently I'm quite busy but I will take a look at it soon.

[AlexanderEggers]

@tomekzaw Do you have any updates yet?

[LeoAnt02]

Any update on this ? @tomekzaw