From f930270b005953bb7083190eef60d050e4de7607 Mon Sep 17 00:00:00 2001
From: Anthony Sherbondy <ts1235813@gmail.com>
Date: Tue, 25 Oct 2016 00:18:34 -0700
Subject: [PATCH] Fix for TouchableNativeFeedback having Animated.Component
 direct child

Summary:
Fixes #7996.
Test included.
Not sure this is the best way to go, just a simple solution since the TouchableNativeFeedback is trying to clone the component with a Native component, then seems like it should wrap it with Animated.Component if the incoming child was.
Closes https://github.com/facebook/react-native/pull/10081

Differential Revision: D4073603

fbshipit-source-id: 7827198a3e4697c14e37762cdca93f46a5a1d716
---
 Examples/UIExplorer/js/TouchableExample.js    | 27 ++++++++++++++++++-
 .../TouchableNativeFeedback.android.js        | 17 ++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

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 = [
       </View>
     );
   },
+ }, {
+  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 (
+      <View>
+        <View style={styles.row}>
+          <TouchableNativeFeedback>
+            <Animated.View style={style}/>
+          </TouchableNativeFeedback>
+        </View>
+      </View>
+    );
+  },
 }, {
   title: '<Text onPress={fn}> with highlight',
   render: function(): React.Element<any> {
@@ -108,7 +133,7 @@ exports.examples = [
    render: function(): React.Element<any> {
      return <TouchableHitSlop />;
    },
- }, {
+}, {
    title: 'Disabled Touchable*',
    description: '<Touchable*> 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 <TouchableView {...childProps}/>;
+
+    // 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
+    );
   }
 });