callstack / callstack/react-native-bottom-tabs
White flash when lazily loading a tab on iOS 27
- 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
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