callstack / callstack/react-native-bottom-tabs
White flash when lazily loading a tab on iOS 27
- Ngôn ngữ chính
- TypeScript
- Star
- 1.5k
- Fork
- 109
- Merge trung bình
- 11 giờ 44 phút
- Pull request đã merge (30 ngày)
- 8
Mô tả
### 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
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách tái hiện hiện tượng nháy trắng khi điều hướng đến một tab chưa được tải với cơ chế lazy loading mặc định, sử dụng video đính kèm cùng các phiên bản React Native và thư viện đã được báo cáo. So sánh hiện tượng này với lazy: false và cách workaround nền bằng contentStyle, sau đó lần theo đường dẫn tải tab; công việc được xem là hoàn tất khi tab đầu tiên được tải bằng lazy loading xuất hiện mà không bị nháy trắng trên iOS trong khi lazy loading vẫn được bật.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- mobile
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 45/100