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

Đang mở
#429 3 bình luận 1 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, 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" }),
}}
/>



);
}
```

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

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

Hướng nghiên cứu

Bắt đầu với cách react-native-bottom-tabs xử lý tabBarActiveTintColor và tabBarInactiveTintColor, sử dụng repository tái hiện được liên kết và các bước build iOS đã cung cấp. Xác minh sample bằng DynamicColorIOS trong khi cuộn qua nội dung sáng và tối; hoàn tất khi tint active thay đổi giống như tint inactive trên iOS 26.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
ios, 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
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/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.