diff --git a/Examples/2048/Game2048.js b/Examples/2048/Game2048.js
index 9fd6052c968e1b..e43eefa758da22 100644
--- a/Examples/2048/Game2048.js
+++ b/Examples/2048/Game2048.js
@@ -136,10 +136,8 @@ class GameEndOverlay extends React.Component {
return (
{message}
-
-
- Try Again?
-
+
+ Try Again?
);
diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js
index 9aad783b06595f..bada73041f274d 100644
--- a/Libraries/Components/Touchable/TouchableBounce.js
+++ b/Libraries/Components/Touchable/TouchableBounce.js
@@ -11,20 +11,12 @@
*/
'use strict';
-var AnimationExperimental = require('AnimationExperimental');
+var Animated = require('Animated');
var NativeMethodsMixin = require('NativeMethodsMixin');
-var POPAnimation = require('POPAnimation');
var React = require('React');
var Touchable = require('Touchable');
var merge = require('merge');
-var onlyChild = require('onlyChild');
-
-var invariant = require('invariant');
-invariant(
- AnimationExperimental || POPAnimation,
- 'Please add the RCTAnimationExperimental framework to your project, or add //Libraries/FBReactKit:RCTPOPAnimation to your BUCK file if running internally within Facebook.'
-);
type State = {
animationID: ?number;
@@ -58,40 +50,23 @@ var TouchableBounce = React.createClass({
},
getInitialState: function(): State {
- return merge(this.touchableGetInitialState(), {animationID: null});
+ return {
+ ...this.touchableGetInitialState(),
+ scale: new Animated.Value(1),
+ };
},
bounceTo: function(
value: number,
velocity: number,
bounciness: number,
- fromValue?: ?number,
callback?: ?Function
) {
- if (POPAnimation) {
- this.state.animationID && this.removeAnimation(this.state.animationID);
- var anim = {
- property: POPAnimation.Properties.scaleXY,
- dynamicsTension: 0,
- toValue: [value, value],
- velocity: [velocity, velocity],
- springBounciness: bounciness,
- fromValue: fromValue ? [fromValue, fromValue] : undefined,
- };
- this.state.animationID = POPAnimation.createSpringAnimation(anim);
- this.addAnimation(this.state.animationID, callback);
- } else {
- AnimationExperimental.startAnimation(
- {
- node: this,
- duration: 300,
- easing: 'easeOutBack',
- property: 'scaleXY',
- toValue: { x: value, y: value},
- },
- callback
- );
- }
+ Animated.spring(this.state.scale, {
+ toValue: value,
+ velocity,
+ bounciness,
+ }).start(callback);
},
/**
@@ -109,13 +84,14 @@ var TouchableBounce = React.createClass({
touchableHandlePress: function() {
var onPressWithCompletion = this.props.onPressWithCompletion;
if (onPressWithCompletion) {
- onPressWithCompletion(
- this.bounceTo.bind(this, 1, 10, 10, 0.93, this.props.onPressAnimationComplete)
- );
+ onPressWithCompletion(() => {
+ this.state.scale.setValue(0.93);
+ this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete);
+ });
return;
}
- this.bounceTo(1, 10, 10, undefined, this.props.onPressAnimationComplete);
+ this.bounceTo(1, 10, 10, this.props.onPressAnimationComplete);
this.props.onPress && this.props.onPress();
},
@@ -127,18 +103,21 @@ var TouchableBounce = React.createClass({
return 0;
},
- render: function() {
- var child = onlyChild(this.props.children);
- return React.cloneElement(child, {
- accessible: true,
- testID: this.props.testID,
- onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
- onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
- onResponderGrant: this.touchableHandleResponderGrant,
- onResponderMove: this.touchableHandleResponderMove,
- onResponderRelease: this.touchableHandleResponderRelease,
- onResponderTerminate: this.touchableHandleResponderTerminate
- });
+ render: function(): ReactElement {
+ return (
+
+ {this.props.children}
+
+ );
}
});