[Android] backgroundColor is not applied full width

[teivienn]

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

if maximum 2 tabs are used, then when backgroundColor is set, the color is not applied to the full width

2 tabs	3 tabs

Library version

0.8.1

Environment info

System:
  OS: macOS 15.2
  CPU: (8) arm64 Apple M1
  Memory: 183.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: /usr/local/bin/node
  Yarn:
    version: 4.6.0
    path: /usr/local/bin/yarn
  npm:
    version: 10.8.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.11.11.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/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:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.0
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-31 | Google Play ARM 64 v8a
      - android-33-ext5 | Google Play ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/nei/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. use react-navigation integration
2. use maximum 2 tabs in Tab Navigator
3. change backgroundColor to your custom value

Reproducible sample code

Example:

    <Tab.Navigator
      initialRouteName="home"
      labeled
      tabBarActiveTintColor="#63568F"
      tabBarInactiveTintColor="#79757F"
      tabBarStyle={{
        backgroundColor: 'white',
      }}
      activeIndicatorColor="white"
    >
      <Tab.Screen
        name="home"
        component={ScreenComponent}
        options={{
          tabBarIcon: () => require('./tabs/explore.png'),
        }}
      />
      <Tab.Screen
        name="map"
        component={ScreenComponent}
        options={{
          tabBarIcon: () => require('./tabs/map.png'),
        }}
      />
    </Tab.Navigator>

[okwasniewski]

I've been able to reproduce this, thanks for reporting the issue. I will look into this 👍🏻