123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- /**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- * @format
- */
- 'use strict';
- import normalizeColor from '../StyleSheet/normalizeColor';
- import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
- import Touchable from '../Components/Touchable/Touchable';
- import View from '../Components/View/View';
- import * as React from 'react';
- type Props = $ReadOnly<{|
- color: ColorValue,
- hitSlop: ?$ReadOnly<{|
- bottom?: ?number,
- left?: ?number,
- right?: ?number,
- top?: ?number,
- |}>,
- |}>;
- /**
- * Displays a debug overlay to visualize press targets when enabled via the
- * React Native Inspector. Calls to this module should be guarded by `__DEV__`,
- * for example:
- *
- * return (
- * <View>
- * {children}
- * {__DEV__ ? (
- * <PressabilityDebugView color="..." hitSlop={props.hitSlop} />
- * ) : null}
- * </View>
- * );
- *
- */
- export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
- if (__DEV__) {
- if (isEnabled()) {
- const normalizedColor = normalizeColor(color);
- if (typeof normalizedColor !== 'number') {
- return null;
- }
- const baseColor =
- '#' + (normalizedColor ?? 0).toString(16).padStart(8, '0');
- return (
- <View
- pointerEvents="none"
- style={{
- backgroundColor: baseColor.slice(0, -2) + '0F', // 15%
- borderColor: baseColor.slice(0, -2) + '55', // 85%
- borderStyle: 'dashed',
- borderWidth: 1,
- bottom: -(hitSlop?.bottom ?? 0),
- left: -(hitSlop?.left ?? 0),
- position: 'absolute',
- right: -(hitSlop?.right ?? 0),
- top: -(hitSlop?.top ?? 0),
- }}
- />
- );
- }
- }
- return null;
- }
- export function isEnabled(): boolean {
- if (__DEV__) {
- return Touchable.TOUCH_TARGET_DEBUG;
- }
- return false;
- }
|