feat(tabs): custom drawable/symbol tab-bar icons — tinted, per-tab size, indicator sizing, iOS fallback#4209
Open
stachbial wants to merge 6 commits into
Conversation
Extend the gamma native bottom tab bar so a drawableResource icon can: - keep its own colors via tintingMode 'original' (NoTintDrawable) - size per tab via drawableIconSize (shared max box + per-item inset) - size the active indicator via activeIndicatorWidth/Height, or auto-scale
…ance The active indicator is bar-wide in Material (one size for all items), so exposing it per tab via activeIndicatorWidth/Height was misleading. Move the size into the standardAppearance struct as tabBarItemActiveIndicatorWidth/Height, applied from the focused tab like the indicator color, keeping the icon-box auto-scale fallback. drawableIconSize stays per-tab.
stachbial
force-pushed
the
@stachbial/native-tab-drawable-icons
branch
from
87b8e37 to
5b24016
Compare
stachbial
changed the title
…-drawable-icons # Conflicts: # android/src/main/java/com/swmansion/rnscreens/gamma/tabs/screen/TabsScreen.kt # android/src/main/java/com/swmansion/rnscreens/gamma/tabs/screen/TabsScreenViewManager.kt
Contributor
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Extends the native bottom tab bar for custom, app-provided icons.
Android (
gammaTabs), on thedrawableResourceicon:tinted?: boolean(defaulttrue) —falsekeeps the drawable's own colors (wraps it inNoTintDrawableso the bar's tint can't repaint it). Settable per state (normal / selected).drawableIconSize(dp) — per-tab icon size. Material has one bar-wideitemIconSize, so the box becomes the max across tabs and each icon is inset to its own size; unset uses 24dp.tabBarItemActiveIndicatorWidth/tabBarItemActiveIndicatorHeight(dp) on the appearance — bar-wide indicator size, from the focused tab; unset auto-scales to wrap an enlarged icon.iOS — custom SF Symbol fallback on the tab bar:
systemImageNamed: ?: imageNamed:, so asfSymbolicon resolves an app asset-catalog symbol when it isn't a built-in.Before & after
Per-tab icon size —
drawableIconSize. The wide logo renders at its intended size; the system star stays 24dp.Active-indicator size. Reshape the pill to wrap the enlarged icon; shared across tabs.
Tint —
tinted: false. The focused tab keeps the icon's own colors; unfocused falls back to the template tint.Screen.Recording.2026-06-25.at.12.31.14.mov
iOS showcase:
type: 'sfSymbol'with custom icon name supplied via xcasset.symbolsetand.imageset(vector image)react-native-nano-icons-SFSymbols.mp4
Test plan
gammaTabs bar withdrawableResourceicons on Android:tinted: falsekeeps a multicolor VectorDrawable's colors;drawableIconSizescales one tab while others stay 24dp; the indicator wraps the enlarged icon.sfSymbol.CustomNativeBottomTabsIcons.{ios,android}.tsx.