Skip to content

Instantly share code, notes, and snippets.

@m0rsecode
Last active September 1, 2015 17:56
Show Gist options
  • Save m0rsecode/94e1cbf0adbbc4fa9b4d to your computer and use it in GitHub Desktop.
Save m0rsecode/94e1cbf0adbbc4fa9b4d to your computer and use it in GitHub Desktop.
/* @flow */
'use strict';
var mode = require('art/modes/svg')
var React = require('react-native');
var Art = require('ReactNativeART');
var {
Surface,
Shape,
Circle,
} = Art
var {
View,
Text,
Image,
Animated,
TouchableWithoutFeedback,
NativeModules,
} = React
class Playground extends React.Component {
constructor(props: Object) {
super(props)
this.state = {
bounceValue: new Animated.Value(0),
}
}
componentDidMount() {
this.state.bounceValue.setValue(1.5); // Start large
Animated.spring( // Base: spring, decay, timing
this.state.bounceValue, // Animate `bounceValue`
{
toValue: 0.8, // Animate to smaller size
friction: 3, // Bouncier spring
}
).start(); // Start the animation
}
render() {
console.log("Render Called");
console.log(this.state.bounceValue);
return(
<TouchableWithoutFeedback onPress={this._onPress}>
<Animated.Image // Base: Image, Text, View
source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
style={{
flex: 1,
transform: [ // `transform` is an ordered array
{scale: this.state.bounceValue},
]
}}
/>
</TouchableWithoutFeedback>
)
}
_onPress() { // Start large
this.state.bounceValue.setValue(0.5);
Animated.spring(this.state.bounceValue, // Animate `bounceValue`
{
toValue: 0.8, // Animate to smaller size
friction: 1, // Bouncier spring
}
).start();
}
}
module.exports = Playground
@shayne
Copy link

shayne commented Sep 1, 2015

Line 47 needs to be:

<TouchableWithoutFeedback onPress={this._onPress.bind(this)}>

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