callstack / callstack/react-native-bottom-tabs

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

オープン
#561 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
1.5k
フォーク
109
平均マージ
11時間 44分
マージ済み PR(30日)
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にある2つのiOSの呼び出し箇所から始めてください。navigator-level defaultとper-screen overrideが、proposalで言及されているAndroidのlayoutに関する懸念を含め、両方の固定サイズの経路にどのように渡るかを確認してください。選択したAPIによって1つのtab iconがデフォルトの動作を壊さずに異なるサイズを使用できれば完了です。

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

評価

技術スタック
react-native, swift, typescript
領域
api, mobile
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

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

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