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
This commit is contained in:
Anthony Sherbondy 2016-10-25 00:18:34 -07:00 committed by Facebook Github Bot
parent cfebad97b2
commit f930270b00
2 changed files with 34 additions and 10 deletions

View File

@ -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',

View File

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