Build against RN 0.64.0 on JitPack #2
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hypest
changed the title
7 tasks
13 tasks
7 tasks
fluiddot
pushed a commit
that referenced
this pull request
Feb 28, 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 #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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds these changes: