Skip to content

feat(Android, Stack v5): add support for extended tinting and enforce M3 icon size for back button#4126

Open
kligarski wants to merge 4 commits into
@kligarski/stack-v5-android-toolbar-menu-iconfrom
@kligarski/stack-v5-android-update-back-button
Open

feat(Android, Stack v5): add support for extended tinting and enforce M3 icon size for back button#4126
kligarski wants to merge 4 commits into
@kligarski/stack-v5-android-toolbar-menu-iconfrom
@kligarski/stack-v5-android-update-back-button

Conversation

@kligarski

@kligarski kligarski commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

Description

Adds support for customizing pressed, focused tint color for back button. Enforces M3 spec back button icon size. Fixes scaling logic to handle both custom images and drawable resources.

Changes

  • add backButtonTintColor{Pressed,Focused}, rename previous prop to ...Normal
  • handle prop changes
  • extract scaling logic and use it for back button
  • fix scaling logic to handle both regular icons and drawable resources

Before & after - visual documentation

before after
before.mp4
after.mp4

Test plan

Run test-stack-back-button-android.

Checklist

  • Included code example that can be used to test this change.
  • For visual changes, included screenshots / GIFs / recordings documenting the change.
  • For API changes, updated relevant public types.
  • Ensured that CI passes

@kligarski kligarski changed the base branch from main to @kligarski/stack-v5-android-toolbar-menu-icon June 2, 2026 18:07

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the Android Stack v5 header back button customization API to support stateful tinting (normal/pressed/focused) and enforces Material 3 icon sizing by reusing a shared drawable-resizing utility.

Changes:

  • Renames backButtonTintColor to backButtonTintColorNormal and adds backButtonTintColorPressed / backButtonTintColorFocused across TS types and Android native implementation.
  • Extracts icon scaling logic into a shared Android utility and applies it to toolbar menu icons and back button icons.
  • Updates the single-feature test app + scenario documentation to cover the new tint props and runtime updates.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/fabric/gamma/stack/StackHeaderConfigAndroidNativeComponent.ts Updates Fabric native props to expose ...TintColorNormal/Pressed/Focused.
src/components/gamma/stack/header/StackHeaderConfig.android.types.ts Updates public Android types/docs for new back button tint props.
apps/src/tests/single-feature-tests/stack-v5/test-stack-back-button-android/scenario.md Expands manual test steps for normal/pressed/focused tint behavior and keyboard focus testing.
apps/src/tests/single-feature-tests/stack-v5/test-stack-back-button-android/index.tsx Updates the test screen controls/config to use the new tint props.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuCoordinator.kt Switches to shared getResizedDrawable utility for menu icons.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/StackHeaderDrawableUtils.kt Introduces shared drawable resizing utility enforcing 24dp height.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/StackHeaderCoordinator.kt Implements stateful back button tinting and applies resizing to custom back button icons.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/config/StackHeaderConfigViewManager.kt Adds new prop setters for backButtonTintColorNormal/Pressed/Focused.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/config/StackHeaderConfigProviding.kt Updates config interface to expose the new tint fields.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/config/StackHeaderConfig.kt Stores the new tint fields on the config view implementation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

* @summary Tint color applied to the back button icon when it is pressed.
*
* @remarks
* Due to native platform limitations, if you set this prop, you must also

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In TabsAppearanceApplicator, we use a fallback color from resources if one isn't provided. Can we apply the same approach to these icons to avoid transparent color?

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.

3 participants