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