[Android] Tab bar does not react to color change if useColorScheme omitted

[ynshung]

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

Issue is similar to #227, where Apperance.setColorScheme() does not change the tab bar appearance. It only happened if useColorScheme() is not included in the same code with the custom TabBar. See example below.

Library version

0.10.0

Environment info

System:
  OS: macOS 15.6
  CPU: (10) arm64 Apple M4
  Memory: 218.78 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.12.0
    path: ~/.nvm/versions/node/v22.12.0/bin/node
  Yarn: Not Found
  npm:
    version: 11.4.0
    path: ~/.nvm/versions/node/v22.12.0/bin/npm
  Watchman:
    version: 2025.07.21.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.0.0
    System Images:
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: latest
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.5
    wanted: 0.79.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create a new Expo repository with default template
2. Install library based on documentation, putting the BottomTabNavigator and Tabs in the same file as (tabs)/_layout.tsx
3. In the main file, add a button to change the theme e.g. <Button title="Change theme" onPress={() => { Appearance.setColorScheme(colorScheme === "dark" ? "light" : "dark"); }} />
4. Clicking the button does not change the tab bar theme
5. In the (tabs)/_layout.tsx, add const colorScheme = useColorScheme();
6. The tab bar theme should follow the theme change

Additionally, if you create a separate Tabs component file, it would have the same bug and adding useColorScheme() in the (tabs)/_layout.tsx will not fix the problem.

Reproducible sample code

Sample repo: https://github.com/ynshung/tabbar-theme-bug
See separate-branch for having Tabs as a separate component file