callstack / callstack/react-native-bottom-tabs

White flash when lazily loading a tab on iOS 27

Abierto
#547 0 comentarios 0 reacciones 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
109
Merge medio
11 h 44 min
PR fusionados (30 d)
8

Descripción

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] 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

```shell
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

```js
I provided a video
```

Guía de contribución

Abrir la guía de contribución

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.

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.