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

Aperta
#397 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

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

bug
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

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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/react-native-bottom-tabs

Tutte le issue di callstack/react-native-bottom-tabs

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.