Native animation driver crashes on Android with uninitialized interpolation, when running another animation first

[ndbroadbent]

Description

I am running scale and rotate animations separately. The native driver is throwing an error on Android when I run the scale animation first. I am using a rotation interpolation like this:

const rotateValue = new Animated.Value(0)

const rotateValuesDegrees = rotateValue.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  }))

I'm getting this crash when I run a scale animation first, before I run any rotation animations:

Trying to update interpolation node that has not been attached to the parent

(From: InterpolationAnimatedNode.java:136

My app is running animations during componentWillReceiveProps, and I can see that the views have been rendered. (So it's not because the view isn't rendered yet.)

I've just figured out that it works when I manually run a no-op rotation animation first, or in parallel with the scale animation. I guess that initializes the interpolation and stops the crash from happening.

Reproduction Steps and Sample Code

I created a test repo where you can reproduce the crash.

Instructions:

1. git clone https://github.com/ndbroadbent/RNRepro-AndroidAnimNativeDriverCrash.git
2. cd RNRepro-AndroidAnimNativeDriverCrash
3. npm install
4. react-native run-android

Here's a link to the relevant code in index.android.js.

Solution

I think the interpolation needs to be implicitly initialized somewhere, so that it doesn't crash when other animations are run first.

Additional Information

• React Native version: 0.43.3
• Platform: crash only happens on Android
• Development Operating System: MacOS
• Dev tools: Testing on Android emulator running 6.0.0, API 23

[btk]

As this issue a new one, and I'm getting the same error, with a similar setup on react native 0.43.2, platform android, system macOS, testing on android 6 phone might be a good additional data for any debuggers.

+1

[sjmueller]

Having the same problem, reproduced on 0.44.0

[ndbroadbent]

@sjmueller I've been able to work around this by just running an animation or setting an initial value on the interpolated Animated.Value, before any other animations are run.

For example:

const foo = Animated.Value(0)
const bar = Animated.Value(0)

const fooInterpolated = foo.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
}))


// This crashes:
Animated.timing(bar, { toValue: 1, duration: 500 }).start()

// This works:
foo.setValue(0)
Animated.timing(bar, { toValue: 1, duration: 500 }).start()

// Alternatively:
Animated.parallel([
  Animated.timing(foo, { toValue: 0, duration: 0 }),
  Animated.timing(bar, { toValue: 1, duration: 500 }),
]).start()

[sjmueller]

Thanks for the tip @ndbroadbent, but foo.setValue(0) did not work for me -- still the same exception.

[zoharlevin]

there's definitely some bug related to animation order.
i have a transform and an interpolate for color, both animating text.
they can run ok separately but not together.
@ndbroadbent wondering if you found any other info on this issue?

[tafelito]

Same issue here. Running 2 animations on Android seems to be not working. Tried the same on iOS and works fine.

+1

[tafelito]

I found that when I start an animation from TouchableOpacity within an Animated view, I get this error, but if instead I use a Button component, and do the call the same action, then it works fine

class Animations extends React.Component {
  static navigationOptions = () => ({
    title: 'Animations',
  });

  animatedValue = new Animated.Value(0);

  animate = () => {
    this.animatedValue.resetAnimation();
    Animated.spring(this.animatedValue, {
      toValue: 1,
    }).start();
  };

  render() {
    const widthInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [300, 300, 50],
    });
    const inputScaleInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 0.6, 1],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp',
    });
    const sendButtonInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 0.5, 0.6],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp',
    });
    const sendButtonStyle = {
      transform: [{ scale: sendButtonInterpolate }],
    };
    const inputScaleStyle = {
      transform: [{ scale: inputScaleInterpolate }],
    };
    const buttonWrapStyle = {
      width: widthInterpolate,
    };

    return (
      <View style={styles.container}>
        <Button onPress={this.animate} title="Animate" />
        <Animated.View style={[styles.buttonWrap, buttonWrapStyle]}>
          <Animated.View
            style={[StyleSheet.absoluteFill, styles.inputWrap, inputScaleStyle]}
          >

            <TextInput
              placeholder="Put some text here"
              style={styles.textInput}
              underlineColorAndroid="transparent"
            />

            {/* THIS WORKS*/}
            <Button onPress={this.animate} title="Animate" />

            {/* THIS DOESN'T WORK*/}
            <TouchableOpacity
              onPress={this.animate}
              style={[styles.button, sendButtonStyle]}
            >
              <Text style={styles.text}>SAVE</Text>
            </TouchableOpacity>

          </Animated.View>
        </Animated.View>
      </View>
    );
  }

[syaau]

This issue must be fixed by the #15077 pull request

[anshul-kai]

I just tested and #15077 does NOT fix the problem. But separating animations into different nested components does seem to solve this problem.

[syaau]

@a-koka Please check this repo https://github.com/syaau/Issue13530 which uses the sample problem stated above (index.android.js). I have used React Native v0.48 which incorporates #15077. The code runs without any issue on android.

[anshul-kai]

@syaau I'm on 0.46.4 and perhaps that is part of the problem. I can't upgrade my project just yet. I apologize if I mislead some users here.

[8of]

Problem still persist on 0.47.2.
App sometimes (but not every time) crashes on the line 489:
https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIImplementation.java#L489
Not sure if it's the same problem though (sorry if it's not).

[syaau]

@8of The fix was merged in v0.48.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.