callstack / callstack/react-native-bottom-tabs

The tab bar is always forced to light mode on iOS 26 when "Reduce Transparency" is on

Đang mở
#433 14 bình luận 2 reaction 0 người được giao Xem trên GitHub
bug
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

On iOS 26 with the new Liquid Glass style tab bar, the background and icon appearance is always in light mode despite system setting, when the accessibility option "Reduce Transparency" is enabled in the iOS settings. When the accessibility setting is _not_ enabled, the tab bar responds to system appearance and content in the background normally. Calling `Appearance.setColorScheme('dark')` and/or using DarkTheme for the Native stack navigator has no effect on this issue. This does not seem to be a bug in iOS 26 itself, nor is the tab bar _supposed_ to be in light mode when the accessibility setting is enabled, as in Apple's own native apps the tab bar behaves normally (as shown in the example screenshot of Shortcuts below).
This issue can be replicated with the example app in this repo.

**Screenshots**
Reduce Transparency enabled and system set to dark theme, issue with the tab bar occurs.
Reduce Transparency enabled
Reduce Transparency disabled, issue does not occur.
Reduce Transparency disabled
Apple's Shortcuts app for comparison. No issue with Reduce Transparency setting.
Image

The screenshots are from a simulator but the issue occurs on actual devices too.

### Library version

0.11.2

### Environment info

```shell
System:
OS: macOS 15.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 626.77 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.19.5
path: /opt/homebrew/opt/node@20/bin/node
Yarn:
version: 4.6.0
path: /opt/homebrew/opt/node@18/bin/yarn
npm:
version: 10.8.2
path: /opt/homebrew/opt/node@20/bin/npm
Watchman:
version: 2025.09.15.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.0
- iOS 26.0
- macOS 26.0
- tvOS 26.0
- visionOS 26.0
- watchOS 26.0
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2512.13991807
Xcode:
version: 26.0/17A324
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.16
path: /usr/bin/javac
Ruby:
version: 3.4.6
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
```

### Steps to reproduce

1. Install the example app from this repo.
2. (Optionally) call Appearance.setColorScheme('dark') in the `App()` function and set NavigationContainer `theme` prop to DarkTheme (imported from '@react-navigation/native').
3. In iOS Settings app, set system theme to dark and in Accessibility -> Display & Text size, enable Reduce Transparency.
4. In the example app, navigate to an example with a native tab bar.

### Reproducible sample code

```js
./apps/example/ from this repository.
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách chạy ứng dụng mẫu trong ./apps/example/ và làm theo phần thiết lập App(), tái tạo thanh tab gốc với chế độ tối và Reduce Transparency được bật. Xác nhận đã hoàn tất bằng cách kiểm tra rằng thanh tab tuân theo giao diện tối của hệ thống trong thiết lập đó, đồng thời vẫn giữ hành vi đã được báo cáo khi Reduce Transparency bị tắ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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
56/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.