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:
parent
cfebad97b2
commit
f930270b00
|
@ -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',
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue