iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
- I have reviewed the documentation
- I have searched existing issues
- I am using the latest React Native version
On iOS, if attempting to animate a text component and a view component in parallel, preceded by an Animated.delay (or setTimeout), the text component will not animate:
doAnimate = () => {
Animated.sequence([
// Removing the delay here will fix the issue.
Animated.delay(1000),
Animated.parallel([
Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// If you remove "useNativeDriver" below, the animation works.
Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
])
]).start();
// This also fails to animate the text component:
// setTimeout(() => {
// Animated.parallel([
// Animated.timing(this.squareAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// Animated.timing(this.textAnimation, { toValue: 1, useNativeDriver: true, duration: 3000 }),
// ]).start();
// }, 1000);
}
componentDidMount() {
setTimeout(this.doAnimation, 3000);
}
render() {
return (
<View style={styles.container}>
<Animated.Text style={[styles.textContainer, {
opacity: this.textAnimation
}]}>
Welcome to React Native!
</Animated.Text>
<Animated.View style={[styles.squareContainer, {
opacity: this.squareAnimation
}]}>
</Animated.View>
</View>
);
}
If you remove "useNativeDriver" from the "textAnimation", the animation works. Also, making the textAnimation interpolate from viewAnimation does not work (that's how my code originally worked, but I broke them out into separate animations to test what was going wrong).
Environment
Environment:
OS: macOS High Sierra 10.13.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.3
react-native: 0.54.2 => 0.54.2
Steps to Reproduce
See code snippet above, alternatively you can check out my example repo:
git clone https://github.com/dannycochran/animationBug
cd animationBug
yarn install
react-native run-ios
Expected Behavior
The animations for both the View and Text component work, as they do on Android.
Actual Behavior
The text opacity never animates.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Clone the linked animationBug example, run yarn install and react-native run-ios, and reproduce the failure with Animated.delay or setTimeout before Animated.parallel. Start by tracing the Animated.sequence, Animated.parallel, and useNativeDriver paths shown in the report. Done means the text and view opacity animations both run on iOS after the delay, as they do on Android.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100