This post was first posted as an issue for ReactXP, where it was agreed that this is most likely a problem with React-Native. I am sorry for not having a complete reproduceable app, but I think the example-image should be enough to highlight the problem.
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);
}
Further info from original issue.
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.
This post was first posted as an issue for ReactXP, where it was agreed that this is most likely a problem with React-Native. I am sorry for not having a complete reproduceable app, but I think the example-image should be enough to highlight the problem.
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
currentis above the length ofanimations, resulting in an undefined object.From
AnimatedImplementation.jsline 294-298Further info from original issue.
Below I have attached the component-code, my package.json, and a screenshot of debugging.
The current code that reproduces the error:
Here is package.json:
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.