This repository was archived by the owner on Jun 11, 2026. It is now read-only.
Repository navigation
This repository was archived by the owner on Jun 11, 2026. It is now read-only.
Animations: Cannot read property 'start' of undefined #460
Description
After an upgrade of ReactXP and its dependencies, I now get an error on iOS and Android (working fine in the browser).
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.
Activity
erictraut commentedon Jan 22, 2018
The crash is occurring within the React Native javascript code, not within ReactXP.
Your code looks mostly correct. The one thing that looks suspect - and could explain what you're seeing - is that you're starting the animation in componentWillReceiveProps without stopping any previously-started animation. If componentWillReceiveProps is called twice in relatively quick succession, you will start the animation a second time. I recommend that you store a reference to the animation in an instance variable. Then call start() on it, and clear the variable in the completion callback. That way, you can stop it (or avoid starting a second animation) if it's still running when componentWillReceiveProps is called again.
runar-rkmedia commentedon Jan 22, 2018
I see. I've tried your fix, but it doesn't actually solve it. It seems to me then that this is an issue with React Native. I have therefore filed an issue there.
runar-rkmedia commentedon Jan 22, 2018
Would this possibly be solved by exposing
.reset()for animations and running that when the animation should start over?erictraut commentedon Jan 22, 2018
The right way to fix this is within React Native. You might need to switch to a slightly older or newer version of RN to work around the bug.