callstack / callstack/react-native-bottom-tabs

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

Open
#397 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.