How to create custom Bottom Tab design

[budzHors7]

Hello I need help creating custom bottom tab with my custom styles, with,

• Blurview
• Custom background depending if dark mode is on

I already created one with custom icons & colors, but I want to style the whole bottom tab navigation using Expo Router.

[eeshankeni]

Style every screens tabBarStyle Prop as such

const TabBarStyle: ViewStyle = {
    position: "absolute",
    bottom: 50,
    backgroundColor: colors.white,
    borderRadius: RFPercentage(4),
    width: "95%",
    left: "2.5%",
    borderWidth: 0,
    borderTopColor: "white",
    right: "2.5%",
  };

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: colors.white,
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarStyle: TabBarStyle,}}/>