callstack / callstack/react-native-bottom-tabs

[iOS 26] Active tint color not adapting when scrolling over light/dark content even though it is set to a DynamicColorIOS

オープン
#429 コメント 3 件 リアクション 1 件 担当者 0 名 GitHub で見る
bug
主要言語
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

On iOS 26, the liquid glass tab bar automatically changes colors of the icons/labels based on the content underneath. However, for this to work, we need to specify a dynamic color (`DynamicColorIOS`) with a `light` and `dark` variant (since there's no callback that is called when the colors need to change). When using `react-native-bottom-tabs`, dynamic colors work for the inactive tint color, but not for the active tint color, which behaves like a static color - it does not change color based on the content.

Here's the video illustrating this (notice how the inactive tint color changes based on content while the active tint color remains unchanged):

https://github.com/user-attachments/assets/1e9d4cf1-ce52-46ab-a927-b3a68cdd03de

### Library version

0.11.2

### Environment info

```shell
expo-env-info 2.0.7 environment info:
System:
OS: macOS 15.7
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.17.1 - ~/.nvm/versions/node/v22.17.1/bin/node
Yarn: 4.9.3 - ~/.nvm/versions/node/v22.17.1/bin/yarn
npm: 10.9.2 - ~/.nvm/versions/node/v22.17.1/bin/npm
Watchman: 2024.10.14.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.16.2 - /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
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2512.13840223
Xcode: 26.0/17A324 - /usr/bin/xcodebuild
npmPackages:
expo: ~54.0.7 => 54.0.7
expo-router: ~6.0.4 => 6.0.4
react: 19.1.0 => 19.1.0
react-dom: 19.1.0 => 19.1.0
react-native: 0.81.4 => 0.81.4
react-native-web: ~0.21.0 => 0.21.1
Expo Workflow: managed
```

### Steps to reproduce

1. Clone the [repo](https://github.com/MrFunctor/tab-bar-active-tint-color-not-dynamic).
2. Run `yarn` to install dependencies.
3. Run prebuild for iOS: `yarn expo prebuild --platform ios`.
4. Build and run the iOS app: `yarn ios`.

### Reproducible sample code

```js
const tabBarActiveTintColor = DynamicColorIOS({
light: "blue",
dark: "lightblue",
});

const tabBarInactiveTintColor = DynamicColorIOS({
light: "black",
dark: "white",
});

export default function RootLayout() {
const colorScheme = useColorScheme();

return (


({ sfSymbol: "house.fill" }),
}}
/>
({ sfSymbol: "person.fill" }),
}}
/>



);
}
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた再現リポジトリと提供された iOS のビルド手順を使い、まず react-native-bottom-tabs における tabBarActiveTintColor と tabBarInactiveTintColor の処理から始めます。明るいコンテンツと暗いコンテンツの上をスクロールしながら、DynamicColorIOS を使ってサンプルを検証します。完了の条件は、iOS 26 でアクティブな tint が非アクティブな tint と同じように変化することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, react-native, typescript
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。