Android active tint color wrong on mount

[fedpre]

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

Screen.Recording.2024-12-10.at.12.57.33.PM.mov

As you can see from the video, when starting the app the bottom nav bar active tint color is wrong. Once pressing on a different element, it changes to the correct one.

Expected behaviour: the correct color should be from the beginning

Also, as a question - Is it possible to always show all the labels on Android without the animation?

Library version

0.7.3

Environment info

System:
  OS: macOS 15.1.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 539.05 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.8.0
    path: ~/.nvm/versions/node/v20.8.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.8.0/bin/yarn
  npm:
    version: 10.1.0
    path: ~/.nvm/versions/node/v20.8.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.13.0
    path: /Users/federicopregnolato/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/federicopregnolato/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. Install the library
2. Implement it with react-navigation
3. Change the active tint color

Reproducible sample code

<TabsNavigator.Navigator screenOptions={{headerShown: false}}>
      {tabs.map((tab, index) => {
        return (
          <TabsNavigator.Screen
            key={index}
            name={tab.name}
            component={tab.component}
            options={{
              tabBarIcon: () => tab.icon,
              unmountOnBlur: false,
              tabBarActiveTintColor: '#125E5C',
              tabBarLabel: tab.name,
            }}
          />
        );
      })}
    </TabsNavigator.Navigator>

[fedpre]

Digging through the example app, I found that you need to pass to the navigator the proplabeled={true} to have labels always showing on Android.

I also found that that if you pass tabBarActiveTintColor="#125E5C" directly in the navigator, I don't have that glitch anymore. Is this the expected behaviour? What's the purpose of the same prop at each tab level?

[okwasniewski]

Hey, thanks for opening the issue.

Digging through the example app, I found that you need to pass to the navigator the proplabeled={true} to have labels always showing on Android.

Yeah, this is the native behavior of the bottom bar on Android, they have this rule: for more than 3 tabs show labels only when focused

I also found that that if you pass tabBarActiveTintColor="#125E5C" directly in the navigator, I don't have that glitch anymore. Is this the expected behaviour?

Okay, so the issue happens only with the first tab when setting it on the screen level, right?

What's the purpose of the same prop at each tab level?

If you want to have different colors for each tab 😅

[fedpre]

Thanks for the reply

Yeah, this is the native behavior of the bottom bar on Android, they have this rule: for more than 3 tabs show labels only when focused

Curious behaviour indeed.

Okay, so the issue happens only with the first tab when setting it on the screen level, right?

Correct.

If you want to have different colors for each tab 😅

Ah, that makes sense!