diff --git a/Libraries/Components/Touchable/Touchable.js b/Libraries/Components/Touchable/Touchable.js
index aae584d4973..6f05d2ea14b 100644
--- a/Libraries/Components/Touchable/Touchable.js
+++ b/Libraries/Components/Touchable/Touchable.js
@@ -14,13 +14,12 @@ const BoundingDimensions = require('./BoundingDimensions');
const Platform = require('../../Utilities/Platform');
const Position = require('./Position');
const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
const UIManager = require('../../ReactNative/UIManager');
-const View = require('../View/View');
const SoundManager = require('../Sound/SoundManager');
-const normalizeColor = require('../../StyleSheet/normalizeColor');
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
import type {PressEvent} from '../../Types/CoreEventTypes';
@@ -899,7 +898,6 @@ TouchableMixin.withoutDefaultFocusAndBlur = TouchableMixinWithoutDefaultFocusAnd
const Touchable = {
Mixin: TouchableMixin,
- TOUCH_TARGET_DEBUG: false, // Highlights all touchable targets. Toggle with Inspector.
/**
* Renders a debugging overlay to visualize touch target with hitSlop (might not work on Android).
*/
@@ -907,54 +905,15 @@ const Touchable = {
color,
hitSlop,
}: {
- color: string | number,
+ color: ColorValue,
hitSlop: EdgeInsetsProp,
...
}): null | React.Node => {
- if (!Touchable.TOUCH_TARGET_DEBUG) {
- return null;
+ if (__DEV__) {
+ return ;
}
- if (!__DEV__) {
- throw Error(
- 'Touchable.TOUCH_TARGET_DEBUG should not be enabled in prod!',
- );
- }
- const debugHitSlopStyle = {};
- hitSlop = hitSlop || {top: 0, bottom: 0, left: 0, right: 0};
- for (const key in hitSlop) {
- debugHitSlopStyle[key] = -hitSlop[key];
- }
- const normalizedColor = normalizeColor(color);
- if (typeof normalizedColor !== 'number') {
- return null;
- }
- const hexColor =
- '#' + ('00000000' + normalizedColor.toString(16)).substr(-8);
- return (
- =0.111.0 site=react_native_fb) This comment suppresses
- * an error found when Flow v0.111 was deployed. To see the error,
- * delete this comment and run Flow. */
- {
- borderColor: hexColor.slice(0, -2) + '55', // More opaque
- backgroundColor: hexColor.slice(0, -2) + '0F', // Less opaque
- ...debugHitSlopStyle,
- },
- ]}
- />
- );
+ return null;
},
};
-const styles = StyleSheet.create({
- debug: {
- position: 'absolute',
- borderWidth: 1,
- borderStyle: 'dashed',
- },
-});
-
module.exports = Touchable;
diff --git a/Libraries/Inspector/Inspector.js b/Libraries/Inspector/Inspector.js
index 2394a3dded9..470897d223b 100644
--- a/Libraries/Inspector/Inspector.js
+++ b/Libraries/Inspector/Inspector.js
@@ -14,10 +14,10 @@ const Dimensions = require('../Utilities/Dimensions');
const InspectorOverlay = require('./InspectorOverlay');
const InspectorPanel = require('./InspectorPanel');
const Platform = require('../Utilities/Platform');
+const PressabilityDebug = require('../Pressability/PressabilityDebug');
const React = require('react');
const ReactNative = require('../Renderer/shims/ReactNative');
const StyleSheet = require('../StyleSheet/StyleSheet');
-const Touchable = require('../Components/Touchable/Touchable');
const View = require('../Components/View/View');
const invariant = require('invariant');
@@ -279,7 +279,7 @@ class Inspector extends React.Component<
}
setTouchTargeting(val: boolean) {
- Touchable.TOUCH_TARGET_DEBUG = val;
+ PressabilityDebug.setEnabled(val);
this.props.onRequestRerenderApp(inspectedView => {
this.setState({inspectedView});
});
@@ -318,7 +318,7 @@ class Inspector extends React.Component<
hierarchy={this.state.hierarchy}
selection={this.state.selection}
setSelection={this.setSelection.bind(this)}
- touchTargeting={Touchable.TOUCH_TARGET_DEBUG}
+ touchTargeting={PressabilityDebug.isEnabled()}
setTouchTargeting={this.setTouchTargeting.bind(this)}
networking={this.state.networking}
setNetworking={this.setNetworking.bind(this)}
diff --git a/Libraries/Pressability/PressabilityDebug.js b/Libraries/Pressability/PressabilityDebug.js
index dd8ecdd2d17..9b693dfd43e 100644
--- a/Libraries/Pressability/PressabilityDebug.js
+++ b/Libraries/Pressability/PressabilityDebug.js
@@ -13,7 +13,6 @@
import normalizeColor from '../StyleSheet/normalizeColor';
import type {ColorValue} from '../StyleSheet/StyleSheet';
-import Touchable from '../Components/Touchable/Touchable';
import View from '../Components/View/View';
import * as React from 'react';
@@ -73,9 +72,17 @@ export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
return null;
}
+let isDebugEnabled = false;
+
export function isEnabled(): boolean {
if (__DEV__) {
- return Touchable.TOUCH_TARGET_DEBUG;
+ return isDebugEnabled;
}
return false;
}
+
+export function setEnabled(value: boolean): void {
+ if (__DEV__) {
+ isDebugEnabled = value;
+ }
+}