callstack / callstack/react-native-bottom-tabs
Tab icon size is hard-coded to 27x27pt with no way to override it
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 109
- Avg merge
- 11h 44m
- Merged PRs (30d)
- 8
Description
### 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
Contributor guide
Research direction
Start with the React Native tab options API and the two iOS call sites in ios/TabViewProvider.swift:60 and ios/TabViewImpl.swift:350. Check how a navigator-level default and per-screen override would flow to both fixed-size paths, including the Android layout concern mentioned in the proposal. Done means the chosen API allows one tab icon to use a different size without breaking the default behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, swift, typescript
- Domain
- api, mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100