Add React-FabricImage pod to solve Circulare dependency between Fabri…

…c image component and ImageManager (#37276)

Summary:
Pull Request resolved: #37276

When enabling dynamic linking, we had a circulr dependency between Fabric and the Image Manager.

Specifically, Image Manager depends on Fabric, but the Image component, in Fabric, is using some implementation specific files from the Image Manager that surface only when enabling the dynamic linking.

Xcode fails to find those symbols unless the dependencies are explicitly added to the podspec.

This change is technically breaking, but we tried to minimize the breakage by adding the new pod in all the required search paths.

## Changelog
[iOS][Breaking] - Add React-FabricImage pod.

Reviewed By: NickGerleman

Differential Revision: D45517278

fbshipit-source-id: 994aa8c40301c68bf9fecdf46de7833028f0d3c2

packages/react-native/React/React-RCTFabric.podspec

@@ -35,6 +35,7 @@ header_search_paths = [
 
 if ENV['USE_FRAMEWORKS']
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\""
+  header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/textlayoutmanager/platform/ios\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/components/textinput/iostextinput\""
   header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\""
@@ -59,7 +60,7 @@ Pod::Spec.new do |s|
   s.compiler_flags         = folly_compiler_flags + ' ' + boost_compiler_flags
   s.header_dir             = "React"
   s.module_name            = "RCTFabric"
-  s.framework              = "JavaScriptCore"
+  s.framework              = ["JavaScriptCore", "MobileCoreServices"]
   s.pod_target_xcconfig    = {
     "HEADER_SEARCH_PATHS" => header_search_paths,
     "OTHER_CFLAGS" => "$(inherited) -DRN_FABRIC_ENABLED" + " " + folly_flags,
@@ -72,7 +73,18 @@ Pod::Spec.new do |s|
   s.dependency "React-Fabric", version
   s.dependency "React-RCTImage", version
   s.dependency "React-ImageManager"
+  s.dependency "React-graphics"
   s.dependency "RCT-Folly/Fabric", folly_version
+  s.dependency "glog"
+  s.dependency "Yoga"
+  s.dependency "React-RCTText"
+  s.dependency "React-FabricImage"
+
+  if ENV["USE_HERMES"] == nil || ENV["USE_HERMES"] == "1"
+    s.dependency "hermes-engine"
+  else
+    s.dependency "React-jsi"
+  end
 
   s.test_spec 'Tests' do |test_spec|
     test_spec.source_files = "Tests/**/*.{mm}"

packages/react-native/ReactCommon/React-Fabric.podspec

@@ -47,6 +47,16 @@ Pod::Spec.new do |s|
   s.dependency "RCTTypeSafety", version
   s.dependency "ReactCommon/turbomodule/core", version
   s.dependency "React-jsi", version
+  s.dependency "React-logger"
+  s.dependency "glog"
+  s.dependency "DoubleConversion"
+  s.dependency "React-Core"
+
+  if ENV["USE_HERMES"] == nil || ENV["USE_HERMES"] == "1"
+    s.dependency "hermes-engine"
+  else
+    s.dependency "React-jsi"
+  end
 
   s.subspec "animations" do |ss|
     ss.dependency             folly_dep_name, folly_version
@@ -83,11 +93,11 @@ Pod::Spec.new do |s|
       "\"$(PODS_TARGET_SRCROOT)/ReactCommon\"",
       "\"$(PODS_ROOT)/RCT-Folly\"",
       "\"$(PODS_ROOT)/Headers/Private/Yoga\"",
+      "\"$(PODS_TARGET_SRCROOT)\"",
     ]
 
     if ENV['USE_FRAMEWORKS']
       header_search_path = header_search_path + [
-        "\"$(PODS_TARGET_SRCROOT)\"",
         "\"$(PODS_ROOT)/DoubleConversion\"",
         "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-Codegen/React_Codegen.framework/Headers\"",
         "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\"",
@@ -121,13 +131,6 @@ Pod::Spec.new do |s|
   end
 
   s.subspec "components" do |ss|
-    ss.subspec "image" do |sss|
-      sss.dependency             folly_dep_name, folly_version
-      sss.compiler_flags       = folly_compiler_flags
-      sss.source_files         = "react/renderer/components/image/**/*.{m,mm,cpp,h}"
-      sss.exclude_files        = "react/renderer/components/image/tests"
-      sss.header_dir           = "react/renderer/components/image"
-    end
 
     ss.subspec "inputaccessory" do |sss|
       sss.dependency             folly_dep_name, folly_version

packages/react-native/ReactCommon/React-FabricImage.podspec

@@ -0,0 +1,87 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "package.json")))
+version = package['version']
+
+source = { :git => 'https://github.com/facebook/react-native.git' }
+if version == '1000.0.0'
+  # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
+else
+  source[:tag] = "v#{version}"
+end
+
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-gnu-zero-variadic-macro-arguments'
+folly_version = '2021.07.22.00'
+folly_dep_name = 'RCT-Folly/Fabric'
+boost_compiler_flags = '-Wno-documentation'
+react_native_path = ".."
+
+header_search_path = [
+  "\"$(PODS_ROOT)/boost\"",
+  "\"$(PODS_TARGET_SRCROOT)/ReactCommon\"",
+  "\"$(PODS_ROOT)/RCT-Folly\"",
+  "\"$(PODS_ROOT)/Headers/Private/Yoga\"",
+]
+
+if ENV['USE_FRAMEWORKS']
+  header_search_path = header_search_path + [
+    "\"$(PODS_TARGET_SRCROOT)\"",
+    "\"$(PODS_ROOT)/DoubleConversion\"",
+    "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-Codegen/React_Codegen.framework/Headers\"",
+    "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\"",
+    "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\"",
+    "\"$(PODS_TARGET_SRCROOT)/react/renderer/textlayoutmanager/platform/ios\"",
+    "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/textinput/iostextinput\"",
+    "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\""
+  ]
+end
+
+Pod::Spec.new do |s|
+  s.name                   = "React-FabricImage"
+  s.version                = version
+  s.summary                = "Image Component for Fabric for React Native."
+  s.homepage               = "https://reactnative.dev/"
+  s.license                = package["license"]
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
+  s.platforms              = { :ios => min_ios_version_supported }
+  s.source                 = source
+  s.source_files         = "react/renderer/components/image/**/*.{m,mm,cpp,h}"
+  s.exclude_files        = "react/renderer/components/image/tests"
+  s.header_dir           = "react/renderer/components/image"
+  s.compiler_flags       = folly_compiler_flags
+  s.pod_target_xcconfig = { "USE_HEADERMAP" => "YES",
+                            "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
+                            "HEADER_SEARCH_PATHS" => header_search_path.join(" ")
+                          }
+
+  if ENV['USE_FRAMEWORKS']
+    s.header_mappings_dir     = './'
+    s.module_name             = 'React_FabricImage'
+  end
+
+  s.dependency folly_dep_name, folly_version
+  s.dependency "React-graphics", version
+  s.dependency "React-jsiexecutor", version
+  s.dependency "RCTRequired", version
+  s.dependency "RCTTypeSafety", version
+  s.dependency "ReactCommon/turbomodule/core", version
+  s.dependency "React-jsi", version
+  s.dependency "React-logger"
+  s.dependency "glog"
+  s.dependency "DoubleConversion"
+  s.dependency "React-ImageManager"
+  s.dependency "React-Fabric"
+  s.dependency "Yoga"
+
+  if ENV["USE_HERMES"] == nil || ENV["USE_HERMES"] == "1"
+    s.dependency "hermes-engine"
+  else
+    s.dependency "React-jsi"
+  end
+end

