diff --git a/Examples/UIExplorer/js/TouchableExample.js b/Examples/UIExplorer/js/TouchableExample.js
index 44232ec31ff..28a380d5f2c 100644
--- a/Examples/UIExplorer/js/TouchableExample.js
+++ b/Examples/UIExplorer/js/TouchableExample.js
@@ -25,6 +25,7 @@
var React = require('react');
var ReactNative = require('react-native');
var {
+ Animated,
Image,
StyleSheet,
Text,
@@ -74,6 +75,30 @@ exports.examples = [
);
},
+ }, {
+ title: 'TouchableNativeFeedback with Animated child',
+ description: 'TouchableNativeFeedback can have an AnimatedComponent as a' +
+ 'direct child.',
+ platform: 'android',
+ render: function() {
+ const mScale = new Animated.Value(1);
+ Animated.timing(mScale, {toValue: 0.3, duration: 1000}).start();
+ const style = {
+ backgroundColor: 'rgb(180, 64, 119)',
+ width: 200,
+ height: 100,
+ transform: [{scale: mScale}]
+ };
+ return (
+
+
+
+
+
+
+
+ );
+ },
}, {
title: ' with highlight',
render: function(): React.Element {
@@ -108,7 +133,7 @@ exports.examples = [
render: function(): React.Element {
return ;
},
- }, {
+}, {
title: 'Disabled Touchable*',
description: ' components accept disabled prop which prevents ' +
'any interaction with component',
diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
index a9d24eda6ee..d048545dfda 100644
--- a/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
+++ b/Libraries/Components/Touchable/TouchableNativeFeedback.android.js
@@ -19,7 +19,6 @@ var UIManager = require('UIManager');
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
var processColor = require('processColor');
-var requireNativeComponent = require('requireNativeComponent');
var PropTypes = React.PropTypes;
@@ -39,13 +38,6 @@ var backgroundPropType = PropTypes.oneOfType([
themeAttributeBackgroundPropType,
]);
-var TouchableView = requireNativeComponent('RCTView', null, {
- nativeOnly: {
- nativeBackgroundAndroid: backgroundPropType,
- nativeForegroundAndroid: backgroundPropType,
- },
-});
-
type Event = Object;
var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
@@ -258,7 +250,14 @@ var TouchableNativeFeedback = React.createClass({
onResponderRelease: this.touchableHandleResponderRelease,
onResponderTerminate: this.touchableHandleResponderTerminate,
};
- return ;
+
+ // We need to clone the actual element so that the ripple background drawable
+ // can be applied directly to the background of this element rather than to
+ // a wrapper view as done in outher Touchable*
+ return React.cloneElement(
+ child,
+ childProps
+ );
}
});