RN: Fix Touchable Debug View

Summary: Fixes the `Touchable` debug view. The `child.type` is no longer a subclass of `React.Component` and no longer has `displayName`. It should be fine to have a hard dependency on `Text` and `View`, because... what app does not use them?

Reviewed By: TheSavior

Differential Revision: D9232036

fbshipit-source-id: 06f4091bf8e21cada3af50def2fdd41a6ad84f79
This commit is contained in:
Tim Yung
2018-08-13 11:47:35 -07:00
committed by Facebook Github Bot
parent c1ecd8aefc
commit f805d35154
2 changed files with 4 additions and 19 deletions

View File

@@ -16,6 +16,7 @@ const ReactNative = require('ReactNative');
const Touchable = require('Touchable');
const TouchableWithoutFeedback = require('TouchableWithoutFeedback');
const UIManager = require('UIManager');
const View = require('View');
const createReactClass = require('create-react-class');
const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
@@ -238,7 +239,7 @@ const TouchableNativeFeedback = createReactClass({
render: function() {
const child = React.Children.only(this.props.children);
let children = child.props.children;
if (Touchable.TOUCH_TARGET_DEBUG && child.type.displayName === 'View') {
if (Touchable.TOUCH_TARGET_DEBUG && child.type === View) {
if (!Array.isArray(children)) {
children = [children];
}

View File

@@ -15,6 +15,7 @@ const React = require('React');
const PropTypes = require('prop-types');
const TimerMixin = require('react-timer-mixin');
const Touchable = require('Touchable');
const View = require('View');
const createReactClass = require('create-react-class');
const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
@@ -225,28 +226,12 @@ const TouchableWithoutFeedback = ((createReactClass({
// $FlowFixMe(>=0.41.0)
const child = React.Children.only(this.props.children);
let children = child.props.children;
warning(
!child.type || child.type.displayName !== 'Text',
'TouchableWithoutFeedback does not work well with Text children. Wrap children in a View instead. See ' +
((child._owner && child._owner.getName && child._owner.getName()) ||
'<unknown>'),
);
if (
Touchable.TOUCH_TARGET_DEBUG &&
child.type &&
child.type.displayName === 'View'
) {
if (Touchable.TOUCH_TARGET_DEBUG && child.type === View) {
children = React.Children.toArray(children);
children.push(
Touchable.renderDebugView({color: 'red', hitSlop: this.props.hitSlop}),
);
}
const style =
Touchable.TOUCH_TARGET_DEBUG &&
child.type &&
child.type.displayName === 'Text'
? [child.props.style, {color: 'red'}]
: child.props.style;
return (React: any).cloneElement(child, {
accessible: this.props.accessible !== false,
accessibilityLabel: this.props.accessibilityLabel,
@@ -266,7 +251,6 @@ const TouchableWithoutFeedback = ((createReactClass({
onResponderMove: this.touchableHandleResponderMove,
onResponderRelease: this.touchableHandleResponderRelease,
onResponderTerminate: this.touchableHandleResponderTerminate,
style,
children,
});
},