packages/react-native/ReactCommon/react/nativemodule/samples/ReactCommon-Samples.podspec

@@ -55,5 +55,7 @@ Pod::Spec.new do |s|
 
   if using_hermes
     s.dependency "hermes-engine"
+  else
+    s.dependency "React-jsi"
   end
 end

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/React-ImageManager.podspec

@@ -61,4 +61,5 @@ Pod::Spec.new do |s|
   s.dependency "React-Fabric"
   s.dependency "React-Core/Default"
   s.dependency "React-RCTImage"
+  s.dependency "glog"
 end

packages/react-native/scripts/cocoapods/__tests__/codegen_utils-test.rb

@@ -562,7 +562,8 @@ def get_podspec_no_fabric_no_script
             "ReactCommon/turbomodule/bridging": [],
             "ReactCommon/turbomodule/core": [],
             "hermes-engine": [],
-            'React-NativeModulesApple': [],
+            "React-NativeModulesApple": [],
+            "glog": []
           }
         }
     end
@@ -586,7 +587,7 @@ def get_podspec_when_use_frameworks
         specs = get_podspec_no_fabric_no_script()
 
         specs["pod_target_xcconfig"]["FRAMEWORK_SEARCH_PATHS"].concat([])
-        specs["pod_target_xcconfig"]["HEADER_SEARCH_PATHS"].concat(" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-NativeModulesApple/React_NativeModulesApple.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-RCTFabric/RCTFabric.framework/Headers\"")
+        specs["pod_target_xcconfig"]["HEADER_SEARCH_PATHS"].concat(" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_TARGET_SRCROOT)\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-FabricImage/React_FabricImage.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-NativeModulesApple/React_NativeModulesApple.framework/Headers\" \"$(PODS_CONFIGURATION_BUILD_DIR)/React-RCTFabric/RCTFabric.framework/Headers\"")
 
         specs[:dependencies].merge!({
             'React-graphics': [],

packages/react-native/scripts/cocoapods/__tests__/fabric-test.rb

@@ -46,9 +46,10 @@ def test_setupFabric_whenNewArchEnabled_installPods
     end
 
     def check_installed_pods(prefix)
-        assert_equal($podInvocationCount, 5)
+        assert_equal(6, $podInvocationCount)
 
         check_pod("React-Fabric", :path => "#{prefix}/ReactCommon")
+        check_pod("React-FabricImage", :path => "#{prefix}/ReactCommon")
         check_pod("React-graphics", :path => "#{prefix}/ReactCommon/react/renderer/graphics")
         check_pod("React-RCTFabric", :path => "#{prefix}/React", :modular_headers => true)
         check_pod("RCT-Folly/Fabric", :podspec => "#{prefix}/third-party-podspecs/RCT-Folly.podspec")

packages/react-native/scripts/cocoapods/__tests__/new_architecture-test.rb

@@ -129,7 +129,7 @@ def test_installModulesDependencies_whenNewArchEnabledAndNewArchAndNoSearchPaths
 
         # Assert
         assert_equal(spec.compiler_flags, NewArchitectureHelper.folly_compiler_flags)
-        assert_equal(spec.pod_target_xcconfig["HEADER_SEARCH_PATHS"], "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/Headers/Private/Yoga\" \"$(PODS_ROOT)/DoubleConversion\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\"")
+        assert_equal(spec.pod_target_xcconfig["HEADER_SEARCH_PATHS"], "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/Headers/Private/Yoga\" \"$(PODS_ROOT)/DoubleConversion\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\"")
         assert_equal(spec.pod_target_xcconfig["CLANG_CXX_LANGUAGE_STANDARD"], "c++17")
         assert_equal(spec.pod_target_xcconfig["OTHER_CPLUSPLUSFLAGS"], "$(inherited) -DRCT_NEW_ARCH_ENABLED=1 -DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1")
         assert_equal(
@@ -143,7 +143,8 @@ def test_installModulesDependencies_whenNewArchEnabledAndNewArchAndNoSearchPaths
                 { :dependency_name => "RCTTypeSafety" },
                 { :dependency_name => "ReactCommon/turbomodule/bridging" },
                 { :dependency_name => "ReactCommon/turbomodule/core" },
-                { :dependency_name => "React-NativeModulesApple" }
+                { :dependency_name => "React-NativeModulesApple" },
+                { :dependency_name => "hermes-engine" }
         ])
     end
 
@@ -161,7 +162,7 @@ def test_installModulesDependencies_whenNewArchDisabledAndSearchPathsAndCompiler
 
         # Assert
         assert_equal(spec.compiler_flags, "-Wno-nullability-completeness #{NewArchitectureHelper.folly_compiler_flags}")
-        assert_equal(spec.pod_target_xcconfig["HEADER_SEARCH_PATHS"], "#{other_flags} \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/Headers/Private/Yoga\" \"$(PODS_ROOT)/DoubleConversion\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\"")
+        assert_equal(spec.pod_target_xcconfig["HEADER_SEARCH_PATHS"], "#{other_flags} \"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/Headers/Private/Yoga\" \"$(PODS_ROOT)/DoubleConversion\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\"")
         assert_equal(spec.pod_target_xcconfig["CLANG_CXX_LANGUAGE_STANDARD"], "c++17")
         assert_equal(
             spec.dependencies,

packages/react-native/scripts/cocoapods/__tests__/utils-test.rb

@@ -577,7 +577,7 @@ def test_updateSearchPaths_whenUseFrameworks_addsSearchPaths
             if pod_name == "SecondTarget"
                 target_installation_result.native_target.build_configurations.each do |config|
                     received_search_path = config.build_settings["HEADER_SEARCH_PATHS"]
-                    expected_Search_path = "$(inherited) \"$(PODS_ROOT)/RCT-Folly\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/boost\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Codegen/React_Codegen.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\""
+                    expected_Search_path = "$(inherited) \"$(PODS_ROOT)/RCT-Folly\" \"$(PODS_ROOT)/DoubleConversion\" \"$(PODS_ROOT)/boost\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Codegen/React_Codegen.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Graphics/React_graphics.framework/Headers\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\" \"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers/react/renderer/imagemanager/platform/ios\""
                     assert_equal(received_search_path, expected_Search_path)
                 end
             else

packages/react-native/scripts/cocoapods/codegen_utils.rb

@@ -92,6 +92,7 @@ def get_react_codegen_spec(package_json_file, folly_version: '2021.07.22.00', fa
             "\"$(PODS_ROOT)/DoubleConversion\"",
             "\"$(PODS_TARGET_SRCROOT)\"",
             "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-Fabric/React_Fabric.framework/Headers\"",
+            "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-FabricImage/React_FabricImage.framework/Headers\"",
             "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers\"",
             "\"$(PODS_CONFIGURATION_BUILD_DIR)/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\"",
             "\"$(PODS_CONFIGURATION_BUILD_DIR)/ReactCommon/ReactCommon.framework/Headers\"",
@@ -129,6 +130,7 @@ def get_react_codegen_spec(package_json_file, folly_version: '2021.07.22.00', fa
             "ReactCommon/turbomodule/bridging": [],
             "ReactCommon/turbomodule/core": [],
             "React-NativeModulesApple": [],
+            "glog": [],
           }
         }
 

packages/react-native/scripts/cocoapods/fabric.rb

@@ -13,4 +13,5 @@ def setup_fabric!(react_native_path: "../node_modules/react-native", new_arch_en
     pod 'React-RCTFabric', :path => "#{react_native_path}/React", :modular_headers => true
     pod 'React-ImageManager', :path => "#{react_native_path}/ReactCommon/react/renderer/imagemanager/platform/ios"
     pod 'RCT-Folly/Fabric', :podspec => "#{react_native_path}/third-party-podspecs/RCT-Folly.podspec"
+    pod 'React-FabricImage', :path => "#{react_native_path}/ReactCommon"
 end

packages/react-native/scripts/cocoapods/new_architecture.rb

@@ -93,6 +93,7 @@ def self.install_modules_dependencies(spec, new_arch_enabled, folly_version)
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers\""
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios\""
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-Fabric/React_Fabric.framework/Headers\""
+            header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-FabricImage/React_FabricImage.framework/Headers\""
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers\""
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/ReactCommon/ReactCommon.framework/Headers/react/nativemodule/core\""
             header_search_paths << "\"${PODS_CONFIGURATION_BUILD_DIR}/React-RCTFabric/RCTFabric.framework/Headers\""
@@ -118,6 +119,12 @@ def self.install_modules_dependencies(spec, new_arch_enabled, folly_version)
             spec.dependency "ReactCommon/turbomodule/bridging"
             spec.dependency "ReactCommon/turbomodule/core"
             spec.dependency "React-NativeModulesApple"
+
+            if ENV["USE_HERMES"] == nil || ENV["USE_HERMES"] == "1"
+                spec.dependency "hermes-engine"
+            else
+                spec.dependency "React-jsi"
+            end
         end
 
         spec.pod_target_xcconfig = current_config