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

[dannycochran]

• 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.

[BonnieMilian]

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]

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]

Is there any update on this @lnikkila ?

[lnikkila]

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!

[vitto-moz]

Also noticed this issue, and only for <Text/>

[uguraktas]

I have same problem