callstack / callstack/react-native-bottom-tabs
White flash when lazily loading a tab on iOS 27
- 主要言語
- TypeScript
- スター
- 1.5k
- フォーク
- 109
- 平均マージ
- 11時間 44分
- マージ済み PR(30日)
- 8
説明
### 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
```
コントリビューションガイド
調査の方向性
まず、デフォルトの遅延読み込みで未ロードのタブに移動したときに白いフラッシュが発生することを、添付された動画と報告されている React Native およびライブラリのバージョンを使って再現します。これを lazy: false および contentStyle の背景による回避策と比較し、その後タブの読み込み経路を追跡します。完了の条件は、遅延読み込みを有効にしたまま、最初の遅延読み込み対象のタブが iOS で白いフラッシュなしに表示されることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100