How to Customize React-Navigation Bottom tabs

Question

So I am currently struggling with customizing my navigation. Everything is working fine and the active and inactive states are perfect, however, I want to:

1. change the background color,
2. make it float
3. add a border-radius.

I just want to know how to overwrite the current styling to achieve this.

My current code looks like this, but is not working:

import { StyleSheet, View, Image } from 'react-native';
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LibraryScreen from '../screens/LibraryScreen';
import HomeScreen from '../screens/HomeScreen';
import CompScreen from '../screens/CompScreen';
import WriteScreenOne from '../screens/write/WriteScreenOne';

const HomeTab = () => {
  const Tab = createBottomTabNavigator();

  const CustomTabBarIcon = ({ icon, focused }) => (
    <View style={styles.tabBarIcon}>
      {focused ? (
        <View style={styles.activeIconCircle}>
          <Image source={icon} style={styles.icon} />
        </View>
      ) : (
        <Image source={icon} style={styles.icon} />
      )}
    </View>
  );

  return (
    <Tab.Navigator
    activeColor="#887654"
    inactiveColor="#887654"
  barStyle={{ backgroundColor: '#887654', paddingBottom: 48 }}
      screenOptions={{ headerShown: false }}
      tabBarOptions={{
        showLabel: false,
        style: styles.tabBar,
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <CustomTabBarIcon
              icon={require('../assets/icons/home.png')}
              focused={focused}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Library"
        component={LibraryScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <CustomTabBarIcon
              icon={require('../assets/icons/library.png')}
              focused={focused}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Comp"
        component={CompScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <CustomTabBarIcon
              icon={require('../assets/icons/comp.png')}
              focused={focused}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Write"
        component={WriteScreenOne}
        options={{
          tabBarIcon: ({ focused }) => (
            <CustomTabBarIcon
              icon={require('../assets/icons/write.png')}
              focused={focused}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: '#887654',
    height: 82,
    borderTopWidth: 0,
    elevation: 20,
    borderRadius: 20
  },
  tabBarIcon: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 60,
  },
  activeIconCircle: {
    backgroundColor: '#6B8DFF',
    width: 60,
    height: 60,
    borderRadius: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    width: 40,
    height: 40,
    tintColor: '#FFFFFF',
  },
});

export default HomeTab;