Skip to content

feat(bottom-tabs): per-tab icon size & active-indicator sizing on the native tab bar - #13168

Open
stachbial wants to merge 1 commit into
@stachbial/image-icon-aspect-ratiofrom
@stachbial/native-tab-icon-sizing
Open

feat(bottom-tabs): per-tab icon size & active-indicator sizing on the native tab bar#13168
stachbial wants to merge 1 commit into
@stachbial/image-icon-aspect-ratiofrom
@stachbial/native-tab-icon-sizing

Conversation

@stachbial

@stachbialstachbial commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

What

Bottom-tab icon sizing options, on the native bar:

  • tabBarIconSize (dp) — per-tab icon size. On the custom (JS) bar it sizes the icon on all platforms; on the native bar it maps to react-native-screens' drawableIconSize — the bar boxes to the largest size across tabs and insets smaller ones (Android only). Unset uses the default.
  • tabBarActiveIndicatorWidth / tabBarActiveIndicatorHeight (dp) — bar-wide active-indicator size, taken from the focused tab. Native bar only; unset auto-scales to wrap the icon box.

Android drawable tinting on the native bar is driven by image's tinted (no tintingMode in the public API) — tinted: false keeps the drawable's own colors.

Also fixes tabBarIconStyle's type (TextStyleViewStyle) — it styles the icon container View.

Changes since review

  • Rebased onto PlatformIcon.
  • tabBarIconSize is no longer restricted to Android on the custom implementation — it is plain RN layout and works on iOS too. It stays Android-only on the native implementation, where it maps to drawableIconSize.
  • Non-square image sizing moved out to aspectRatio (feat(elements): add aspectRatio to image icons #13194); this PR is stacked on it.

Depends on

Test plan

Native bottom tab navigator on Android, with react-native-screens from #4209:

  • tabBarIconSize on one screen scales that tab's icon; others stay default.
  • tabBarActiveIndicatorWidth / tabBarActiveIndicatorHeight in screenOptions reshape the indicator.
  • tinted: false on a multicolor drawable keeps its colors as a tab icon.
  • On the custom (JS) bar, tabBarIconSize scales the icon on iOS and Android.

@stachbial
stachbialforce-pushed the @stachbial/elements-custom-icon-types branch from 3a7be35 to 1cd2da7CompareJune 25, 2026 16:02
@stachbial
stachbialforce-pushed the @stachbial/native-tab-icon-sizing branch from 370f2a3 to c41c9faCompareJune 25, 2026 16:03
Comment threadpackages/bottom-tabs/src/types.tsx Outdated
Comment threadpackages/bottom-tabs/src/views/BottomTabViewNativeImpl.tsx Outdated
@stachbial
stachbialforce-pushed the @stachbial/elements-custom-icon-types branch from 1cd2da7 to 1ee80b3CompareJune 28, 2026 14:53
@stachbial
stachbialforce-pushed the @stachbial/native-tab-icon-sizing branch from c41c9fa to 47f96eeCompareJune 28, 2026 14:53
@stachbial
stachbialforce-pushed the @stachbial/elements-custom-icon-types branch from 1ee80b3 to 9c964dfCompareJune 28, 2026 14:58
@stachbial
stachbialforce-pushed the @stachbial/native-tab-icon-sizing branch 3 times, most recently from e5c607d to 0052090CompareJune 29, 2026 10:24
@stachbial
stachbial marked this pull request as ready for review July 1, 2026 15:59
@stachbial
stachbialforce-pushed the @stachbial/elements-custom-icon-types branch from 9c964df to 538fad0CompareJuly 23, 2026 18:04
@stachbial
stachbialforce-pushed the @stachbial/native-tab-icon-sizing branch from 0052090 to 6bf436dCompareJuly 23, 2026 18:05
@stachbial
stachbial changed the base branch from @stachbial/elements-custom-icon-types to @stachbial/image-icon-aspect-ratioJuly 23, 2026 18:08
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@stachbial@satya164