feat(Stack v5, iOS): Support icon loading in header items and menu

apps/src/tests/single-feature-tests/stack-v5/index.ts

@@ -9,6 +9,7 @@ import TestStackSimpleNav from './test-stack-simple-nav';
 import TestStackSubviewsAndroid from './test-stack-subviews-android';
 import TestStackSubviewsIOS from './test-stack-subviews-ios';
 import TestStackHeaderMenuIOS from './test-stack-header-menu-ios';
+import TestStackHeaderIconIOS from './test-stack-header-icon-ios';
 import TestStackBackButton from './test-stack-back-button-android';
 import TestStackToolbarMenuCommands from './test-stack-toolbar-menu-commands-android';
 import TestStackToolbarMenuDisabled from './test-stack-toolbar-menu-disabled-android';
@@ -29,6 +30,7 @@ export { default as TestStackSimpleNav } from './test-stack-simple-nav';
 export { default as TestStackSubviewsAndroid } from './test-stack-subviews-android';
 export { default as TestStackSubviewsIOS } from './test-stack-subviews-ios';
 export { default as TestStackHeaderMenuIOS } from './test-stack-header-menu-ios';
+export { default as TestStackHeaderIconIOS } from './test-stack-header-icon-ios';
 export { default as TestStackBackButton } from './test-stack-back-button-android';
 export { default as TestStackToolbarMenuCommands } from './test-stack-toolbar-menu-commands-android';
 export { default as TestStackToolbarMenuDisabled } from './test-stack-toolbar-menu-disabled-android';
