Android: Tab labels flicker and disappear on initial render #223
Description
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
- On initial render, tab labels appear briefly
- As soon as the icons load, the labels disappear
- Only icons remain visible in the tab bar
- 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: AndroidSteps to reproduce
Reproduction
- Create a basic Expo Router app with bottom tabs
- 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;