Help me, I want backgroupcolor full bottom tabs in React Native expo, I run it device android
I want to fully adjust the color of the tab below. It’s currently missing color at the bottom, you see it in the picture I sent

Code bottom tabs

import { Tabs } from "expo-router";
import { SafeAreaProvider,useSafeAreaInsets  } from 'react-native-safe-area-context';
import React, { useState } from "react";
import { View, Image,Text, Dimensions, StyleSheet ,Platform} from "react-native";

import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { useColorScheme } from "@/hooks/useColorScheme";
import { Svg, Path } from "react-native-svg";
import { getPathDown } from "../../components/curve";
import { scale } from "react-native-size-scaling";
import { Ionicons } from "@expo/vector-icons";
export default function TabLayout() {
  const colorScheme = useColorScheme();
  const [maxWidth, setMaxWidth] = useState(Dimensions.get("window").width);
  const returnpathDown = getPathDown(maxWidth, 60, 50);
  const insets = useSafeAreaInsets();
  console.warn(insets.bottom)
  return (
    <SafeAreaProvider>
    <Tabs
      screenOptions={{
      
      tabBarActiveTintColor: "white",
      tabBarInactiveTintColor: "black",
      
      headerShown: false,
      tabBarStyle: [styles.tabStyles,{bottom: Platform.OS === "android" ? 0 : insets.bottom}],
     
    }}
  >
     ....
    <Tabs.Screen
      name="home"
      options={{
        title: "",
        tabBarItemStyle: { position: "relative" },
        tabBarIcon: ({ color, focused }) => (
          <View style={styles.curveHome}>
            <Svg width={210} height={40}>
              <Path d="M 62.8 0 Q 82.8 0 102.8 20 C 122.8 40 142.8 40 162.8 20 Q 182.8 0 202.8 0" 
              stroke="transparent" fill="white" strokeWidth={0} />
            </Svg>
            <View
              style={styles.boxCurveHomeIcon}>
              <Ionicons name="qr-code" size={30} color={color} />
            </View>
          </View>
        ),
      }}
    />
  </Tabs>
  </SafeAreaProvider>
  );
}

Code style css

const styles = StyleSheet.create({
  tabStyles:{
    backgroundColor: "green",
    borderTopWidth: 0,
    position: "absolute",
    elevation: 0,
    height: 60,
   
  },
  curveHome:{
    position: "absolute",
    left: -30,
    bottom: 7,
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  boxCurveHomeIcon:{
    position: "absolute",
    top: -30,
    left: 35,
    margin: "auto",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: 56,
    width: 56,
    backgroundColor: "green",
    borderRadius: 35,
  }
});

everyone look at my code to see if anything is missing? Please tell me how to edit it