Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

The tab bar is always forced to light mode on iOS 26 when "Reduce Transparency" is on

Abierto
#433 14 comentarios 2 reacciones 0 asignados Ver en GitHub

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

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

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 enabled
Reduce Transparency disabled, issue does not occur.
Reduce Transparency disabled
Apple's Shortcuts app for comparison. No issue with Reduce Transparency setting.
Image

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
  1. Install the example app from this repo.
  2. (Optionally) call Appearance.setColorScheme('dark') in the App() function and set NavigationContainer theme prop to DarkTheme (imported from '@react-navigation/native').
  3. In iOS Settings app, set system theme to dark and in Accessibility -> Display & Text size, enable Reduce Transparency.
  4. 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

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de callstack/react-native-bottom-tabs

Todos los issues de callstack/react-native-bottom-tabs

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.