what is this #1
Comments
|
🤣 I kindly ask for a few more days of patience |
likern
referenced
this issue
in likern/react-native-reanimated
Jul 20, 2020
Add runOnUI() & processColor()
karol-bisztyga
added a commit
that referenced
this issue
Jan 13, 2021
## 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 #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 (
<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
RobertWHurst
pushed a commit
to hailogroup/react-native-reanimated
that referenced
this issue
Oct 28, 2022
Exposed support for pull to refresh
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the suspense is killing me!
The text was updated successfully, but these errors were encountered: