feat: Enhance User Interaction with Customizable hitSlop on DrawerToggleButton

[03balogun]

Motivation

The motivation behind this change is to enhance the user experience by making the drawer toggle button more accessible, especially on devices with smaller screens or for users with accessibility needs. By allowing customizable hitSlop values, developers have greater control over the touchable area, ensuring a more user-friendly navigation experience.

The hitSlop was hardcoded with platform-specific values, leading to a limited and non-customizable touchable area. Specifically, the hitSlop for iOS was undefined, which could result in a challenging interaction experience for users on iOS devices due to the small target area.

The hitSlop property is now exposed as a prop, allowing for customizable configuration. Users can specify their preferred hitSlop values, or it defaults to { top: 16, right: 16, bottom: 16, left: 16 } for non-iOS platforms.

Impact
This change is backward compatible and does not introduce breaking changes. It adds an additional layer of customization for developers, catering to a wider range of user interactions and accessibility requirements.

I believe this enhancement aligns well with the goals of react-navigation to provide a robust and user-friendly navigation experience. I look forward to your feedback and suggestions on this PR.

Test plan

• Integrate the example code provided into your React Native application.
• Replace YOUR_CUSTOM_VALUE with different hitSlop configurations to test various scenarios. Example: { top: 20, right: 20, bottom: 20, left: 20 }.
• Start your React Native application on either an iOS or Android simulator/device.
• Navigate to the screen where the DrawerToggleButton is implemented.
• Experiment with different hitSlop values to test the touchable area around the DrawerToggleButton, try tapping around the edges of the button to ensure the extended touchable area works as expected.

Example code

import {
  createDrawerNavigator,
  DrawerToggleButton
} from '@react-navigation/drawer'

const AppDrawer = () => {
const Drawer = createDrawerNavigator<AppNavigatorParamList>()

return (<Drawer.Navigator
      screenOptions={{
        headerLeft: () => <DrawerToggleButton hitSlop={YOUR_CUSTOM_VALUE} />
      }}>
      <Drawer.Screen name={routes.APP_HOME} component={app.Home} />
    </Drawer.Navigator>)
}

[github-actions]

Hey @03balogun! Thanks for opening your first pull request in this repo. If you haven't already, make sure to read our contribution guidelines.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (8367758) 76.68% compared to head (e50cba6) 76.68%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11781   +/-   ##
=======================================
  Coverage   76.68%   76.68%           
=======================================
  Files         208      208           
  Lines        6128     6130    +2     
  Branches     2402     2404    +2     
=======================================
+ Hits         4699     4701    +2     
  Misses       1376     1376           
  Partials       53       53           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[netlify]

✅ Deploy Preview for react-navigation-example ready!

Name	Link
🔨 Latest commit	79a99e5
🔍 Latest deploy log	https://app.netlify.com/sites/react-navigation-example/deploys/6616b1f46ab00500082c671f
😎 Deploy Preview	https://deploy-preview-11781--react-navigation-example.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[satya164]

Thanks for the PR. Any reason to make this a prop instead of updating the hitSlop to an appropriate value? Even a prop is added, I think it makes sense to update the value if the current one isn't good enough.

Can you also share a screenshot of how the hitSlop area looks compared to the button and header size?

[03balogun]

Thanks for the PR. Any reason to make this a prop instead of updating the hitSlop to an appropriate value? Even a prop is added, I think it makes sense to update the value if the current one isn't good enough.

Can you also share a screenshot of how the hitSlop area looks compared to the button and header size?

Why props?

I made it a prop because I wasn't sure why there's no hitSlop value for iOS, hence the decision to allow users to set their preferred value. Also, there are cases where developers might want a different behavior depending on their UI design.

My guess for why hitSlop isn't set for iOS is that the default header styling on iOS does not have spacing around the toggle button; however, headers on Android have visible spacing. See the screenshot below.

Demo showing current behavior shows that on iOS, the user needs to tap the icon precisely, while on Android, tapping the space triggers the action.

drawer-hitslop-demo.mov

Default hitSlop value for iOS?

I agree that a default value should be set for iOS for the top and right since there's not enough spacing to accommodate left and bottom. The PR has been updated to support this.

Allowing users to pass prop will allow further customization.