fix: allow to override hitSlop

scripts/typescript-output-lint.js

@@ -25,7 +25,6 @@ const unusedViewProps = [
   'onAccessibilityTap',
   'onMagicTap',
   'accessibilityIgnoresInvertColors',
-  'hitSlop',
   'removeClippedSubviews',
   'collapsable',
   'needsOffscreenAlphaCompositing',

src/components/Checkbox/CheckboxItem.tsx

@@ -15,7 +15,9 @@ import CheckboxAndroid from './CheckboxAndroid';
 import CheckboxIOS from './CheckboxIOS';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -106,6 +108,10 @@ export type Props = {
    * Left undefined `<Checkbox />` will be used.
    */
   mode?: 'android' | 'ios';
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
 };
 
 /**
@@ -144,6 +150,7 @@ const CheckboxItem = ({
   labelMaxFontSizeMultiplier = 1.5,
   rippleColor,
   background,
+  hitSlop,
   ...props
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -185,6 +192,7 @@ const CheckboxItem = ({
       rippleColor={rippleColor}
       theme={theme}
       background={background}
+      hitSlop={hitSlop}
     >
       <View
         style={[styles.container, style]}

src/components/Chip/Chip.tsx

@@ -25,7 +25,9 @@ import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
@@ -131,6 +133,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    */
   textStyle?: StyleProp<TextStyle>;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
   /**
    * @optional
    */
@@ -202,6 +208,7 @@ const Chip = ({
   compact,
   elevated = false,
   maxFontSizeMultiplier,
+  hitSlop,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -327,6 +334,7 @@ const Chip = ({
         accessibilityState={accessibilityState}
         testID={testID}
         theme={theme}
+        hitSlop={hitSlop}
       >
         <View
           style={[styles.content, isV3 && styles.md3Content, contentSpacings]}

src/components/Drawer/DrawerItem.tsx

@@ -14,7 +14,9 @@ import color from 'color';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import Icon, { IconSource } from '../Icon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = React.ComponentPropsWithRef<typeof View> & {
@@ -59,6 +61,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Color of the ripple effect.
    */
   rippleColor?: ColorValue;
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
   style?: StyleProp<ViewStyle>;
   /**
    * @optional
@@ -98,6 +104,7 @@ const DrawerItem = ({
   accessibilityLabel,
   right,
   labelMaxFontSizeMultiplier,
+  hitSlop,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -141,6 +148,7 @@ const DrawerItem = ({
         accessibilityLabel={accessibilityLabel}
         rippleColor={customRippleColor || rippleColor}
         theme={theme}
+        hitSlop={hitSlop}
       >
         <View style={[styles.wrapper, isV3 && styles.v3Wrapper]}>
           <View style={styles.content}>

src/components/FAB/AnimatedFAB.tsx

@@ -28,7 +28,9 @@ import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import Surface from '../Surface';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import AnimatedText from '../Typography/AnimatedText';
 
 export type AnimatedFABIconMode = 'static' | 'dynamic';
@@ -112,6 +114,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
   /**
    * @optional
    */
@@ -223,6 +229,7 @@ const AnimatedFAB = ({
   iconMode = 'dynamic',
   variant = 'primary',
   labelMaxFontSizeMultiplier,
+  hitSlop,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -482,6 +489,7 @@ const AnimatedFAB = ({
               testID={testID}
               style={{ borderRadius }}
               theme={theme}
+              hitSlop={hitSlop}
             >
               <View
                 style={[

src/components/List/ListAccordion.tsx

@@ -20,7 +20,9 @@ import { getAccordionColors, getLeftStyles } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -129,6 +131,11 @@ export type Props = {
    * `pointerEvents` passed to the `View` container
    */
   pointerEvents?: ViewProps['pointerEvents'];
+  /**
+   * Amount of space between the touchable area and the edge of the component.
+   * This can be used to enlarge the touchable area beyond the visible component.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
 };
 
 /**
@@ -194,6 +201,7 @@ const ListAccordion = ({
   pointerEvents = 'none',
   titleMaxFontSizeMultiplier,
   descriptionMaxFontSizeMultiplier,
+  hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const [expanded, setExpanded] = React.useState<boolean>(
@@ -260,6 +268,7 @@ const ListAccordion = ({
           theme={theme}
           background={background}
           borderless
+          hitSlop={hitSlop}
         >
           <View
             style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}

src/components/Menu/MenuItem.tsx

@@ -20,7 +20,9 @@ import {
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
 import Icon, { IconSource } from '../Icon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -88,6 +90,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
   /**
    * TestID used for testing purposes
    */
@@ -142,6 +148,7 @@ const MenuItem = ({
   accessibilityState,
   theme: themeOverrides,
   titleMaxFontSizeMultiplier = 1.5,
+  hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const { titleColor, iconColor, rippleColor } = getMenuItemColor({
@@ -187,6 +194,7 @@ const MenuItem = ({
       accessibilityRole="menuitem"
       accessibilityState={newAccessibilityState}
       rippleColor={rippleColor}
+      hitSlop={hitSlop}
     >
       <View style={[styles.row, containerStyle]}>
         {leadingIcon ? (

src/components/RadioButton/RadioButtonItem.tsx

@@ -17,7 +17,9 @@ import RadioButtonIOS from './RadioButtonIOS';
 import { handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -112,6 +114,10 @@ export type Props = {
    * Radio button control position.
    */
   position?: 'leading' | 'trailing';
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
 };
 
 /**
@@ -156,6 +162,7 @@ const RadioButtonItem = ({
   position = 'trailing',
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier,
+  hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const radioButtonProps = {
@@ -219,6 +226,7 @@ const RadioButtonItem = ({
             background={background}
             theme={theme}
             rippleColor={rippleColor}
+            hitSlop={hitSlop}
           >
             <View style={[styles.container, style]} pointerEvents="none">
               {isLeading && radioButton}

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -22,7 +22,9 @@ import {
 import { useInternalTheme } from '../../core/theming';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import TouchableRipple, {
+  Props as TouchableRippleProps,
+} from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
 export type Props = {
@@ -98,6 +100,10 @@ export type Props = {
    * testID to be used on tests.
    */
   testID?: string;
+  /**
+   * Sets additional distance outside of element in which a press can be detected.
+   */
+  hitSlop?: TouchableRippleProps['hitSlop'];
   /**
    * @optional
    */
@@ -123,6 +129,7 @@ const SegmentedButtonItem = ({
   density = 'regular',
   theme: themeOverrides,
   labelMaxFontSizeMultiplier,
+  hitSlop,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
 
@@ -217,6 +224,7 @@ const SegmentedButtonItem = ({
         style={rippleStyle}
         background={background}
         theme={theme}
+        hitSlop={hitSlop}
       >
         <View style={[styles.content, { paddingVertical }]}>
           {showCheckedIcon ? (