Add hitSlop prop support to Dropdown component for improved touch accessibility

[intentodepirata]

Add hitSlop prop support to Dropdown component for improved touch accessibility

Problem

The Dropdown component's touchable area is limited to the visible bounds of the dropdown trigger, which can make it difficult for users to interact with on smaller screens or when using larger fingers. This affects usability, especially in mobile apps where precise tapping is challenging.

Proposed Solution

Add a hitSlop prop to the DropdownProps interface, allowing developers to expand the touchable area around the dropdown without changing its visual appearance. This prop would be passed directly to the underlying TouchableWithoutFeedback component.

Changes Made

• Updated DropdownProps<T> interface in model.ts to include:

  hitSlop?: { top?: number; left?: number; bottom?: number; right?: number } | number;

• Modified the component in index.tsx to destructure hitSlop from props and apply it to TouchableWithoutFeedback.

Patch File

Here is the patch content (attach react-native-element-dropdown+2.12.4.patch to the issue):

diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
index 2a73f2f..e704bba 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/index.tsx
@@ -95,6 +95,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
       closeModalWhenSelectedItem = true,
       excludeItems = [],
       excludeSearchItems = [],
+      hitSlop,
     } = props;
 
     const ref = useRef<View>(null);
@@ -448,6 +449,7 @@ const DropdownComponent = React.forwardRef<IDropdownRef, DropdownProps<any>>(
           accessible={!!accessibilityLabel}
           accessibilityLabel={accessibilityLabel}
           onPress={showOrClose}
+          hitSlop={hitSlop}
         >
           <View style={styles.dropdown}>
             {renderLeftIcon?.(visible)}
diff --git a/node_modules/react-native-element-dropdown/src/components/Dropdown/model.ts b/node_modules/react-native-element-dropdown/src/components/Dropdown/model.ts
index e4212a9..5647575 100644
--- a/node_modules/react-native-element-dropdown/src/components/Dropdown/model.ts
+++ b/node_modules/react-native-element-dropdown/src/components/Dropdown/model.ts
@@ -59,6 +59,7 @@ export interface DropdownProps<T> {
   closeModalWhenSelectedItem?: boolean;
   excludeItems?: T[];
   excludeSearchItems?: T[];
+  hitSlop?: { top?: number; left?: number; bottom?: number; right?: number } | number;
   onChange: (item: T) => void;
   renderLeftIcon?: (visible?: boolean) => React.ReactElement | null;
   renderRightIcon?: (visible?: boolean) => React.ReactElement | null;

Usage Example

<Dropdown
  // ... other props
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
/>

This enhancement improves accessibility and user experience without breaking changes. I'd be happy to submit a PR if this aligns with the project's goals.

Environment

• react-native-element-dropdown: 2.12.4
• React Native: 0.81.5

[Javakian12]

Second this, but for anyone looking for a workaround you can wrap this component with a <Pressable> and have it open the dropdown via ref:

<Pressable
  onPress={() => {
    dropdownRef?.current?.open();
  }}
  style={{ height: 55, width: "100%" }}
  hitSlop={{ top: 20, right: 20, bottom: 20, left: 20 }}
>
  <Dropdown ref={dropdownRef} ... />
</Pressable>