Permalink
Browse files

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 #10081

Differential Revision: D4073603

fbshipit-source-id: 7827198a3e4697c14e37762cdca93f46a5a1d716
  • Loading branch information...
1 parent cfebad9 commit f930270b005953bb7083190eef60d050e4de7607 @tonysherbondy tonysherbondy committed with Facebook Github Bot Oct 25, 2016
@@ -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
+ );
}
});

0 comments on commit f930270

Please sign in to comment.