callstack / callstack/react-native-bottom-tabs
[Android] Tab bar does not react to color change if useColorScheme omitted
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 109
- Avg merge
- 11h 44m
- Merged PRs (30d)
- 8
Description
### Before submitting a new issue
- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] 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
```shell
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. ` { 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
Contributor guide
Assessment
This issue has not been assessed yet.