Declarative Animation example? (RCTAnimationManager Scope issue?) #432
Description
Have been running experiments with React Native's current animation capabilities (LayoutAnimation and the more declarative Animation API).
Using the declarative API I'm attempting a simple animation (scaling a view from an onPress event), informed from the 2048 example:
https://github.com/facebook/react-native/blob/master/Examples/2048/Game2048.js#L80
What I expected to be a trivial test is resulting in:
"Cannot read property 'startAnimation' of undefined.
Object.Animation.startAnimation
Animation.js:31
https://github.com/facebook/react-native/blob/master/Libraries/Animation/Animation.js#L31
//Animation.js:31
var tag: number = RCTAnimationManager.startAnimation(nodeHandle, AnimationUtils.allocateTag(), duration, delay, easingSample, properties);For some reason it appears RCTAnimationManager is not in scope?
Also, assuming a different issue, when I nest TouchableHighlight in a parent View, onPress events no longer fire.
Thanks in advance for any feedback:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Animation,
Text,
TouchableHighlight,
View,
} = React;
var WebViewApp = React.createClass({
getInitialState: function() {
return {}
},
_onPress: function() {
console.log('starting animation');
Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [0.5, 0.5]});
},
render: function() {
return (
<TouchableHighlight style={styles.container} onPress={this._onPress}>
<View>
<Text style={styles.text}>
Click here to start animation!
</Text>
<View ref='this' style={styles.box}/>
</View>
</TouchableHighlight>
);
}
});
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
top:200,
width: 200,
height: 200,
},
text: {
fontSize: 16,
},
box:{
backgroundColor:'red',
width: 50,
height: 50,
}
});
AppRegistry.registerComponent('WebViewApp', () => WebViewApp);