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 + ); } });