CustomTabBar

_layout.tsx

...
return (
    <Tabs
      initialRouteName="index"
      tabBar={(props) => (
        <CustomTabBar
          elevation={8}
          textClassName="rounded-full"
          containerClassName="absolute p-4"
          {...props}
        />
      )}
      
...

CustomTabBar.tsx

import { View, TouchableOpacity } from "react-native";
import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";
import cn from "@/utils/cn";
import type { CustomTabBarProps } from "./CustomTabBar.types";

export default function CustomTabBar({
  state,
  descriptors,
  navigation,
  containerClassName,
  textClassName,
  elevation,
  style,
  ...props
}: CustomTabBarProps) {
  return (
    <Animated.View
      className={cn("flex-row bottom-0 overflow-hidden", containerClassName)}
      entering={FadeInDown}
      exiting={FadeOutDown}
      {...props}
    >
      <View
        className={cn(
          "flex-row w-full space-around h-[56px] bg-tab-bar border-tab-bar border-[2px]",
          textClassName
        )}
        style={[{ elevation }, style]}
      >
        {state.routes.map((route, index) => {
          // @ts-ignore
          const { options } = descriptors[route.key];
          const icon = options.tabBarIcon;

          const isFocused = state.index === index;

          function onPress() {
            const event = navigation.emit({
              type: "tabPress",
              target: route.key,
              canPreventDefault: true,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name, route.params);
            }
          }

          function onLongPress() {
            navigation.emit({
              type: "tabLongPress",
              target: route.key,
            });
          }

          return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              className="items-center justify-center z-[100] flex-1 w-full"
              key={route.key}
            >
              {icon && icon({ focused: isFocused, color: "white", size: 20 })}
            </TouchableOpacity>
          );
        })}
      </View>
    </Animated.View>
  );
}

CustomTabBar.types.ts

import type { ViewStyle } from "react-native";
import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";

export interface CustomTabBarProps extends BottomTabBarProps {
  containerClassName?: string;
  elevation?: number;
  textClassName?: string;
  style?: ViewStyle | ViewStyle[];
}