[Android] Tab bar does not react to color change if useColorScheme omitted
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 45/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- android, react-native, typescript
- Ambito
- mobile
Direzione di ricerca
Inizia dal repository di esempio e dal punto di ingresso (tabs)/_layout.tsx, confrontando i casi del componente Tabs inline e separato. Traccia il percorso di Appearance.setColorScheme() fino a BottomTabNavigator e Tabs; il lavoro è completato quando la barra delle schede segue i cambiamenti del tema senza richiedere useColorScheme() nel layout né un file di componente separato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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
- Create a new Expo repository with default template
- Install library based on documentation, putting the
BottomTabNavigatorandTabsin the same file as(tabs)/_layout.tsx - In the main file, add a button to change the theme e.g.
<Button title="Change theme" onPress={() => { Appearance.setColorScheme(colorScheme === "dark" ? "light" : "dark"); }} /> - Clicking the button does not change the tab bar theme
- In the
(tabs)/_layout.tsx, addconst colorScheme = useColorScheme(); - 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
- Lingua principale
- TypeScript
- Stelle
- 1.5k
- Fork
- 108
- Merge medio
- 12h 42m
- PR unite (30g)
- 9
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di callstack/react-native-bottom-tabs
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 68/100
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 58/100
-
bug
Difficoltà 4/5 3-5 giorni Idoneità per principianti 48/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 68/100
Tutte le issue di callstack/react-native-bottom-tabs
Issue simili
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
linagora/twake-calendar-frontend#1377 · 1 commento ·
-
Claiming namespace Londopy Aperta
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 72/100
EclipseFdn/open-vsx.org#13385 · 1 commento ·
-
front-end UI/UX
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 75/100
-
[Icon Request]: Frankenphp Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
S: triage
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100