Fix animations (#1619) ## Description #### Problem 1 Until now we used to break the execution of setting a new value of a mutable with animation in order to prevent going through the setting process for the same value. But we cannot do this for higher-order animations(they have the same current value as the ones they include). The problem occurs when we have a shared value and, let's say, a couple of animations placed together in some higher-order animation like `withSequence`, and the first one has the same target value as the shared value current value. The flow stops but it should go on and execute the rest of the animations. #### Problem 2 Another thing is we didn't support breaking animations on component unmount until now. The worst scenario(not that rare though) would be when a user would run infinite animation using `withRepeat` with repeats value set to `0`(goes infinitely). They would have to stop the animation manually, like this: ``` const sv = useSharedValue(10); sv.value = withRepeat(withTiming(Math.random() * 400 + 100), 0); useEffect(() => { return () => { cancelAnimation(sv); }; }, []); ``` But that could easily be skipped and cause efficiency problems after some rerenders(the unstopped animations would be proceeding in the background). ## Test code and steps to reproduce

problem 1

``` import Animated, { useSharedValue, withTiming, useAnimatedStyle, withSequence, withRepeat, } from 'react-native-reanimated'; import { View } from 'react-native'; import React from 'react'; export default function AnimatedStyleUpdateExample() { const randomWidth = useSharedValue(10); randomWidth.value = withRepeat( withSequence( withTiming(10, { duration: 500 }), withTiming(100, { duration: 500 }) ), 0, true, () => { console.log('clb'); } ); const style = useAnimatedStyle(() => { return { width: randomWidth.value, }; }); return ( ); } ```

problem 2

``` import Animated, { useSharedValue, withTiming, useAnimatedStyle, withRepeat, } from 'react-native-reanimated'; import { View, StyleSheet } from 'react-native'; import React, { useEffect } from 'react'; export default function Test() { const sv = useSharedValue(10); useEffect(() => { sv.value = withRepeat( withTiming(Math.random() * 400 + 100, null, () => { console.log('clb #1'); }), 0 ); }, []); const style1 = useAnimatedStyle(() => { return { width: sv.value, }; }); const style2 = useAnimatedStyle(() => { return { width: withRepeat( withTiming(Math.random() * 200 + 100, null, () => { console.log('clb #2'); }), 0 ), }; }); return ( ); } const styles = StyleSheet.create({ box: { width: 100, height: 50, backgroundColor: 'orange', margin: 20, }, }); ```

## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes

Roadmap #1

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions