feat(Android, Stack v5): toolbar menu item icon and icon tint color by kligarski · Pull Request #4105 · software-mansion/react-native-screens

kligarski · 2026-05-27T14:33:00Z

Description

Adds support for icons and icon tinting for toolbar menu items in Stack v5 on Android.

Closes https://github.com/software-mansion/react-native-screens-labs/issues/1207.

Details

I tried not to use any additional state for color state list, that's why we have some code to read the current values from menu item state.
Setting tint color without normal leads to transparent icon - that's platform limitation. If you specify any tint, we can't use original appearance of the icon. You must specify normal if you want to apply any tint color.
Applying tint color to back button will be added in separate PR.
Currently, we don't support making the toolbar menu item disabled - this will be added in separate PR.
For view command update, if we need to load the image asynchronously, we delay applying the command until the image is loaded. I think it's reasonable - we want to avoid a flash e.g. if you change both colors and icon. This however differs from regular prop behavior where we apply all props as soon as possible. When you add multiple icons, each will force the update - I did it to simplify the logic, the runtime looks reasonable as well. If it turns out to be problematic, we can consider batching these updates but we would need to refactor image loading to ensure that something is always returned.
To test "focused" state you need to enable "Hardware input" in your emulator. Select something with keyboard focus (use arrows) and then click Ctrl+Tab - this will move the focus to the toolbar.

Changes

move parseIconToNativeProps to components/shared
add new props and process them for native props (change undefined to null, parseColor/resolveAssetSource)
add StackHeaderToolbarUpdate to handle props where null is the default value and "no change" needs different representation from "reset to default"
create IconResolver to handle icon-related logic (diffing, handling async updates)
handle icon and color changes for both prop and view command paths
ensure drawable is resized to 24 dp height (default icon size according to M3 spec)
add SFT

Before & after - visual documentation

toolbar_menu_icons.mp4

Test plan

Run test-stack-toolbar-menu-icon-android. Check for regressions in test-stack-subviews-android and 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

Copilot

Pull request overview

Adds Android Stack v5 support for toolbar menu item icons (drawable resources or image sources) and per-state icon tinting, including correct “no change” vs “reset to default” semantics for view-command updates. This integrates new JS-to-native props, native icon/tint application in MaterialToolbar, and a Single Feature Test scenario to validate behavior.

Changes:

Extend Stack v5 toolbar menu item API with icon and iconTintColor* props, and plumb them through Fabric + view-command update paths.
Introduce native update/value wrappers (StackHeaderToolbarUpdate) and icon resolution infrastructure (IconResolver, icon source maps) to support async image loading and diffing.
Add a new Android SFT scenario for toolbar menu icons/tints and wire it into the stack-v5 scenario group.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/fabric/gamma/stack/StackHeaderConfigAndroidNativeComponent.ts	Adds native prop fields for menu item icon sources and processed tint colors.
src/components/tabs/screen/TabsScreen.android.tsx	Switches tabs icon parsing to use shared `parseIconToNativeProps`.
src/components/shared/index.ts	Adds shared `parseIconToNativeProps` helper (moved from tabs).
src/components/gamma/stack/header/StackHeaderConfig.android.types.ts	Extends public TS types/docs with menu item `icon` and `iconTintColor*` props.
src/components/gamma/stack/header/StackHeaderConfig.android.tsx	Converts toolbar menu item icon/tint props to native props; updates view-command option serialization.
apps/src/tests/single-feature-tests/tabs/test-tabs-item-title-ios/index.tsx	Formatting/line wrapping updates in an iOS SFT description component.
apps/src/tests/single-feature-tests/stack-v5/test-stack-toolbar-menu-icon-android/scenario.md	New manual test scenario documenting expected behavior for icon + tint props/commands.
apps/src/tests/single-feature-tests/stack-v5/test-stack-toolbar-menu-icon-android/scenario-descriptions.ts	Registers the new SFT scenario metadata.
apps/src/tests/single-feature-tests/stack-v5/test-stack-toolbar-menu-icon-android/index.tsx	Implements the interactive SFT screen for icon/tint prop + command flows.
apps/src/tests/single-feature-tests/stack-v5/index.ts	Adds the new scenario to the stack-v5 scenario group.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarUpdate.kt	Adds reset-vs-set wrapper to distinguish “reset default” from “no change”.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuItemOptions.kt	Extends menu item option updates to include icon + per-state tint updates.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuItemIconSource.kt	Adds a compact icon-source model (drawable name / image uri).
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuItemDefaults.kt	Adds defaults for icon/tint-related fields.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuItemConfig.kt	Extends config model with resolved icon drawable and tint colors.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/toolbar/StackHeaderToolbarMenuCoordinator.kt	Applies icon + tint updates to toolbar `MenuItem`s and resizes drawables to 24dp.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/StackHeaderCoordinator.kt	Updates coordinator call signature for menu item updates.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/config/StackHeaderConfigViewManager.kt	Parses new icon/tint props/options and stages icon sources for async resolution.
android/src/main/java/com/swmansion/rnscreens/gamma/stack/header/config/StackHeaderConfig.kt	Adds icon resolution for back button + toolbar items and atomic command application.
android/src/main/java/com/swmansion/rnscreens/gamma/helpers/IconResolver.kt	Adds reusable icon resolver for drawable-name vs image-uri sources with diffing.

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

Copilot

Pull request overview

Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.

kligarski · 2026-06-02T15:56:38Z

+        if (drawableIconResourceName == lastEmittedDrawableName &&
+            imageIconUri == lastEmittedImageUri
+        ) {
+            onResult(IconResolution.Unchanged)
+            return
+        }
+        lastEmittedDrawableName = drawableIconResourceName
+        lastEmittedImageUri = imageIconUri
+        when {
+            drawableIconResourceName != null ->
+                onResult(IconResolution.Resolved(getSystemDrawableResource(context, drawableIconResourceName)))
+            imageIconUri != null ->
+                loadImage(context, imageIconUri) { drawable ->
+                    if (imageIconUri == lastImageUri && lastDrawableName == null) {
+                        onResult(IconResolution.Resolved(drawable))
+                    }
+                }
+            else -> onResult(IconResolution.Resolved(null))


I don't think this is an issue now. Let me know if you think we should add it now.

at least we should note that down for further work, but this PR contains many changes, and as the initial version, I'm okay with merging it in current shape

kligarski · 2026-06-02T17:56:33Z

+        return drawable
+            .toBitmap(width = targetWidthPx, height = targetHeightPx)
+            .toDrawable(toolbar.resources)


This doesn't resize drawable resources correctly. It will be fixed in follow-up PR with resizing & tint for back button.

t0maboro · 2026-06-09T08:52:28Z

-// Helpers for view commands:
-// - not defined -> null (means "no update")
-// - null -> default (means "reset to default value")
+private fun ReadableMap.readColor(


wondering whether we shouldn't have a general helper file with all extensions rather than private parsers in the manager's source code (I did the same for TabsScreenManager) , unrelated to this PR, but do you think we should add a ticket to unify the approach or at least have a single file definitions for prop parsing?

t0maboro · 2026-06-09T09:05:07Z

+   * @summary Specifies the icon for the menu item.
+   *
+   * Supported values:
+   * - `{ type: 'imageSource', imageSource }`


nit: shouldn't we mention what type imageSource is?

t0maboro · 2026-06-09T09:06:05Z

+import { Image, type ImageResolvedAssetSource } from 'react-native';
+import type { PlatformIconAndroid } from '../../types';
+
+export function parseIconToNativeProps(icon: PlatformIconAndroid | undefined): {


nit: parseAndroidIconToNativeProps

t0maboro · 2026-06-09T09:10:15Z

+        if (drawableIconResourceName == lastEmittedDrawableName &&
+            imageIconUri == lastEmittedImageUri
+        ) {
+            onResult(IconResolution.Unchanged)
+            return
+        }
+        lastEmittedDrawableName = drawableIconResourceName
+        lastEmittedImageUri = imageIconUri
+        when {
+            drawableIconResourceName != null ->
+                onResult(IconResolution.Resolved(getSystemDrawableResource(context, drawableIconResourceName)))
+            imageIconUri != null ->
+                loadImage(context, imageIconUri) { drawable ->
+                    if (imageIconUri == lastImageUri && lastDrawableName == null) {
+                        onResult(IconResolution.Resolved(drawable))
+                    }
+                }
+            else -> onResult(IconResolution.Resolved(null))


at least we should note that down for further work, but this PR contains many changes, and as the initial version, I'm okay with merging it in current shape

kligarski changed the base branch from main to @kligarski/stack-v5-android-toolbar-menu-show-as-action May 27, 2026 14:33

Base automatically changed from @kligarski/stack-v5-android-toolbar-menu-show-as-action to main June 2, 2026 11:20

kligarski added 14 commits June 2, 2026 15:10

add icon props on JS layer, extract common fuction with Tabs

5236b8b

add SFT

8d51156

fix import

1e20452

add shared IconResolver, use it for back button icon

2dc95ae

parse initial toolbarMenuItems prop

0e2e7d7

handle icon via prop

d02b56e

fix bug with disappearing icons

1282876

scale toolbar menu item icon to 24 dp height

fae26af

extract tint list logic, update docs

3f0e6a9

handle view commands part 1

b427ccd

handle view commands part 2

b0f24af

format Android

db6fb53

fix restoring colors

ec11c6b

add scenario

8105b22

kligarski force-pushed the @kligarski/stack-v5-android-toolbar-menu-icon branch from 92b5302 to 8105b22 Compare June 2, 2026 14:48

kligarski requested a review from Copilot June 2, 2026 15:02

kligarski marked this pull request as ready for review June 2, 2026 15:02

Copilot started reviewing on behalf of kligarski June 2, 2026 15:02 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

kligarski added 3 commits June 2, 2026 17:17

minor suggestions from CR, restore unrelated test

77082be

reuse resolvers for both paths

6d8b112

fix type import

d25f86a

kligarski requested a review from Copilot June 2, 2026 15:41

Copilot started reviewing on behalf of kligarski June 2, 2026 15:41 View session

Copilot AI reviewed Jun 2, 2026

View reviewed changes

fix doc

2e47a32

kligarski requested review from kkafar and kmichalikk June 2, 2026 15:56

kligarski requested review from sgaczol and t0maboro June 2, 2026 15:56

kligarski commented Jun 2, 2026

View reviewed changes

t0maboro approved these changes Jun 9, 2026

View reviewed changes

Uh oh!

Conversation

kligarski commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Details

Changes

Before & after - visual documentation

Test plan

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

kligarski Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kligarski Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

t0maboro Jun 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kligarski commented May 27, 2026 •

edited

Loading