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

White flash when lazily loading a tab on iOS 27

Abierto
  • ¿Algo no está bien?
#547 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@thiagobrez ya está trabajando en esto.

Desde el 27/8/2026.

  • #552 de @thiagobrez — cerrado sin fusionar
  • #564 de @thiagobrez — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react-native, typescript
Área
mobile

Línea de trabajo

Empieza reproduciendo el destello blanco al navegar a una pestaña que aún no se ha cargado con la carga diferida predeterminada, utilizando el video adjunto y las versiones indicadas de React Native y de la biblioteca. Compara esto con lazy: false y con la solución alternativa del fondo de contentStyle; se considera terminado cuando la primera pestaña cargada de forma diferida aparece sin un destello blanco en iOS mientras la carga diferida sigue habilitada.

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

Hey there! I recently upgraded to version 1.3.1 to resolve this issue. Here’s the link to the GitHub issue: https://github.com/callstack/react-native-bottom-tabs/issues/529. However, I noticed another issue that’s not present on iOS 26.

When a screen’s tab first loads (lazy loading), there’s a white flash before it appears. Once the screen is fully loaded, the flash stops.

This issue is similar to https://github.com/callstack/react-native-bottom-tabs/issues/327, but it’s specific to iOS. One comment suggested adding a background to the contentStyle, but that didn’t fix the problem.

As an alternative, you can disable lazy loading by setting lazy: false on the screen options. However, since the default setting is true, I thought it would be better to create a new issue because this workaround worked fine on iOS 26, which I found on this previous issue: https://github.com/callstack/react-native-bottom-tabs/issues/162#issuecomment-2499142816

https://github.com/user-attachments/assets/0a0e460c-f297-492e-8d34-f60670757dc8

appears in the first 2 seconds

Library version

1.3.1

Environment info
info Fetching system and libraries information...
System:
  OS: macOS 26.5.1
  CPU: (10) arm64 Apple M4
  Memory: 163.59 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /var/folders/hf/0x2szkt14s57yhk0v2m4pdrr0000gn/T/yarn--1782379628243-0.6785949810233385/node
  Yarn:
    version: 1.22.22
    path: /var/folders/hf/0x2szkt14s57yhk0v2m4pdrr0000gn/T/yarn--1782379628243-0.6785949810233385/yarn
  npm:
    version: 11.4.2
    path: ~/.local/state/fnm_multishells/98327_1782379622849/bin/npm
  Watchman:
    version: 2026.06.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.5
      - iOS 26.5
      - macOS 26.5
      - tvOS 26.5
      - visionOS 26.5
      - watchOS 26.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2026.1 AI-261.23567.138.2611.15646644
  Xcode:
    version: 26.5/17F42
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.19
    path: /usr/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.86.0 is now available (your project is running on v0.80.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.86.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.80.2&to=0.86.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
Steps to reproduce
  1. Navigate to a new tab that is not yet loaded
Reproducible sample code
I provided a video
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
108
Merge medio
22 h 32 min
PR fusionados (30 d)
8

Preparar el entorno

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.