callstack / callstack/react-native-bottom-tabs

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

Abierto
#397 1 comentario 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
109
Merge medio
11 h 44 min
PR fusionados (30 d)
8

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.