callstack / callstack/react-native-bottom-tabs

Tab icon size is hard-coded to 27x27pt with no way to override it

未关闭
#561 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。