feat: add per-tab icon sizing - #562
Draft
thiagobrez wants to merge 1 commit into
Draft
Conversation
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
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.
PR Description
Closes #561.
Adds per-tab image icon sizing while preserving every existing default:
route.iconSizeorgetIconSize({ route })tabBarIconSizeThe 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
NavigationBarItemViewicon 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 typecheckyarn lint(three existing warnings, no errors)yarn buildyarn workspace react-native-bottom-tabs test --runInBand(3 tests)yarn workspace @bottom-tabs/react-navigation test --runInBand(1 test)./gradlew app:assembleDebugxcodebuildThe workspace-wide
yarn test -- --runInBandalso passes both affected package suites, then fails in the unrelated existing Expo templateThemedText-test.tsxbecause its React 19 render is not wrapped inact()and returnsnull. 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-device0.20.10 using the installed CLI's open → snapshot → interact → verify → close workflow:Artifacts are committed under
artifacts/issue-561:Screenshots