Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android: Tab labels flicker and disappear on initial render #223

Open
3 tasks done
guillaumehcht opened this issue Dec 21, 2024 · 4 comments
Open
3 tasks done

Android: Tab labels flicker and disappear on initial render #223

guillaumehcht opened this issue Dec 21, 2024 · 4 comments
Labels
Android bug Something isn't working

Comments

@guillaumehcht
Copy link

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

Screenshot_20241221-183910~2

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;
@guillaumehcht guillaumehcht added the bug Something isn't working label Dec 21, 2024
@okwasniewski
Copy link
Collaborator

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
Copy link
Author

guillaumehcht commented Dec 21, 2024

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
Copy link
Author

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
Copy link
Collaborator

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Android bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants