callstack / callstack/react-native-bottom-tabs
Tab icon size is hard-coded to 27x27pt with no way to override it
- 主要语言
- TypeScript
- 星标
- 1.5k
- 派生
- 109
- 平均合并
- 11 小时 44 分钟
- 30 天内合并 PR
- 8
描述
### Summary
Tab icon size is hard-coded to 27×27pt with no way to override it, which makes it impossible to give a single tab item a larger icon.
### Where
Two independent call sites, both fixed:
- [`ios/TabViewProvider.swift:60`](https://github.com/callstack/react-native-bottom-tabs/blob/main/packages/react-native-bottom-tabs/ios/TabViewProvider.swift#L60) — `private var iconSize = CGSize(width: 27, height: 27)`, applied to remotely-loaded icons via `image.resizeImageTo(size: iconSize)`.
- [`ios/TabViewImpl.swift:350`](https://github.com/callstack/react-native-bottom-tabs/blob/main/packages/react-native-bottom-tabs/ios/TabViewImpl.swift#L350) — `let iconSize = CGSize(width: 27, height: 27)` inside `makeTabBarItemImage`, used on the `experimental_bakedTintColors` path.
Because remote images are resized to `iconSize`, supplying a larger source image has no effect.
### Use case
We show the signed-in user's avatar as the Profile tab's icon (a snapshot of our own circular avatar component, handed over as a `file://` PNG). Design wants that avatar rendered noticeably larger than the neighbouring glyph icons, which is a common pattern for a "you" tab — the avatar is a photo of a person rather than a symbol, so it reads better at a larger size, especially with the label hidden via `tabBarLabel: ''`.
At 27pt it is legible but visibly smaller than intended, and there is currently no prop, per-screen option, or `imageInsets`-style escape hatch to change it.
### Proposal
Expose the icon size, ideally per screen so one item can differ from the rest:
```tsx
({ uri: avatarFileUri }),
tabBarIconSize: 34, // new
}}
/>
```
A navigator-level default (`iconSize` on `Tab.Navigator`) with a per-screen override would also work for us. Happy to open a PR if you'd like it in this shape — wanted to check the preferred API first, and whether per-screen sizing raises layout concerns on Android's `BottomNavigationView` that aren't obvious from the iOS side.
### Environment
- `react-native-bottom-tabs` 1.4.0 / `@bottom-tabs/react-navigation` 1.4.0
- React Native 0.85.3, Expo SDK 56, New Architecture, React 19.2.3
- iOS 26.5 simulator (iPhone 17 Pro), Xcode 26.6
贡献指南
调研方向
从 React Native tab options API 以及 ios/TabViewProvider.swift:60 和 ios/TabViewImpl.swift:350 中的两个 iOS 调用点开始。检查 navigator-level default 和 per-screen override 如何传递到两个固定尺寸路径,同时包括 proposal 中提到的 Android 布局问题。当所选 API 允许一个 tab icon 使用不同尺寸且不破坏默认行为时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, swift, typescript
- 领域
- api, mobile
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 活跃
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100