callstack / callstack/react-native-bottom-tabs

"Reduce Transparency" setting issue with tabBarStyle

Ouverte
#448 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
1.5k
Forks
109
Merge moyen
11 h 44 min
PR mergées (30 j)
8

Description

### 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.

Image
Image

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
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème sur iOS avec Reduce Transparency activé et un tabBarStyle backgroundColor personnalisé. Suivez la manière dont tabBarStyle est appliqué dans l’implémentation de bottom-tabs et vérifiez que la couleur d’arrière-plan reste inchangée lorsque le réglage d’accessibilité est activé ; aucun exemple reproductible ni fichier de test n’est fourni.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, react-native, typescript
Domaine
accessibility, mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.