[Fabric] Add ImageRequestParams for Image Component (#14494)

Author: anupriya13

change/react-native-windows-17b0a7f2-3a73-40cf-9fb1-2a99ef16d226.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add ImageRequestParams",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ImageManager.cpp

@@ -24,11 +24,11 @@ ImageRequest ImageManager::requestImage(const ImageSource &imageSource, SurfaceI
 
 ImageRequest ImageManager::requestImage(
     const ImageSource &imageSource,
-    SurfaceId /*surfaceId*/,
-    const ImageRequestParams & /*imageRequestParams*/,
-    Tag /*tag*/) const {
-  // Not implemented.
-  return {imageSource, nullptr, {}};
+    SurfaceId surfaceId,
+    const ImageRequestParams &imageRequestParams,
+    Tag tag) const {
+  return ((Microsoft::ReactNative::WindowsImageManager *)self_)
+      ->requestImage(imageSource, surfaceId, imageRequestParams, tag);
 }
 
 } // namespace react

vnext/Microsoft.ReactNative/Fabric/ImageRequestParams.cpp

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <react/renderer/graphics/Float.h>
+
+namespace facebook::react {
+
+class ImageRequestParams {
+ public:
+  ImageRequestParams() = default;
+  explicit ImageRequestParams(Float blurRadius) : blurRadius(blurRadius) {}
+
+  Float blurRadius{};
+
+  bool operator==(const ImageRequestParams &rhs) const {
+    return this->blurRadius == rhs.blurRadius;
+  }
+
+  bool operator!=(const ImageRequestParams &rhs) const {
+    return !(*this == rhs);
+  }
+};
+
+} // namespace facebook::react

vnext/Microsoft.ReactNative/Fabric/WindowsImageManager.cpp

@@ -205,6 +205,14 @@ facebook::react::ImageRequest WindowsImageManager::requestImage(
   return imageRequest;
 }
 
+facebook::react::ImageRequest WindowsImageManager::requestImage(
+    const facebook::react::ImageSource &imageSource,
+    facebook::react::SurfaceId surfaceId,
+    const facebook::react::ImageRequestParams & /* imageRequestParams */,
+    facebook::react::Tag /* tag */) const {
+  return requestImage(imageSource, surfaceId);
+}
+
 } // namespace Microsoft::ReactNative
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {

vnext/Microsoft.ReactNative/Fabric/WindowsImageManager.h

@@ -4,6 +4,7 @@
 #include "pch.h"
 
 #include <react/renderer/imagemanager/ImageRequest.h>
+#include <react/renderer/imagemanager/ImageRequestParams.h>
 
 #include <Fabric/Composition/UriImageManager.h>
 #include <ReactContext.h>
@@ -20,6 +21,12 @@ struct WindowsImageManager {
       const facebook::react::ImageSource &imageSource,
       facebook::react::SurfaceId surfaceId) const;
 
+  facebook::react::ImageRequest requestImage(
+      const facebook::react::ImageSource &imageSource,
+      facebook::react::SurfaceId surfaceId,
+      const facebook::react::ImageRequestParams & /* imageRequestParams */,
+      facebook::react::Tag /* tag */) const;
+
  private:
   winrt::Windows::Foundation::IAsyncOperation<winrt::Microsoft::ReactNative::Composition::ImageResponse>
   GetImageRandomAccessStreamAsync(ReactImageSource source) const;

vnext/Shared/Shared.vcxitems

@@ -222,6 +222,9 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\WindowsImageManager.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
     </ClCompile>
+    <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\ImageRequestParams.cpp">
+      <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
+    </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\SchedulerSettings.cpp"/>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\AsynchronousEventBeat.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>

vnext/Shared/Shared.vcxitems.filters

@@ -155,6 +155,9 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\WindowsImageManager.cpp">
       <Filter>Source Files\Fabric</Filter>
     </ClCompile>
+    <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Fabric\ImageRequestParams.cpp">
+      <Filter>Source Files\Fabric</Filter>
+    </ClInclude>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\SchedulerSettings.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>