React-Native - why is the Toolbar imagebackground cutting off the tab button highlight?

I am trying to make a simple app tabbar where the selected tab is highlighted with a pill highlight image. The image works but as you can see in the image the bottom of the pill is cutoff.

import { icons } from '@/constants/icons';
import { images } from '@/constants/images';
import { Tabs } from 'expo-router';
import React from 'react';
import { Image, ImageBackground, Text, View } from 'react-native';



const TabIcon = ({focused, icon, title}: {focused: boolean, icon: any, title: string}) => {
  if (focused) {
    return (
      <ImageBackground 
        source={images.highlight}
        className='flex flex-row w-full flex-1 min-w-[112px] min-h-16 justify-center items-center  rounded-full overflow-hidden'>
        <Image source={icon} tintColor="#151312"/>
        <Text className='text-secondary text-base font-semibold ml-2'>{title}</Text>
      </ImageBackground>
    )
  }
  return (
    <View className="size-full justify-center items-center rounded-full">
      <Image source={icon} tintColor="#A8B5DB"/>
    </View>
    
  )
}

const _layout = () => {
  return (
    <Tabs
      screenOptions={{
        tabBarShowLabel: false,
        tabBarItemStyle: {
          width: '100%',
          height: '100%',
          justifyContent: 'center',
          alignItems: 'center',
          paddingVertical: 8
        },
        tabBarStyle: {
          backgroundColor: '#0F0D23',
          borderRadius: 50,
          marginHorizontal: 20,
          marginBottom: 36,
          height: 52,
          position: 'absolute',
          overflow: 'hidden',
          borderWidth: 1,
          borderColor: '#0f0d23'
        }
      }}
    >
        <Tabs.Screen name="index" 
          options={{ 
            title: 'Home' , 
            headerShown: false,
            tabBarIcon: ({ focused }) => (
              <>
                <TabIcon 
                  focused={focused} 
                  icon={icons.home} 
                  title="Home"
                />
              </>
            )
            }}/>
        <Tabs.Screen name="search" 
          options={{ 
            title: 'Search' , 
            headerShown: false,
            tabBarIcon: ({ focused }) => (
              <>
                <TabIcon 
                  focused={focused} 
                  icon={icons.search} 
                  title="Search"
                />
              </>
            )}} />
        <Tabs.Screen name="saved" 
          options={{ 
            title: 'Saved' , 
            headerShown: false,
            tabBarIcon: ({ focused }) => (
              <>
                <TabIcon 
                  focused={focused} 
                  icon={icons.save} 
                  title="Saved"
                />
              </>
            )}} />
        <Tabs.Screen name="profile" 
          options={{ 
            title: 'Profile' , 
            headerShown: false,
            tabBarIcon: ({ focused }) => (
              <>
                <TabIcon 
                  focused={focused} 
                  icon={icons.person} 
                  title="Profile"
                />
              </>
            )}} />
    </Tabs>
  )
}

export default _layout

I tried playing with the padding and margins but no luck. I thought maybe the safe area is cutting it off at the bottom but increasing the margin bottom didn't do anything. I am new to app development and am learning with react-native expo. Any help is appreciated!

tabbar screenshot