BottomTabBar transform icon is not vertically clickable

Question

I am using @react-navigation/bottom-tabs in the react-native. And I need the Plus button above the area, So I am able to achieve it, but in the Android Above half area of the Plus icon is not clickable in android. But in IOS it is working fine anybody has an answer about it.

BottomTabBar Component

    import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
    import * as React from 'react';
    
    import TabBarIcon from '../components/TabBar/TabBarIcon';
    import CustomTabBar from '../components/TabBar/CustomTabBar';
    import {
      ShotsNavigator,
    } from './StackNavigator';
    
    const BottomTab = createBottomTabNavigator();
    const INITIAL_ROUTE_NAME = 'Main';
    
    export default function BottomTabNavigator({navigation, route}) {
      // Set the header title on the parent stack navigator depending on the
      // currently active tab. Learn more in the documentation:
      // https://reactnavigation.org/docs/en/screen-options-resolution.html
      navigation.setOptions({headerTitle: getHeaderTitle(route)});
    
      return (
        <BottomTab.Navigator
          initialRouteName={INITIAL_ROUTE_NAME}
          tabBar={(props) => <CustomTabBar {...props} />}
          headerMode="none"
          tabBarOptions={{
            backgroundFeaturedIcon: '#34119f',
            activeFeaturedTintColor: '#F2F3EF',
            inactiveFeatureTintColor: '#3b4c33',
            activeTintColor: 'red',
            inactiveTintColor: 'gray',
            keyboardHidesTabBar: false,
    
            style: {
              backgroundColor: 'white',
              height: 65,
              zIndex: 9999,
              position: 'relative',
            },
          }}>
          
          <BottomTab.Screen
            name="Shots"
            component={ShotsNavigator}
            options={{
              title: 'Shots',
              tabBarIcon: (focused) =>
                focused ? (
                  <TabBarIcon focused={focused} name="shot" />
                ) : (
                  <TabBarIcon focused={focused} name="shot" />
                ),
            }}
          />
    
          
      );
    }
    
    function getHeaderTitle(route) {
      const routeName =
        route.state?.routes[route.state.index]?.name ?? INITIAL_ROUTE_NAME;
    
      switch (routeName) {
        case 'Shots':
          return {headerShown: false};
      }
    }
    

CustomTabBar Component

    import React from 'react';
    import {
      SafeAreaView,
      View,
      TouchableWithoutFeedback,
      TouchableOpacity,
      StyleSheet,
      Text,
      Platform,
    } from 'react-native';
    
    const CustomTabBar = (props) => {
      const {
        state: {index, routes},
        navigation,
        descriptors,
        style,
        activeTintColor,
        activeFeaturedTintColor,
        inactiveTintColor,
      } = props;
    
      return (
        <SafeAreaView
          elevation={5}
          style={{
            flexDirection: 'row',
            height: 60,
            width: '100%',
            ...style,
          }}>
          {routes.map((route, idx) => {
            const {options} = descriptors[route.key];
    
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;
    
            const isFocused = index === idx;
    
            const icon =
              options.tabBarIcon !== undefined
                ? options.tabBarIcon(isFocused, 'white', 10)
                : null;
    
            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: true,
              });
    
              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };
    
            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };
    
            return (
              <TouchableOpacity
                accessibilityRole="button"
                accessibilityStates={isFocused ? ['selected'] : []}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                key={route.key}
                activeOpacity={0.7}
                onPress={onPress}
                onLongPress={onLongPress}
                style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <View
                  style={
                    route.name === 'Shots'
                      ? [
                          styles.customIcon,
                          {
                            borderRadius: 50,
                            transform: [{translateY: -15}],
                            //backgroundColor: 'yellow',
                            zIndex: 9999,
                            // position: 'relative',
                            // top: -20,
                          },
                        ]
                      : styles.customIcon
                  }>
                  {icon}
                </View>
              
              </TouchableOpacity>
            );
          })}
        </SafeAreaView>
      );
    };
    const styles = StyleSheet.create({
      customIcon: {
        height: 30,
        width: 30,
        justifyContent: 'center',
        alignItems: 'center',
      },
      iconLabel: {
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 10,
      },
    });
    
    export default CustomTabBar;
    

TabBarIcon Component

    import * as React from 'react';
    import * as Images from './../../assests/bottomTab/index';
    import {View} from 'react-native';
    
    export default function TabBarIcon(props) {
      const TabBarIconsComponent = Images[props.name];
    
      if (props.name === 'shot') {
        return <TabBarIconsComponent height={90} width={90} />;
      }
    }

Please check the below link that's exactly what I'm trying to solve. I am using bottom-tabs with a plus button But Plus button is not clickable in half of the area in react native in android Only?