React native проиcходит обработка нажатий на BottomTabTar вне зоны его отрисовки

Собственно имеется экран контейнер для вкладок с кодом навигатора в виде bottomtabbar, на самих экранах имеются множество разных компонентов, флэтлист, флэт грид, скроллы, модалки и т.д. Само приложение - интернет магазин, так вот переключение вкладок происходит даже тогда, когда на экране нет кликабельных элементов, и человек нажимает выше таб бара даже на 200% его высоты. Косяк одинаковый и на ИОС и андроид. Я пробовал делать отступ содержимого экрана от таб панели, но это непомогло. На изображении мышкой показано где происходит обработка нажатия на панель таб, причем если под областью нажатия будет кликабельный элемент, то он перехватит событие клика на себя и таб не обработает нажатие. Если элемент не кликабельный то таб обработает нажатие. Пакет "@react-navigation/bottom-tabs": "^6.5.20",

Скриншот проблемы

return (<Tab.Navigator
    
    screenOptions={{
        headerShown: false,
        activeTintColor: '#000000',
        activeBackgroundColor: '#E2E2E2',
        inactiveBackgroundColor: '#ffffff',
    }}>
    <Tab.Screen
        name="ScreenTabMain"
        tabBarItemStyle={{height: 20}}
        options={{
          tabBarIcon: props => {
            const icon = props.focused
              ? require('../assets/icons/screen_home_active.png')
              : require('../assets/icons/screen_home.png');
  
            return <Image source={icon} style={{width: 20, border: 0,
              margin: 0,
              padding: 0,}} resizeMode="contain"/>;
          },
          tabBarLabel: ({ focused }) => {
            return (
              focused ? <Text
                style={{
                  fontFamily:"Rubik_400Regular",
                  fontSize:12,
                  backgroundColor: "white",
                  justifyContent: "center",
                  border: 0,
                  margin: 0,
                  padding: 0,
                  color:"#309718"
                }}
              >Главная</Text> : <Text
              style={{
                fontFamily:"Rubik_400Regular",
                fontSize:12,
                fontWeight:"500",
                color:"#181725"
              }}
            >Главная</Text>
            );
          },
        }}
    component={ScreenTabMain} />
    <Tab.Screen
        name="ScreenTabCatalog"
        options={{
          tabBarIcon: props => {
            const icon = props.focused
              ? require('../assets/icons/screen_catalog_active.png')
              : require('../assets/icons/screen_catalog.png');
  
              return <Pressable onPress={()=>openCatalogScreen()}><Image  source={icon} style={{width: 20}} resizeMode="contain"/></Pressable>;              },
          tabBarLabel: ({ focused }) => {
            return (
              focused ? <Text
                style={{
                  fontFamily:"Rubik_400Regular",
                  fontSize:12,
                  fontWeight:"500",
                  color:"#309718"
                }}
              >Каталог</Text> : <Text
              style={{
                fontFamily:"Rubik_400Regular",
                fontSize:12,
                fontWeight:"500",
                color:"#181725"
              }}
            >Каталог</Text>
            );
          },
        }}
    component={ScreenTabCatalog} />
    <Tab.Screen
        name="ScreenTabBasket"
        options={{
          tabBarIcon: props => {
            const icon = props.focused
              ? require('../assets/icons/screen_cart_active.png')
              : require('../assets/icons/screen_cart.png');
  
              return <View style={{justifyContent: 'center',alignItems: 'center'}}>
              {basketCostView()}
             <Image source={icon} style={{width: 20}} resizeMode="contain"/>
             </View>},
          tabBarLabel: ({ focused }) => {
            return (
              focused ? <Text
                style={{
                  fontFamily:"Rubik_400Regular",
                  fontSize:12,
                  fontWeight:"500",
                  color:"#309718"
                }}
              >Корзина</Text> : <Text
              style={{
                fontFamily:"Rubik_400Regular",
                fontSize:12,
                fontWeight:"500",
                color:"#181725"
              }}
            >Корзина</Text>
            );
          },
        }}
    component={ScreenTabBasket} />
    <Tab.Screen
        name="ScreenTabFavorites"
        options={{
          tabBarIcon: props => {
            const icon = props.focused
              ? require('../assets/icons/screen_fav_active.png')
              : require('../assets/icons/screen_fav.png');
  
            return <Image source={icon} style={{width: 20}} resizeMode="contain"/>;
          },
          tabBarLabel: ({ focused }) => {
            return (
              focused ? <Text
                style={{
                  fontFamily:"Rubik_400Regular",
                  fontSize:12,
                  fontWeight:"500",
                  color:"#309718"
                }}
              >Избранное</Text> : <Text
              style={{
                fontFamily:"Rubik_400Regular",
                fontSize:12,
                fontWeight:"500",
                color:"#181725"
              }}
            >Избранное</Text>
            );
          },
        }}
    component={ScreenTabFavorites} />
    <Tab.Screen
        name="ScreenTabProfile"
        options={{
          tabBarIcon: props => {
            const icon = props.focused
              ? require('../assets/icons/screen_profile_active.png')
              : require('../assets/icons/screen_profile.png');
  
            return <Image source={icon} style={{width: 20}} resizeMode="contain"/>;
          },
          tabBarLabel: ({ focused }) => {
            return (
              focused ? <Text
                style={{
                  fontFamily:"Rubik_400Regular",
                  fontSize:12,
                  fontWeight:"500",
                  color:"#309718"
                }}
              >Профиль</Text> : <Text
              style={{
                fontFamily:"Rubik_400Regular",
                fontSize:12,
                fontWeight:"500",
                color:"#181725"
              }}
            >Профиль</Text>
            );
          },
        }}
    component={ScreenTabProfile} />
</Tab.Navigator>)
}

Ответы (1 шт):

Автор решения: Gloster

Дело было в неправильном растягивании изображений, задали статичный размер изображений на кнопках и все пришло в норму. Глюк не очевидный так как картинки отображались правильно.

→ Ссылка