React native bottom tab navigation style not applying

Question

I'm trying to create custom floating bottom tab navigation for my react native app. I tried to add some styling to get the desired effect, but the styles don't apply on the bottom tab navigation. I don't know why.

I tried : a.)adding tabBarOptions with style property

      tabBarOptions={{
        style: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          paddingHorizontal: 16,
          borderRadius: 16,
          paddingBottom: 10,
          borderTopWidth: 0, 
        },
      }}

b.)screenOptions with tabBarStyle property

screenOptions={{
        headerShown: false,
        tabBarStyle: [
          {
            tabBarShowLabel: false,
            position: "absolute",
            bottom: 25,
            left: 20,
            right: 20,
            elevation: 0,
            borderRadius: 16,
          },
        ],
      }}

No styling applied with either of the approaches. I'm using BottomTabNavigator from react-native-paper

import React, { useContext } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { createMaterialBottomTabNavigator } from "react-native-paper/react-navigation";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import { SvgXml } from "react-native-svg";
import { Image } from "expo-image";

import { HomeScreen } from "../../screens/home/home.screen";
import { AiScreen } from "../../screens/ai/ai.screen";
import { SettingsScreen } from "../../screens/settings/settings.screen";
import { AnalyticsScreen } from "../../screens/analytics/analytics.screen";

export const AppNavigator = () => {
  const Tab = createMaterialBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}
      tabBarOptions={{
        style: {
          position: "absolute",
          bottom: 25,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: "#ffffff", // Set your desired background color
          paddingHorizontal: 16, // Adjust the padding as per your preference
          paddingBottom: 10, // Adjust the padding as per your preference
          borderTopWidth: 0, // Remove top border
          position: "absolute", // Ensure tab bar remains at the bottom
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <View style={styles.iconView}>
              <Image
                source={require("../../../assets/icons/home.svg")}
                style={styles.iconImage}
              />
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Explore"
        component={AiScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <View style={styles.iconView}>
              <Image
                source={require("../../../assets/icons/explore.svg")}
                style={styles.iconImage}
              />
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Analytics"
        component={AnalyticsScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <View style={styles.iconView}>
              <Image
                source={require("../../../assets/icons/statistic.svg")}
                style={styles.iconImage}
              />
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color }) => (
            <View style={styles.iconView}>
              <Image
                source={require("../../../assets/icons/profile.svg")}
                style={styles.iconImage}
              />
            </View>
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  iconView: {
    width: 26,
    height: 26,
    justifyContent: "center",
    alignItems: "center",
  },
  iconImage: {
    width: "100%",
    height: "100%",
  },
});