How to Expand Touchable Area for react-navigation/bottom-tabs

Question

I have a working bottom tab navigator in react-native. But is there any way to expand the touchable area for it? See the image attached, the touchable area is in green, the icon is in red, but the expected touchable area should include the white bar above the green area.

https://reactnavigation.org/docs/bottom-tab-navigator/

Image 1: BottomTabTouchableArea

I tried passing in nothing, but the default area is the same as the green area in the image. I tried passing in a custom button component implementing TouchableOpacity but again it only took up the space in green, not the full space up to the yellow component in the image.

Increasing the icon height and width resulted in a larger touchable area but its not the proper solution I'm looking for. See second image for icons with height={40} and width={40}

Image 2: BottomTabLargerIcon

I can of course increase the height using tabBarStyle={height: 100} but that just exasperates the issue. The touchable area is still missing that top bit.

Here is the relevant code that generated the first image

import HomeFilled from '@assets/icons/home-filled.svg'
import HomeEmpty from '@assets/icons/home-empty.svg'

const TabBarLabel = ({focused, title}) => (
  <Typography variant="caption" style={focused && {fontWeight: 'bold'}}>
    {title}
  </Typography>
)

return (
    <Tab.Navigator
      initialRouteName="Home"
      lazy={false}
      screenOptions={{
        headerShown: false,
        tabBarIconStyle: {width: 24, height: 24},
        tabBarStyle: {
          backgroundColor: '#F9FAF1',
          paddingTop: 8,
        },
        tabBarActiveBackgroundColor: 'green',
      }}>
      <Tab.Screen
        name="Home"
        options={{
          tabBarIcon: ({focused}) =>
            focused ? (
              <View style={{backgroundColor: 'red'}}>
                <HomeFilled width={24} height={24} />
              </View>
            ) : (
              <View style={{backgroundColor: 'blue'}}>
                <HomeEmpty width={24} height={24} />
              </View>
            ),
          tabBarLabel: ({focused}) => (
            <TabBarLabel title="Home" focused={focused} />
          ),
        }}
        component={HomeScreen}
      />

Answer 1

The correct answer to this question / problem is to address the padding on the icon

Here's the documentation within the layout props page:

React Native - Padding (Layout Props)