Roadmap #1
Comments
lxp-git
pushed a commit
to Flickering-AI/react-native-blur
that referenced
this issue
Mar 7, 2022
## 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
<details>
<summary>problem 1</summary>
```
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 (
<View
style={{
flex: 1,
flexDirection: 'column',
}}>
<Animated.View
style={[
{ width: 100, height: 80, backgroundColor: 'black', margin: 30 },
style,
]}
/>
</View>
);
}
```
</details>
<details>
<summary>problem 2</summary>
```
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 Kureev#1');
}),
0
);
}, []);
const style1 = useAnimatedStyle(() => {
return {
width: sv.value,
};
});
const style2 = useAnimatedStyle(() => {
return {
width: withRepeat(
withTiming(Math.random() * 200 + 100, null, () => {
console.log('clb Kureev#2');
}),
0
),
};
});
return (
<View>
<Animated.View style={[styles.box, style1]} />
<Animated.View style={[styles.box, style2]} />
</View>
);
}
const styles = StyleSheet.create({
box: {
width: 100,
height: 50,
backgroundColor: 'orange',
margin: 20,
},
});
```
</details>
## Checklist
- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes
Chasty
pushed a commit
to Chasty/react-native-blur
that referenced
this issue
Jul 12, 2022
Migrate code to Typescript
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
light,extra lightanddarkThe text was updated successfully, but these errors were encountered: