callstack / callstack/react-native-bottom-tabs
White flash when lazily loading a tab on iOS 27
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1.5k
- Forks
- 109
- Ø Merge
- 11 Std. 44 Min.
- Gemergte PRs (30 T.)
- 8
Beschreibung
### 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
```
Beitragsleitfaden
Rechercherichtung
Beginne damit, den weißen Flash beim Navigieren zu einem noch nicht geladenen Tab mit dem standardmäßigen Lazy Loading zu reproduzieren, und verwende dabei das angehängte Video sowie die gemeldeten React Native- und Bibliotheksversionen. Vergleiche dies mit lazy: false und dem contentStyle-Hintergrund-Workaround und verfolge anschließend den Pfad zum Laden des Tabs; als abgeschlossen gilt die Untersuchung, wenn der erste per Lazy Loading geladene Tab auf iOS ohne weißen Flash erscheint, während Lazy Loading aktiviert bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native, typescript
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100