Until there's a better way, this is a workaround for reanimated 2:

const [progress, setProgress] = useState(0);
const animationProgress = useSharedValue(0);

animationProgress.value = withTiming(1, {
	duration: 900,
	...
});

useDerivedValue(() => {
	runOnJS(setProgress)(animationProgress.value);
}, [animationProgress]);

<LottieView source={require('../../animations/playpause.json')} progress={progress} />

This blocks the JS thread so if you have an animation that runs forever then your screen will freeze and become non-interactive, even though the animation runs smoothly.

A better solution is to follow the standard animation props pattern introduced in Reanimated 2. Use the useAnimatedProps() hook so that everything is running on the UI thread.

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

const progress = useSharedValue(0);

const animatedProps = useAnimatedProps(() => {
  return {
    progress: progress.value,
  };
});

useEffect(() => {
  progress.value = withTiming(1);
}, [progress]);

return (
  <AnimatedLottieView
    source={require("../../assets/welcome-hero.json")}
    animatedProps={animatedProps}
  />
)

Uh oh!

how to collaborate with react-native-reanimated #698

Description

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions