callstack / callstack/react-native-bottom-tabs
"Reduce Transparency" setting issue with tabBarStyle
- 主要言語
- 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
In the application I use only dark color and would like to keep the same backGround color for tabBar, everything works fine but when I enable "Reduce Transparency" background color got overwritten, see attached video.
https://github.com/user-attachments/assets/0b0b3c90-d00d-435a-aa6b-e313a26d11a1
### Library version
^0.11.2
### Environment info
```shell
System:
OS: macOS 26.0.1
CPU: (8) arm64 Apple M3
Memory: 123.77 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.9.0
path: ~/.nvm/versions/node/v22.9.0/bin/node
Yarn: Not Found
npm:
version: 10.8.3
path: ~/.nvm/versions/node/v22.9.0/bin/npm
Watchman:
version: 2025.06.23.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
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.25410.109.2511.13665796
Xcode:
version: 26.0.1/17A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.12
path: /usr/bin/javac
Ruby:
version: 3.3.7
path: /Users/ashotosipyan/.rubies/ruby-3.3.7/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: ^15.0.1
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.77.2
wanted: 0.77.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
```
### Steps to reproduce
1. Set backGroundColor for tabBarStyle
2. Open iphone settings -> Accessibility -> Display & Text Size -> turn on Reduce Transparency toggle
3. Open the app -> the color will be overwritten
### Reproducible sample code
```js
don't have this opportunity
```
コントリビューションガイド
調査の方向性
まず、Reduce Transparencyを有効にし、カスタムのtabBarStyle backgroundColorを設定した状態でiOS上の問題を再現します。bottom-tabsの実装でtabBarStyleがどのように適用されるかを追跡し、アクセシビリティ設定が有効な場合も背景色が変わらないことを確認します。再現可能なサンプルやテストファイルは提供されていません。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- ios, react-native, typescript
- 領域
- accessibility, mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100