New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ndbroadbent opened this Issue Apr 16, 2017 · 14 comments

Comments

Projects
None yet
9 participants
@ndbroadbent

ndbroadbent commented Apr 16, 2017

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

This comment has been minimized.

btk commented Apr 17, 2017

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

This comment has been minimized.

Contributor

sjmueller commented May 4, 2017

Having the same problem, reproduced on 0.44.0

@ndbroadbent

This comment has been minimized.

ndbroadbent commented May 4, 2017

@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

This comment has been minimized.

Contributor

sjmueller commented May 4, 2017

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

@zoharlevin

This comment has been minimized.

zoharlevin commented May 23, 2017

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

This comment has been minimized.

tafelito commented May 28, 2017

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

+1

@tafelito

This comment has been minimized.

tafelito commented May 31, 2017

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 comment has been minimized.

Contributor

syaau commented Jul 18, 2017

This issue must be fixed by the #15077 pull request

@a-koka

This comment has been minimized.

a-koka commented Sep 18, 2017

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

@syaau

This comment has been minimized.

Contributor

syaau commented Sep 18, 2017

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

@a-koka

This comment has been minimized.

a-koka commented Sep 25, 2017

@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

This comment has been minimized.

8of commented Oct 2, 2017

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

This comment has been minimized.

Contributor

syaau commented Oct 2, 2017

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

@stale

This comment has been minimized.

stale bot commented Dec 1, 2017

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.

@stale stale bot added the Stale label Dec 1, 2017

@stale stale bot closed this Dec 8, 2017

@facebook facebook locked and limited conversation to collaborators May 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.