Reactnative Reaction原生NavBottom设计背景

Folks I am following a design that have: image and the bottom navbar have that unique background, I am wondering how to make it in react native or what exactly is that background name?
The difficulties are: getting the background to be like the design what I accomplished are: getting design right until bottom navbar my question: how to make it in RN or where can I search for a solution? Thanks in advance !

<Tab.Navigator
  initialRouteName="home"
  screenOptions={{
    tabBarShowLabel: false,
    headerShown: false,
    tabBarStyle: {
      backgroundColor:
        "radial-gradient(circle, rgba(6,12,28,1) 0%, rgba(121,164,193,1) 53%, rgba(177,207,240,1) 100%)",
      position: "absolute",
      elevation: 0,
      opacity: 0.9,
      height: heightscale(70),
      alignItems: "center",
      borderRadius: 20,
      shadowColor: "#000",
      bottom: heightscale(20),
      padding: moderateScale(10),
      justifyContent: "center",
      marginHorizontal: moderateScale(20),
    },
  }}
>
  <Tab.Screen
    name="home"
    component={Home}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{ alignItems: "center", justifyContent: "center" }}>
          {focused ? (
            <Homeiconsolid size={30} color={"#2683f1"} />
          ) : (
            <HomeIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
          )}
        </View>
      ),
    }}
  />
  <Tab.Screen
    name="Search"
    component={Search}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{ alignItems: "center", justifyContent: "center" }}>
          {focused ? (
            <Searchiconsolid size={30} color={"#2683f1"} />
          ) : (
            <MagnifyingGlassIcon
              size={30}
              color={focused ? "#2683f1" : "#748c94"}
            />
          )}
        </View>
      ),
    }}
  />
  <Tab.Screen
    name="Favorite"
    component={Bookmark}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{ alignItems: "center", justifyContent: "center" }}>
          {focused ? (
            <Bookmarkiconsolid
              size={30}
              color={focused ? "#2683f1" : "#748c94"}
            />
          ) : (
            <BookmarkIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
          )}
        </View>
      ),
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{ alignItems: "center", justifyContent: "center" }}>
          {focused ? (
            <Usericonsolid size={30} color={"#2683f1"} />
          ) : (
            <UserIcon size={30} color={focused ? "#2683f1" : "#748c94"} />
          )}
        </View>
      ),
    }}
  />
</Tab.Navigator>;