From a77fb110ad9a60469310ff9b2440c34535cdcc1c Mon Sep 17 00:00:00 2001
From: Krzysztof Ligarski <krzysztof.ligarski@swmansion.com>
Date: Mon, 27 Oct 2025 13:56:49 +0100
Subject: [PATCH 1/2] enforce rendering modes

---
 ios/RNSBarButtonItem.mm                        | 18 ++++++++++++++++--
 .../helpers/prepareHeaderBarButtonItems.ts     |  5 +++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/ios/RNSBarButtonItem.mm b/ios/RNSBarButtonItem.mm
index 199ffdea3b..a35d72871f 100644
--- a/ios/RNSBarButtonItem.mm
+++ b/ios/RNSBarButtonItem.mm
@@ -23,8 +23,16 @@ - (instancetype)initWithConfig:(NSDictionary<NSString *, id> *)dict
   self.title = dict[@"title"];
 
   NSDictionary *imageSourceObj = dict[@"imageSource"];
+  NSDictionary *templateSourceObj = dict[@"templateSource"];
+
+  RCTImageSource *imageSource = nil;
   if (imageSourceObj) {
-    RCTImageSource *imageSource = [RCTConvert RCTImageSource:imageSourceObj];
+    imageSource = [RCTConvert RCTImageSource:imageSourceObj];
+  } else if (templateSourceObj) {
+    imageSource = [RCTConvert RCTImageSource:templateSourceObj];
+  }
+
+  if (imageSource) {
     [imageLoader loadImageWithURLRequest:imageSource.request
         size:imageSource.size
         scale:imageSource.scale
@@ -36,7 +44,13 @@ - (instancetype)initWithConfig:(NSDictionary<NSString *, id> *)dict
         }
         completionBlock:^(NSError *_Nullable error, UIImage *_Nullable image) {
           dispatch_async(dispatch_get_main_queue(), ^{
-            self.image = image;
+            UIImage *imageWithRenderingMode = nil;
+            if (imageSourceObj) {
+              imageWithRenderingMode = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+            } else if (templateSourceObj) {
+              imageWithRenderingMode = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+            }
+            self.image = imageWithRenderingMode;
           });
         }];
   }
