AnimatedImplementation.js: Length of animations not checked, resulting in undefined object

[runar-rkmedia]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Steps to Reproduce

(Write your steps here:)

1. Open up sample-project
2. Click increase-score-button a few times

Expected Behavior

The animation should work without issues.

Actual Behavior

See description.

Reproducible Demo

https://snack.expo.io/SkCRgwXrM

This post was first posted as an issue for ReactXP, where it was agreed that this is most likely a problem with React-Native.

In short, there seems to be a problem with react-native/Libraries/Animated/src/AnimatedImplementation.js at line 297, where it doesn't actually check that current is above the length of animations, resulting in an undefined object.

From AnimatedImplementation.js line 294-298

  if (animations.length === 0) {
    callback && callback({finished: true});
  } else {
    animations[current].start(onComplete);
  }

Here is a screenshot from my app, where the animations-array is of length 2, while the variable current is beyond that point, at length 2.

Further info from original issue. Note that code below is TypeScript, and from the original project. The code in the sample-app above should reproduce the same error.

TypeError: Cannot read property 'start' of undefined.

Below I have attached the component-code, my package.json, and a screenshot of debugging.

The current code that reproduces the error:

import * as RX from 'reactxp'
import { Animated, Component, Styles, Text, Types, View } from 'reactxp'

interface IState {
  scoreDiff: number
}

class ScoreC extends Component<IConnectProps, IState> {
  public state = {
    scoreDiff: 0,
  }
  private _differenceAnimationStyle: Types.AnimatedTextStyleRuleSet
  private _fadeInOutAnimation: Types.Animated.CompositeAnimation
  private _fadeInOutAnimationValue: Animated.Value

  constructor(props: IConnectProps) {
    super(props)

    this._fadeInOutAnimationValue = Animated.createValue(0)
    this._differenceAnimationStyle = Styles.createAnimatedTextStyle({
      opacity: this._fadeInOutAnimationValue,
    })

    this._fadeInOutAnimation = Animated.sequence([
      Animated.timing(this._fadeInOutAnimationValue, {
        duration: 700,
        easing: Animated.Easing.In(),
        toValue: 1,
      }),
      Animated.timing(this._fadeInOutAnimationValue, {
        delay: 1000,
        duration: 1200,
        easing: Animated.Easing.InOutBack(),
        toValue: 0,
      }),
    ])
  }
  public componentWillReceiveProps({ score: newScore }: IConnectProps) {
    const { score: oldScore } = this.props
    const scoreDiff = newScore - oldScore
    this.setState({ scoreDiff })
    if (scoreDiff > 0) {
      this._fadeInOutAnimation.start()
    }
  }

  public render() {
    const { score, streak } = this.props
    const { scoreDiff } = this.state
    return (
      <View>
        <View
        >
          <Animated.Text
          >Score: {score}
          </Animated.Text>
        </View>
        <Animated.Text
          style={[this._differenceAnimationStyle]}
        > + {scoreDiff}
        </Animated.Text>
        <Text
          style={{ color: 'white', position: 'absolute', left: 20, top: 10 }}
        >Streak: {streak}
        </Text>
      </View>
    )

  }
}
import { connect } from 'react-redux'
import { IStoreState } from '../StoreStuff/_store'
const connectCreator = connect(
  ({ score, board }: IStoreState) => ({ score, streak: board.streak }),
)
type IConnectProps = typeof connectCreator.allProps
export const Score = connectCreator(ScoreC)

Here is package.json:

{
  "name": "tally-board-revival",
  "version": "0.0.1",
  "private": true,
  "main": "index.js",
  "scripts": {
    "web-watch": "webpack --progress --colors --watch",
    "dev": "webpack-dev-server --hot",
    "rn-watch": "tsc --watch",
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "android": "node node_modules/react-native/local-cli/cli.js run-android",
    "ios": "node node_modules/react-native/local-cli/cli.js run-ios"
  },
  "devDependencies": {
    "@types/node": "^7.0.12",
    "@types/react-native": "^0.51.9",
    "@types/react-redux": "^5.0.14",
    "@types/react-router-dom": "^4.2.3",
    "@types/react-router-native": "^4.0.2",
    "@types/redux": "^3.6.0",
    "@types/redux-persist": "^4.3.1",
    "@types/remote-redux-devtools": "^0.5.2",
    "@types/webpack": "^2.2.14",
    "awesome-typescript-loader": "3.1.2",
    "react-hot-loader": "^3.1.3",
    "source-map-loader": "^0.1.6",
    "style-loader": "^0.19.1",
    "ts-node": "^3.2.1",
    "tslint": "^5.8.0",
    "tslint-react": "^3.3.3",
    "typescript": "2.4.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-dom": "16.2.0",
    "react-native": "^0.51.0",
    "react-native-windows": "^0.51.0-rc.1",
    "reactxp": "^0.51.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-native": "^4.2.0",
    "redux": "^3.7.2",
    "redux-persist": "^5.4.0",
    "redux-thunk": "^2.2.0",
    "remote-redux-devtools": "^0.5.12"
  }
}

After debugging, it seems that I might have found a possible bug, although I am not sure. It might very well be that I am doing something wrong here.

Here, it is checking the animations-array for the index 2, but its length is 2.

[hramos]

Reopening because there's a PR with a proposed fix.