v0.7.7 TabBar layout and Header completely broken (RN0.76, Expo52, Expo Router)

[guillaumehcht]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

As you can see in the following screenshots, the layout is completely broken on iOS on the latest package version 0.7.7 (haven't tested on Android yet).

The tabBar doesn't show the background as it should, the header is broken, stuff are going everywhere.

I reverted back to 0.7.6 and it works again perfectly, no idea what has changed in between but something did break hahaha.

Library version

0.7.7

Environment info

"dependencies": {
    "@bottom-tabs/react-navigation": "0.7.6",
    "@expo-google-fonts/public-sans": "^0.2.3",
    "@expo/vector-icons": "^14.0.2",
    "@gorhom/bottom-sheet": "^5.0.6",
    "@invertase/react-native-apple-authentication": "^2.4.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-firebase/app": "^21.6.1",
    "@react-native-firebase/auth": "^21.6.1",
    "@react-native-firebase/firestore": "^21.6.1",
    "@react-native-firebase/functions": "^21.6.1",
    "@react-native-firebase/storage": "^21.6.1",
    "@react-native-google-signin/google-signin": "^13.1.0",
    "@react-native-menu/menu": "^1.1.6",
    "@react-navigation/bottom-tabs": "^7.0.0",
    "@react-navigation/native": "^7.0.0",
    "@tanstack/eslint-plugin-query": "^5.60.1",
    "@tanstack/react-query": "^5.59.20",
    "@types/ngeohash": "^0.6.8",
    "burnt": "^0.12.2",
    "color": "^4.2.3",
    "date-fns": "^4.1.0",
    "eslint": "^8.57.0",
    "expo": "~52.0.19",
    "expo-apple-authentication": "~7.1.2",
    "expo-application": "~6.0.1",
    "expo-blur": "~14.0.1",
    "expo-build-properties": "~0.13.1",
    "expo-constants": "~17.0.3",
    "expo-dev-client": "~5.0.6",
    "expo-device": "~7.0.1",
    "expo-file-system": "~18.0.6",
    "expo-font": "~13.0.1",
    "expo-haptics": "^14.0.0",
    "expo-image": "~2.0.3",
    "expo-image-picker": "~16.0.3",
    "expo-insights": "~0.8.1",
    "expo-linear-gradient": "~14.0.1",
    "expo-linking": "~7.0.3",
    "expo-localization": "~16.0.0",
    "expo-location": "~18.0.4",
    "expo-notifications": "~0.29.11",
    "expo-router": "~4.0.13",
    "expo-splash-screen": "~0.29.18",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.6",
    "expo-updates": "~0.26.10",
    "expo-web-browser": "~14.0.1",
    "i18next": "^24.1.0",
    "intl-pluralrules": "^2.0.1",
    "moti": "^0.29.0",
    "ngeohash": "^0.6.3",
    "posthog-react-native": "^3.5.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-i18next": "^15.1.1",
    "react-native": "0.76.5",
    "react-native-bottom-tabs": "0.7.6",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-get-random-values": "~1.11.0",
    "react-native-gifted-chat": "^2.6.4",
    "react-native-ios-context-menu": "^2.5.2",
    "react-native-ios-utilities": "^4.5.1",
    "react-native-keyboard-controller": "^1.14.5",
    "react-native-keychain": "^9.2.1",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "^4.0.0",
    "react-native-svg": "15.8.0",
    "react-native-unistyles": "^2.12.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "zeego": "^2.0.4",
    "zustand": "^5.0.2"
  },

Steps to reproduce

1. Just do a TabBar Layout with 0.7.7 and Expo Router :)

Reproducible sample code

import { useTabBadgeCount } from "@/features/notifications/hooks/useTabBadgeCount";
import { Tabs } from "@/shared/components/Navigation/BottomTabs";
import { useTranslation } from "react-i18next";
import { Platform } from "react-native";
import { useStyles } from "react-native-unistyles";

const TabLayout = () => {
  const { t } = useTranslation();
  const { theme } = useStyles();
  const badgeCount = useTabBadgeCount();

  return (
    <Tabs
      translucent
      scrollEdgeAppearance="transparent"
      sidebarAdaptable
      initialRouteName="explore"
      hapticFeedbackEnabled
      tabBarActiveTintColor={theme.tabBar.activeTintColor}
      tabLabelStyle={{
        ...Platform.select({
          ios: { fontWeight: "500", fontSize: 11 },
          android: undefined,
        }),
      }}
    >
      <Tabs.Screen
        name="explore"
        options={{
          title: t("explore.title"),
          tabBarIcon: () =>
            Platform.select({
              ios: { sfSymbol: "figure.run" },
              android: require("@/shared/assets/icons/directions_run.svg"),
            }),
        }}
      />
      <Tabs.Screen
        name="chats"
        options={{
          title: t("chats.title"),
          tabBarBadge: badgeCount,
          tabBarIcon: () =>
            Platform.select({
              ios: { sfSymbol: "ellipsis.message.fill" },
              android: require("@/shared/assets/icons/chat.svg"),
            }),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: t("profile.title"),
          tabBarIcon: () =>
            Platform.select({
              ios: { sfSymbol: "person.crop.circle.fill" },
              android: require("@/shared/assets/icons/person.svg"),
            }),
        }}
      />
    </Tabs>
  );
};

export default TabLayout;

[okwasniewski]

Sorry for this 👀 Will try to fix it ASAP it was probably the freezeOnBlur PR

[guillaumehcht]

No worries mate, it's part of development :) Take your time! I love the package, thanks for building it!