ios – Set full background coloration backside tabs in android , I write app utilizing React native expo

Assist me, I need backgroupcolor full backside tabs in React Native expo, I run it gadget android
I need to totally modify the colour of the tab under. It is at the moment lacking coloration on the backside, you see it within the image I despatched

Code backside tabs

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

import { TabBarIcon } from "@/parts/navigation/TabBarIcon";
import { useColorScheme } from "@/hooks/useColorScheme";
import { Svg, Path } from "react-native-svg";
import { getPathDown } from "../../parts/curve";
import { scale } from "react-native-size-scaling";
import { Ionicons } from "@expo/vector-icons";
export default operate TabLayout() {
  const colorScheme = useColorScheme();
  const [maxWidth, setMaxWidth] = useState(Dimensions.get("window").width);
  const returnpathDown = getPathDown(maxWidth, 60, 50);
  const insets = useSafeAreaInsets();
  console.warn(insets.backside)
  return (
    <SafeAreaProvider>
    <Tabs
      screenOptions={{
      
      tabBarActiveTintColor: "white",
      tabBarInactiveTintColor: "black",
      
      headerShown: false,
      tabBarStyle: [styles.tabStyles,{bottom: Platform.OS === "android" ? 0 : insets.bottom}],
     
    }}
  >
     ....
    <Tabs.Display screen
      identify="house"
      choices={{
        title: "",
        tabBarItemStyle: { place: "relative" },
        tabBarIcon: ({ coloration, centered }) => (
          <View model={types.curveHome}>
            <Svg width={210} peak={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="clear" fill="white" strokeWidth={0} />
            </Svg>
            <View
              model={types.boxCurveHomeIcon}>
              <Ionicons identify="qr-code" measurement={30} coloration={coloration} />
            </View>
          </View>
        ),
      }}
    />
  </Tabs>
  </SafeAreaProvider>
  );
}

Code model css

const types = StyleSheet.create({
  tabStyles:{
    backgroundColor: "inexperienced",
    borderTopWidth: 0,
    place: "absolute",
    elevation: 0,
    peak: 60,
   
  },
  curveHome:{
    place: "absolute",
    left: -30,
    backside: 7,
    width: "100%",
    show: "flex",
    justifyContent: "heart",
    alignItems: "heart",
  },
  boxCurveHomeIcon:{
    place: "absolute",
    prime: -30,
    left: 35,
    margin: "auto",
    show: "flex",
    justifyContent: "heart",
    alignItems: "heart",
    peak: 56,
    width: 56,
    backgroundColor: "inexperienced",
    borderRadius: 35,
  }
});

everybody have a look at my code to see if something is lacking? Please inform me methods to edit it