Skip to content

feat: add per-tab icon sizing - #562

Draft
thiagobrez wants to merge 1 commit into
mainfrom
codex/issue-561-tab-icon-size
Draft

feat: add per-tab icon sizing#562
thiagobrez wants to merge 1 commit into
mainfrom
codex/issue-561-tab-icon-size

Conversation

@thiagobrez

@thiagobrez thiagobrez commented Aug 24, 2026

Copy link
Copy Markdown
Collaborator

PR Description

Closes #561.

Adds per-tab image icon sizing while preserving every existing default:

  • standalone API: route.iconSize or getIconSize({ route })
  • React Navigation / Expo Router API: tabBarIconSize
  • omitted, zero, and invalid sizes continue to use the platform-native default (27 pt for the existing iOS image paths and Material's default size on Android)

The JS layer sends sizes through a parallel codegen array so the value is reliable across supported Fabric/codegen versions. On iOS, the override is applied to remotely loaded icons and the experimental baked-tint path, with alignment metadata that lets larger images render outside the default icon alignment box. On Android, it controls both Coil decoding and the individual Material NavigationBarItemView icon size, including size-aware drawable caching.

This also adds focused default/override/adapter tests, documentation, a changeset, and an example with a 34 pt/dp Avatar icon next to default-sized tabs.

How to test?

Passed locally:

  • yarn typecheck
  • yarn lint (three existing warnings, no errors)
  • yarn build
  • yarn workspace react-native-bottom-tabs test --runInBand (3 tests)
  • yarn workspace @bottom-tabs/react-navigation test --runInBand (1 test)
  • Android example ./gradlew app:assembleDebug
  • iOS example Debug simulator build with xcodebuild

The workspace-wide yarn test -- --runInBand also passes both affected package suites, then fails in the unrelated existing Expo template ThemedText-test.tsx because its React 19 render is not wrapped in act() and returns null. That test is not part of the current CI workflow.

CI status

All required PR checks pass: Android build, iOS build, library build, lint/typecheck, SwiftLint, CodeQL, and the Actions, C/C++, and JavaScript/TypeScript analysis jobs.

Device verification

Verified with agent-device 0.20.10 using the installed CLI's open → snapshot → interact → verify → close workflow:

  • iPhone 17 Pro simulator, iOS 26.5: Avatar renders at 34 pt while neighboring image tabs retain 27 pt; selection changes were explicitly verified.
  • Pixel 10 Pro emulator, Android API 37 at 3x density: Avatar hierarchy is 102x102 px (34 dp) while the default Chat icon is 72x72 px (24 dp); selection changes were explicitly verified.

Artifacts are committed under artifacts/issue-561:

Screenshots

iOS Android
iOS custom Avatar icon Android custom Avatar icon

Sign up for free to 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.

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

1 participant