Android: Tab labels flicker and disappear on initial render

[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

Description

On Android, the bottom tab labels briefly appear during initial render, then disappear, leaving only the icons visible. This behavior doesn't occur on iOS where everything works as expected.

Expected Behavior
Tab labels should remain visible alongside their icons on Android, just as they do on iOS.

Actual Behavior

1. On initial render, tab labels appear briefly
2. As soon as the icons load, the labels disappear
3. Only icons remain visible in the tab bar
4. This only happens on Android, iOS works correctly

Additional Information
Tried various solutions including:

• Explicit tabBarLabel props
• screenOptions with tabBarShowLabel: true
• Pre-loading icons
• Custom tab bar styling
• None of these approaches resolved the issue

(Note that I've seen this issue since I started to use the package a couple months ago so I guess it's a running issue not something recently introduced. It works in a very very simple app, but whenever you have a more complex layout with Expo Router it seems to break but unsure about that if that's the reason.)

screen-20241221-190207.2.mp4

Library version

0.7.8

Environment info

## Environment
- `@bottom-tabs/react-navigation`: 0.7.8
- React Native: 0.76.x (New Architecture)
- Expo SDK: 52
- Platform: Android

Steps to reproduce

Reproduction

1. Create a basic Expo Router app with bottom tabs
2. Implement bottom tabs using the following code:

Reproducible sample code

// BottomTabs.tsx
import { withLayoutContext } from 'expo-router';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

export const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);

// _layout.tsx
import { Tabs } from "@/shared/components/Navigation/BottomTabs";
import { Platform } from "react-native";

const TabLayout = () => {
  return (
    <Tabs
      initialRouteName="explore"
      tabLabelStyle={{
        fontSize: 11,
        fontWeight: "500",
      }}
    >
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: () =>
            Platform.select({
              ios: { sfSymbol: "figure.run" },
              android: require("@/shared/assets/icons/directions_run.svg"),
            }),
        }}
      />
      {/* Other tab screens... */}
    </Tabs>
  );
};

export default TabLayout;

[okwasniewski]

Hey, thanks for reporting the issue and providing a detailed description!

Does it happen when you have 4 tabs or only 3?

I will look into this 👍🏻

[guillaumehcht]

Thanks man!

No idea, let me try to add more tabs and I'll write something here.

Edit: I tried with 4 tabs and even 5 and I still get the exact same issue.

[guillaumehcht]

Funny enough, I installed react-native-edge-to-edge and rebuilt the Android app and the issue is gone!!! 🎉

Never thought that could the issue. Maybe that's something to add to the documentation for others to know about, what do you think?

Sorry for making you check on that issue.

[okwasniewski]

Funny enough, I installed react-native-edge-to-edge and rebuilt the Android app and the issue is gone!!! 🎉

Never thought that could the issue. Maybe that's something to add to the documentation for others to know about, what do you think?

Sorry for making you check on that issue.

Whaat 🤣 it should work without the other library. But I'm glad that you are unblocked!

I'll investigate the issue in the upcoming days!

[mordechaim]

I'm having a similar issue on android where the label flickers each time that tab is selected. To get around this, I currently use the default Android label behavior, namely, only visible on the selected tab.

Screen_Recording.mp4