diff --git a/src/components/helpers/prepareHeaderBarButtonItems.ts b/src/components/helpers/prepareHeaderBarButtonItems.ts
index 96ca76c38f..aac7f68d12 100644
--- a/src/components/helpers/prepareHeaderBarButtonItems.ts
+++ b/src/components/helpers/prepareHeaderBarButtonItems.ts
@@ -38,11 +38,11 @@ export const prepareHeaderBarButtonItems = (
     if (item.type === 'spacing') {
       return item;
     }
-    let imageSource;
+    let imageSource, templateSource;
     if (item.icon?.type === 'imageSource') {
       imageSource = Image.resolveAssetSource(item.icon.imageSource);
     } else if (item.icon?.type === 'templateSource') {
-      imageSource = Image.resolveAssetSource(item.icon.templateSource);
+      templateSource = Image.resolveAssetSource(item.icon.templateSource);
     }
 
     const titleStyle = item.titleStyle
@@ -62,6 +62,7 @@ export const prepareHeaderBarButtonItems = (
     const processedItem = {
       ...item,
       imageSource,
+      templateSource,
       sfSymbolName: item.icon?.type === 'sfSymbol' ? item.icon.name : undefined,
       titleStyle,
       tintColor,

From 9c0447ce7cc670f15b226c2ba81ed6df7fc9f8ab Mon Sep 17 00:00:00 2001
From: Krzysztof Ligarski <krzysztof.ligarski@swmansion.com>
Date: Mon, 27 Oct 2025 13:58:34 +0100
Subject: [PATCH 2/2] use correct react-navigation API in test screen, disable
 icon tint for one test case

---
 apps/src/screens/BarButtonItems.tsx | 303 +++++++++++++++++-----------
 1 file changed, 180 insertions(+), 123 deletions(-)

diff --git a/apps/src/screens/BarButtonItems.tsx b/apps/src/screens/BarButtonItems.tsx
index 723bd4d2a5..95ec2de3dd 100644
--- a/apps/src/screens/BarButtonItems.tsx
+++ b/apps/src/screens/BarButtonItems.tsx
@@ -1,6 +1,13 @@
 // NOTE: The full native feature set (style, image, menu, etc.) is available, but the TS types in src/types.tsx need to be updated to match. This example uses only the currently typed props (title, icon, onPress, enabled).
 import React from 'react';
-import { View, Alert, Button, Text, Platform, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Alert,
+  Button,
+  Text,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { ScrollView } from 'react-native-gesture-handler';
 
@@ -23,18 +30,20 @@ const demoScreens = [
   { name: 'DoneStyleButtonDemo', title: 'Done Style Button' },
   { name: 'AdvancedMenuButtonDemo', title: 'Advanced Menu Button' },
   { name: 'ReactNodeButtonDemo', title: 'React Node Button' },
-  { name: "BackButtonVisibleDemo", title: "Back Button Visible" },
-  { name: "IdentifierExample", title: "Identifier Example" },
-  { name: "IdentifierExample2", title: "Identifier Example 2" },
-  { name: "ExessiveItemsExample", title: "Exessive Items Example" },
+  { name: 'BackButtonVisibleDemo', title: 'Back Button Visible' },
+  { name: 'IdentifierExample', title: 'Identifier Example' },
+  { name: 'IdentifierExample2', title: 'Identifier Example 2' },
+  { name: 'ExessiveItemsExample', title: 'Exessive Items Example' },
 ];
 
 const MainScreen = ({ navigation }: any) => (
   <ScrollView contentInsetAdjustmentBehavior="automatic" style={{ flex: 1 }}>
     <View style={{ padding: 8 }}>
-      <Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}>iOS only</Text>
+      <Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}>
+        iOS only
+      </Text>
     </View>
-    {demoScreens.map((screen) => (
+    {demoScreens.map(screen => (
       <Button
         key={screen.name}
         onPress={() => navigation.navigate(screen.name)}
@@ -74,9 +83,12 @@ const ExessiveItemsExample = DemoScreenContent;
 
 export default function BarButtonItemsExample() {
   return (
-
     // @ts-ignore
-    <Stack.Navigator screenOptions={{ headerTransparent: Platform.OS === 'ios' && parseInt(Platform.Version) >= 26 }}>
+    <Stack.Navigator
+      screenOptions={{
+        headerTransparent:
+          Platform.OS === 'ios' && parseInt(Platform.Version) >= 26,
+      }}>
       <Stack.Screen
         name="Main"
         component={MainScreen}
@@ -87,9 +99,9 @@ export default function BarButtonItemsExample() {
         component={PlainButtonDemo}
         options={{
           title: 'Plain Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Info',
               onPress: () => Alert.alert('Info pressed'),
             },
@@ -101,14 +113,16 @@ export default function BarButtonItemsExample() {
         component={IconButtonDemo}
         options={{
           title: 'Icon Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               icon: {
-                type: "imageSource",
-                imageSource: require('../../assets/variableIcons/icon_fill.png')
+                type: 'image',
+                source: require('../../assets/variableIcons/icon_fill.png'),
+                tinted: false,
               },
-              label: "Title",
+              tintColor: 'red',
+              label: 'Title',
               onPress: () => Alert.alert('Icon pressed'),
             },
           ],
@@ -119,14 +133,14 @@ export default function BarButtonItemsExample() {
         component={IconButtonDemo}
         options={{
           title: 'System image Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               icon: {
-                type: "sfSymbol",
-                name: "square.and.arrow.up"
+                type: 'sfSymbol',
+                name: 'square.and.arrow.up',
               },
-              label: "Title",
+              label: 'Title',
               onPress: () => Alert.alert('Icon pressed'),
             },
           ],
@@ -137,20 +151,20 @@ export default function BarButtonItemsExample() {
         component={MenuButtonDemo}
         options={{
           title: 'Menu Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "menu",
+              type: 'menu',
               label: 'Menu',
               menu: {
                 items: [
                   {
                     label: 'Option 1',
-                    type: "action",
+                    type: 'action',
                     onPress: () => Alert.alert('Option 1 pressed'),
                   },
                   {
                     label: 'Option 2',
-                    type: "action",
+                    type: 'action',
                     onPress: () => Alert.alert('Option 2 pressed'),
                   },
                 ],
@@ -164,16 +178,16 @@ export default function BarButtonItemsExample() {
         component={BadgeButtonDemo}
         options={{
           title: 'Badge Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Badge',
               badge: {
                 value: '3',
                 style: {
                   color: 'white',
                   backgroundColor: 'red',
-                }
+                },
               },
               onPress: () => Alert.alert('Badge pressed'),
             },
@@ -185,9 +199,9 @@ export default function BarButtonItemsExample() {
         component={DisabledButtonDemo}
         options={{
           title: 'Disabled Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Disabled',
               disabled: true,
               onPress: () => Alert.alert('Should not fire'),
@@ -200,9 +214,9 @@ export default function BarButtonItemsExample() {
         component={CustomColorButtonDemo}
         options={{
           title: 'Custom Color Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Purple',
               tintColor: 'purple',
               onPress: () => Alert.alert('Purple pressed'),
@@ -215,9 +229,9 @@ export default function BarButtonItemsExample() {
         component={ProminentStyleButtonDemo}
         options={{
           title: 'Prominent Style Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Prominent',
               variant: 'prominent',
               tintColor: 'green',
@@ -231,9 +245,9 @@ export default function BarButtonItemsExample() {
         component={TitleStyleButtonDemo}
         options={{
           title: 'Title Style Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Styled',
               labelStyle: {
                 fontFamily: 'Georgia',
@@ -251,34 +265,47 @@ export default function BarButtonItemsExample() {
         component={IconSharesBgButtonDemo}
         options={{
           title: 'Icon SharesBackground',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               onPress: () => Alert.alert('Icon with sharesBackground pressed'),
               sharesBackground: true,
             },
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               onPress: () => Alert.alert('Icon with sharesBackground pressed'),
               sharesBackground: true,
             },
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               onPress: () => Alert.alert('Icon with sharesBackground pressed'),
               sharesBackground: false,
             },
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               hidesSharedBackground: true,
-              onPress: () => Alert.alert('Icon with sharesBackground false pressed'),
+              onPress: () =>
+                Alert.alert('Icon with sharesBackground false pressed'),
             },
           ],
         }}
@@ -288,9 +315,9 @@ export default function BarButtonItemsExample() {
         component={TextButtonWithWidthDemo}
         options={{
           title: 'Text Button With Width',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Wide',
               width: 100,
               onPress: () => Alert.alert('Wide text button pressed'),
@@ -303,21 +330,27 @@ export default function BarButtonItemsExample() {
         component={IconButtonsWithSpacingDemo}
         options={{
           title: 'Icon Buttons With Spacing',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               onPress: () => Alert.alert('First icon pressed'),
             },
             {
-              type: "spacing",
+              type: 'spacing',
               spacing: 100,
             },
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_white.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_white.png'),
+              },
               onPress: () => Alert.alert('Second icon pressed'),
             },
           ],
@@ -329,16 +362,19 @@ export default function BarButtonItemsExample() {
         options={{
           title: 'Header Tint Color',
           headerTintColor: 'red',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Tinted',
               onPress: () => Alert.alert('Tinted pressed'),
             },
             {
-              type: "button",
-              label: "Title",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'Title',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               onPress: () => Alert.alert('Tinted icon pressed'),
             },
           ],
@@ -349,17 +385,20 @@ export default function BarButtonItemsExample() {
         component={DoneStyleButtonDemo}
         options={{
           title: 'Done Style Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Done',
               variant: 'done',
               onPress: () => Alert.alert('Done text pressed'),
             },
             {
-              type: "button",
-              label: "DoneIcon",
-              icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
+              type: 'button',
+              label: 'DoneIcon',
+              icon: {
+                type: 'image',
+                source: require('../../assets/search_black.png'),
+              },
               variant: 'done',
               onPress: () => Alert.alert('Done icon pressed'),
             },
@@ -371,17 +410,17 @@ export default function BarButtonItemsExample() {
         component={AdvancedMenuButtonDemo}
         options={{
           title: 'Advanced Menu Button',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "menu",
+              type: 'menu',
               label: 'Menu',
               menu: {
                 label: 'Context menu',
                 items: [
                   {
                     label: 'Action 1',
-                    icon: { type: "sfSymbol", name: 'star' },
-                    type: "action",
+                    icon: { type: 'sfSymbol', name: 'star' },
+                    type: 'action',
                     state: 'on',
                     destructive: true,
                     discoverabilityLabel: 'Favorite',
@@ -389,8 +428,8 @@ export default function BarButtonItemsExample() {
                   },
                   {
                     label: 'Action 2',
-                    icon: { type: "sfSymbol", name: 'square.and.arrow.up' },
-                    type: "action",
+                    icon: { type: 'sfSymbol', name: 'square.and.arrow.up' },
+                    type: 'action',
                     state: 'off',
                     disabled: true,
                     discoverabilityLabel: 'Disabled Action',
@@ -398,7 +437,7 @@ export default function BarButtonItemsExample() {
                   },
                   {
                     label: 'Submenu',
-                    icon: { type: "sfSymbol", name: "star" },
+                    icon: { type: 'sfSymbol', name: 'star' },
                     type: 'submenu',
                     items: [
                       {
@@ -423,107 +462,125 @@ export default function BarButtonItemsExample() {
           ],
         }}
       />
-      <Stack.Screen name="ReactNodeButtonDemo"
+      <Stack.Screen
+        name="ReactNodeButtonDemo"
         component={ReactNodeButtonDemo}
         options={{
           title: 'React Node Button',
           headerBackVisible: true,
-          headerRightItems: () => [
-            {
-              type: "custom",
-              element: <TouchableOpacity onPress={() => Alert.alert('React Node 1 pressed')}>
-                <Text style={{ color: 'blue' }}>React Node 1</Text>
-              </TouchableOpacity>,
-              hidesSharedBackground: true
+          unstable_headerRightItems: () => [
+            {
+              type: 'custom',
+              element: (
+                <TouchableOpacity
+                  onPress={() => Alert.alert('React Node 1 pressed')}>
+                  <Text style={{ color: 'blue' }}>React Node 1</Text>
+                </TouchableOpacity>
+              ),
+              hidesSharedBackground: true,
             },
             {
-              type: "button",
-              label: "Native",
+              type: 'button',
+              label: 'Native',
               onPress: () => Alert.alert('Native button pressed'),
               sharesBackground: true,
             },
             {
-              type: "custom",
-              element: <TouchableOpacity onPress={() => Alert.alert('React Node 2 pressed')}>
-                <Text style={{ color: 'red' }}>React Node 2</Text>
-              </TouchableOpacity>
+              type: 'custom',
+              element: (
+                <TouchableOpacity
+                  onPress={() => Alert.alert('React Node 2 pressed')}>
+                  <Text style={{ color: 'red' }}>React Node 2</Text>
+                </TouchableOpacity>
+              ),
             },
           ],
-        }} />
-      <Stack.Screen name="BackButtonVisibleDemo"
+        }}
+      />
+      <Stack.Screen
+        name="BackButtonVisibleDemo"
         component={BackButtonVisibleDemo}
         options={{
           title: 'Back Button Visible',
           headerBackVisible: true,
-          headerLeftItems: () => [
+          unstable_headerLeftItems: () => [
             {
-              type: "custom",
-              element: <TouchableOpacity onPress={() => Alert.alert('Left React Node')}>
-                <Text style={{ color: 'blue' }}>React Node</Text>
-              </TouchableOpacity>
+              type: 'custom',
+              element: (
+                <TouchableOpacity
+                  onPress={() => Alert.alert('Left React Node')}>
+                  <Text style={{ color: 'blue' }}>React Node</Text>
+                </TouchableOpacity>
+              ),
             },
             {
-              type: "button",
-              label: "Native",
+              type: 'button',
+              label: 'Native',
               onPress: () => Alert.alert('Native button pressed'),
             },
           ],
-        }} />
-      <Stack.Screen name="IdentifierExample"
+        }}
+      />
+      <Stack.Screen
+        name="IdentifierExample"
         component={IdentifierExample}
         options={({ navigation }) => ({
           title: 'Identifier Example',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Button',
               onPress: () => {
                 navigation.navigate('IdentifierExample2');
               },
-              style: "prominent"
+              style: 'prominent',
             },
           ],
-        })} />
-      <Stack.Screen name="IdentifierExample2"
+        })}
+      />
+      <Stack.Screen
+        name="IdentifierExample2"
         component={IdentifierExample2}
         options={{
           title: 'Identifier Example 2',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
+              type: 'button',
               label: 'Btn',
               onPress: () => Alert.alert('Button 1 pressed'),
             },
           ],
-        }} />
-      <Stack.Screen name='ExessiveItemsExample'
+        }}
+      />
+      <Stack.Screen
+        name="ExessiveItemsExample"
         component={ExessiveItemsExample}
         options={{
           title: 'Exessive Items Example',
-          headerRightItems: () => [
+          unstable_headerRightItems: () => [
             {
-              type: "button",
-              label: "Button 1",
+              type: 'button',
+              label: 'Button 1',
               onPress: () => Alert.alert('Button 1 pressed'),
             },
             {
-              type: "button",
-              label: "Button 2",
+              type: 'button',
+              label: 'Button 2',
               onPress: () => Alert.alert('Button 2 pressed'),
             },
             {
-              type: "button",
-              label: "Button 3",
+              type: 'button',
+              label: 'Button 3',
               onPress: () => Alert.alert('Button 3 pressed'),
             },
             {
-              type: "button",
-              label: "Button 4",
+              type: 'button',
+              label: 'Button 4',
               onPress: () => Alert.alert('Button 4 pressed'),
             },
-          ]
-        }} />
-
+          ],
+        }}
+      />
     </Stack.Navigator>
   );
 }