@@ -46,6 +48,7 @@ const scenarios = {
   TestStackSubviewsAndroid,
   TestStackSubviewsIOS,
   TestStackHeaderMenuIOS,
+  TestStackHeaderIconIOS,
   TestStackHeaderSubviewOnPress,
   TestStackHeaderSelectiveUpdates,
   TestStackBackButton,

apps/src/tests/single-feature-tests/stack-v5/test-stack-header-icon-ios/index.tsx

@@ -0,0 +1,246 @@
+import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { createScenario } from '@apps/tests/shared/helpers';
+import {
+  StackContainer,
+  useStackNavigationContext,
+} from '@apps/shared/gamma/containers/stack';
+import { StackHeaderConfigProps } from 'react-native-screens/components/gamma/stack/header';
+import { Button, ScrollView, Text, View, StyleSheet } from 'react-native';
+import { scenarioDescription } from './scenario-description';
+import { ToastProvider, useToast } from '@apps/shared';
+import { Colors } from '@apps/shared/styling';
+import { type PlatformIconIOS } from 'react-native-screens';
+
+type IconVariant = 'sfSymbol' | 'xcasset' | 'imageSource' | 'templateSource';
+
+const ICON_VARIANTS: IconVariant[] = [
+  'sfSymbol',
+  'xcasset',
+  'imageSource',
+  'templateSource',
+];
+
+function iconForVariant(variant: IconVariant): PlatformIconIOS {
+  switch (variant) {
+    case 'sfSymbol':
+      return { type: 'sfSymbol', name: 'star.fill' };
+    case 'xcasset':
+      return { type: 'xcasset', name: 'custom-icon-fill' };
+    case 'imageSource':
+      return {
+        type: 'imageSource',
+        imageSource: require('@assets/search_black.png'),
+      };
+    case 'templateSource':
+      return {
+        type: 'templateSource',
+        templateSource: require('@assets/variableIcons/icon.png'),
+      };
+  }
+}
+
+function nextVariant(current: IconVariant): IconVariant {
+  const idx = ICON_VARIANTS.indexOf(current);
+  return ICON_VARIANTS[(idx + 1) % ICON_VARIANTS.length]!;
+}
+
+function buildHeaderConfig(
+  itemIconVariant: IconVariant,
+  menuIconVariant: IconVariant,
+  cycleMenuIcons: () => void,
+  showToast: (text: string) => void,
+): StackHeaderConfigProps {
+  const itemIcon = iconForVariant(itemIconVariant);
+  const menuIcon = iconForVariant(menuIconVariant);
+
+  return {
+    title: 'Header Icons',
+    ios: {
+      trailingItems: [
+        {
+          type: 'item',
+          id: 'icon-item',
+          title: 'Actions',
+          icon: itemIcon,
+          onPress: () => showToast('Item pressed'),
+          menu: {
+            type: 'menu',
+            id: 'main-menu',
+            onSelectionChange: selection =>
+              showToast('Selected: ' + selection.join(', ')),
+            children: [
+              {
+                id: 'cycle-action',
+                type: 'menuItem',
+                itemType: 'action',
+                title: `Cycle icons (${menuIconVariant})`,
+                keepsMenuPresented: true,
+                onPress: cycleMenuIcons,
+              },
+              {
+                id: 'toggle-1',
+                type: 'menuItem',
+                itemType: 'toggle',
+                title: 'Toggle 1',
+                icon: menuIcon,
+                keepsMenuPresented: true,
+              },
+              {
+                id: 'toggle-2',
+                type: 'menuItem',
+                itemType: 'toggle',
+                title: 'Toggle 2',
+                icon: menuIcon,
+                keepsMenuPresented: true,
+              },
+              {
+                id: 'toggle-3',
+                type: 'menuItem',
+                itemType: 'toggle',
+                title: 'Toggle 3',
+                icon: menuIcon,
+                keepsMenuPresented: true,
+              },
+              {
+                id: 'submenu',
+                type: 'menu',
+                title: 'Submenu',
+                icon: menuIcon,
+                children: [
+                  {
+                    id: 'sub-toggle-1',
+                    type: 'menuItem',
+                    itemType: 'toggle',
+                    title: 'Sub Toggle 1',
+                    icon: menuIcon,
+                    keepsMenuPresented: true,
+                  },
+                  {
+                    id: 'sub-toggle-2',
+                    type: 'menuItem',
+                    itemType: 'toggle',
+                    title: 'Sub Toggle 2',
+                    icon: menuIcon,
+                    keepsMenuPresented: true,
+                  },
+                  {
+                    id: 'sub-toggle-3',
+                    type: 'menuItem',
+                    itemType: 'toggle',
+                    title: 'Sub Toggle 3',
+                    icon: menuIcon,
+                    keepsMenuPresented: true,
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  };
+}
+
+function ConfigScreen() {
+  const navigation = useStackNavigationContext();
+  const toast = useToast();
+
+  const [itemIconVariant, setItemIconVariant] =
+    useState<IconVariant>('sfSymbol');
+  const [menuIconVariant, setMenuIconVariant] =
+    useState<IconVariant>('sfSymbol');
+
+  const showToast = useCallback(
+    (text: string) => {
+      toast.push({ backgroundColor: Colors.GreenDark120, message: text });
+    },
+    [toast],
+  );
+
+  const cycleMenuIcons = useCallback(() => {
+    setMenuIconVariant(v => nextVariant(v));
+  }, []);
+
+  const { setRouteOptions, routeKey } = navigation;
+  const headerConfig = useMemo(
+    () =>
+      buildHeaderConfig(
+        itemIconVariant,
+        menuIconVariant,
+        cycleMenuIcons,
+        showToast,
+      ),
+    [itemIconVariant, menuIconVariant, cycleMenuIcons, showToast],
+  );
+
+  useLayoutEffect(() => {
+    setRouteOptions(routeKey, {
+      headerConfig,
+    });
+  }, [headerConfig, setRouteOptions, routeKey]);
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      style={styles.container}>
+      <View style={styles.section}>
+        <Text style={styles.label}>Bar Button Item Icon</Text>
+        <Text style={styles.current}>{itemIconVariant}</Text>
+        <Button
+          title="Cycle item icon"
+          onPress={() => setItemIconVariant(nextVariant)}
+        />
+      </View>
+      <View style={styles.section}>
+        <Text style={styles.label}>Menu Toggles + Submenu Icon</Text>
+        <Text style={styles.current}>{menuIconVariant}</Text>
+        <Button title="Cycle menu icons" onPress={cycleMenuIcons} />
+      </View>
+      <View style={styles.section}>
+        <Button
+          title="Push another screen"
+          onPress={() => navigation.push('Home')}
+        />
+      </View>
+    </ScrollView>
+  );
+}
+
+function TestStackHeaderIconIOS() {
+  return (
+    <ToastProvider>
+      <StackContainer
+        routeConfigs={[
+          {
+            name: 'Home',
+            Component: ConfigScreen,
+            options: {},
+          },
+        ]}
+      />
+    </ToastProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  section: {
+    padding: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ccc',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  current: {
+    fontSize: 16,
+    marginBottom: 8,
+    color: Colors.GreenDark120,
+  },
+});
+
+export default createScenario(TestStackHeaderIconIOS, scenarioDescription);

apps/src/tests/single-feature-tests/stack-v5/test-stack-header-icon-ios/scenario-description.ts

@@ -0,0 +1,11 @@
+import type { ScenarioDescription } from '@apps/tests/shared/helpers';
+
+export const scenarioDescription: ScenarioDescription = {
+  name: 'Stack Header Icon (iOS)',
+  key: 'test-stack-header-icon-ios',
+  details:
+    'Tests header item icons: SF Symbol, xcasset, imageSource, templateSource on bar button items and menu items, with runtime updates.',
+  platforms: ['ios'],
+  e2eCoverage: 'tbd',
+  smokeTest: false,
+};

apps/src/tests/single-feature-tests/stack-v5/test-stack-header-icon-ios/scenario.md

@@ -0,0 +1,39 @@
+# Test Scenario: Stack Header Icons (iOS)
+
+## Details
+
+**Description:** This test focuses on handling icons and images in header with runtime updates.
+
+**OS test creation version:** iOS 26.4, iPadOS 26.4
+
+## E2E test
+
+TBD
+
+## Prerequisites
+
+- iOS / iPadOS simulator
+
+## Note (Optional)
+
+- Crossfade doesn't work when changing between async images.
+- Changing items in menu while it is presented (default for this test) results in visible layout shifts.
+This is native behavior, we can't do much here
+
+## Steps on iPhone
+
+1. Inspect the header right item
+  - [ ] A "star" sfSymbol is visible
+2. Repeatedly click on "Cycle item icon"
+  - [ ] First, "star" changes to filled "3"
+  - [ ] Second, filled "3" changes to search icon
+  - [ ] Third, search icon changes to "3"
+  - [ ] Lastly, "3" changes again to "star"
+3. Inspect the menu
+  - [ ] Long press on the header item shows the menu
+  - [ ] both menu items and submenu items have "star" visible on the left side
+4. Repeatedly click on "Cycle icons" action inside the menu
+  - [ ] First, "star" changes to filled "3"
+  - [ ] Second, filled "3" changes to search icon
+  - [ ] Third, search icon changes to "3"
+  - [ ] Lastly, "3" changes again to "star"

common/cpp/react/renderer/components/rnscreens/RNSStackHeaderConfigComponentDescriptor.h

@@ -35,6 +35,13 @@ class RNSStackHeaderConfigComponentDescriptor final
       layoutableShadowNode.setSize(
           Size{stateData.frameSize.width, stateData.frameSize.height});
     }
+
+#if !defined(ANDROID)
+    std::weak_ptr<void> imageLoader =
+        contextContainer_->at<std::shared_ptr<void>>("RCTImageLoader");
+    configShadowNode.setImageLoader(imageLoader);
+#endif // !defined(ANDROID)
+
     ConcreteComponentDescriptor::adopt(shadowNode);
   }
 };

common/cpp/react/renderer/components/rnscreens/RNSStackHeaderConfigShadowNode.cpp

@@ -29,5 +29,17 @@ void RNSStackHeaderConfigShadowNode::applyFrameCorrections() {
   layoutMetrics_.frame.origin.x = stateData.contentOffset.x;
   layoutMetrics_.frame.origin.y = stateData.contentOffset.y;
 }
+
+void RNSStackHeaderConfigShadowNode::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  getStateDataMutable().setImageLoader(imageLoader);
+}
+
+RNSStackHeaderConfigShadowNode::StateData &
+RNSStackHeaderConfigShadowNode::getStateDataMutable() {
+  ensureUnsealed();
+  return const_cast<RNSStackHeaderConfigShadowNode::StateData &>(
+      getStateData());
+}
 #endif // ANDROID
 } // namespace facebook::react

common/cpp/react/renderer/components/rnscreens/RNSStackHeaderConfigShadowNode.h

@@ -31,8 +31,11 @@ class JSI_EXPORT RNSStackHeaderConfigShadowNode final
 #else // ANDROID
   void layout(LayoutContext layoutContext) override;
 
+  void setImageLoader(std::weak_ptr<void> imageLoader);
+
  private:
   void applyFrameCorrections();
+  StateData &getStateDataMutable();
 #endif // ANDROID
 };
 

common/cpp/react/renderer/components/rnscreens/RNSStackHeaderConfigState.cpp

@@ -2,6 +2,15 @@
 
 namespace facebook::react {
 
+void RNSStackHeaderConfigState::setImageLoader(
+    std::weak_ptr<void> imageLoader) {
+  imageLoader_ = imageLoader;
+}
+
+std::weak_ptr<void> RNSStackHeaderConfigState::getImageLoader() const noexcept {
+  return imageLoader_;
+}
+
 #ifdef ANDROID
 folly::dynamic RNSStackHeaderConfigState::getDynamic() const {
   return folly::dynamic::object("frameWidth", frameSize.width)(