Skip to content

[android] default tab bar pops up above custom tab bar when toggling device theme #345

Closed
@SumitR9910

Description

@SumitR9910

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

default tab bar pops up on top of the custom tab bar on android when switching device theme, only disappears if app is launched again, using Expo Router btw.

Library version

0.9.0

Environment info

System:
  OS: macOS 15.3
  CPU: (10) arm64 Apple M4
  Memory: 152.42 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.6.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 34.0.0
      - 35.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
    Android NDK: 28.0.13004108
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.5
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

  1. Implement a custom tab bar component and pass it using the tabBar prop.
  2. Switch system theme
  3. Default tab bar appears on top of custom one.

Reproducible sample code

<Tabs
      disablePageAnimations={true}
      tabBar={tabBar} //Custom tab bar component
      hapticFeedbackEnabled={true}
      labeled={true}
      activeIndicatorColor={"rgba(0,0,0,0)"}
      initialRouteName="(index)"
    >

        <Tab ....>

</Tabs>

Metadata

Metadata

Assignees

No one assigned

    Labels

    AndroidbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions