iOS: Multiple animations which use "useNativeDriver" do not work if preceded by a delay.

dannycochran commented 6 years ago

[x] I have reviewed the documentation
[x] I have searched existing issues
[x] 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.

BonnieMilian commented 6 years ago

Same having problems with Animated and setTimeout, sometimes setTimeout fires early. Debuging using a Android phone.

React 16.0.0 RN 0.50.0

lnikkila commented 6 years ago

This seems to be specific to animated Text components, a viable workaround is to wrap the Text with an animated View.

Here’s the animation I’m using:

    const loadingAnimation = Animated.sequence([
      Animated.timing(loadingOpacity, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }),
      Animated.timing(loadingTextOpacity, {
        toValue: 1,
        delay: 5000,
        duration: 1000,
        useNativeDriver: true
      })
    ]);

Neither Animated.sequence nor Animated.parallel work properly.
This also happens if the delay is set in Animated.timing directly instead of Animated.delay
I’m unable to reproduce this on Android.

RN 0.55.4

yezarela commented 6 years ago

Is there any update on this @lnikkila ?

lnikkila commented 6 years ago

I’m not a maintainer, unfortunately I don’t know when this is going to be fixed. Since it doesn’t result in a major loss of functionality and there’s a workaround it probably doesn’t have a very high priority. I’m sure pull requests are welcome though!