The tab bar is always forced to light mode on iOS 26 when "Reduce Transparency" is on
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 56/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- react-native, typescript
- Área
- mobile
Línea de trabajo
Comienza ejecutando la aplicación de ejemplo en ./apps/example/ y sigue la configuración de App(), reproduciendo la barra de pestañas nativa con el modo oscuro y Reduce Transparency activados. Confirma que has terminado comprobando que, con ese ajuste, la barra de pestañas sigue la apariencia oscura del sistema y conserva el comportamiento indicado cuando Reduce Transparency está desactivado.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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
On iOS 26 with the new Liquid Glass style tab bar, the background and icon appearance is always in light mode despite system setting, when the accessibility option "Reduce Transparency" is enabled in the iOS settings. When the accessibility setting is not enabled, the tab bar responds to system appearance and content in the background normally. Calling Appearance.setColorScheme('dark') and/or using DarkTheme for the Native stack navigator has no effect on this issue. This does not seem to be a bug in iOS 26 itself, nor is the tab bar supposed to be in light mode when the accessibility setting is enabled, as in Apple's own native apps the tab bar behaves normally (as shown in the example screenshot of Shortcuts below).
This issue can be replicated with the example app in this repo.
Screenshots
Reduce Transparency enabled and system set to dark theme, issue with the tab bar occurs.
Reduce Transparency disabled, issue does not occur.
Apple's Shortcuts app for comparison. No issue with Reduce Transparency setting.
The screenshots are from a simulator but the issue occurs on actual devices too.
Library version
0.11.2
Environment info
System:
OS: macOS 15.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 626.77 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.19.5
path: /opt/homebrew/opt/node@20/bin/node
Yarn:
version: 4.6.0
path: /opt/homebrew/opt/node@18/bin/yarn
npm:
version: 10.8.2
path: /opt/homebrew/opt/node@20/bin/npm
Watchman:
version: 2025.09.15.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.0
- iOS 26.0
- macOS 26.0
- tvOS 26.0
- visionOS 26.0
- watchOS 26.0
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2512.13991807
Xcode:
version: 26.0/17A324
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.16
path: /usr/bin/javac
Ruby:
version: 3.4.6
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Steps to reproduce
- Install the example app from this repo.
- (Optionally) call Appearance.setColorScheme('dark') in the
App()function and set NavigationContainerthemeprop to DarkTheme (imported from '@react-navigation/native'). - In iOS Settings app, set system theme to dark and in Accessibility -> Display & Text size, enable Reduce Transparency.
- In the example app, navigate to an example with a native tab bar.
Reproducible sample code
./apps/example/ from this repository.
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.5k
- Forks
- 108
- Merge medio
- 12 h 42 min
- PR fusionados (30 d)
- 9
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de callstack/react-native-bottom-tabs
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
-
Dificultad 4/5 3-5 días Aptitud para principiantes 68/100
callstack/react-native-bottom-tabs#591 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 58/100
Todos los issues de callstack/react-native-bottom-tabs
Issues similares
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 85/100
-
Mend: dependency security vulnerability untriaged
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100