Make image prefetch JNI batching thread-safe (#54861)

Summary:
Pull Request resolved: #54861

The JNI batching for image prefetching was leading to crashes due to the following thread-safety issue in the ImageFetcher implementation:
* Image requests are made from the ImageShadowNode layout call, these can happen from any thread.
* Image request flushing happens from `FabricUIManagerBinding::schedulerShouldRenderTransactions()`, meaning on mount
* A commit could happen while a mount is running. Meaning the image fetcher `items_` read/write has to be synchronized to avoid data corruption.

Changelog: [Internal]

Reviewed By: javache

Differential Revision: D88970631

fbshipit-source-id: ef25e3b78e6c23a786c8e225eb3abf0bc04213a5

Author: Nick Lefever

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.cpp

@@ -24,11 +24,14 @@ ImageRequest ImageFetcher::requestImage(
     SurfaceId surfaceId,
     const ImageRequestParams& imageRequestParams,
     Tag tag) {
-  items_[surfaceId].emplace_back(
-      ImageRequestItem{
-          .imageSource = imageSource,
-          .imageRequestParams = imageRequestParams,
-          .tag = tag});
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    items_[surfaceId].emplace_back(
+        ImageRequestItem{
+            .imageSource = imageSource,
+            .imageRequestParams = imageRequestParams,
+            .tag = tag});
+  }
 
   auto telemetry = std::make_shared<ImageTelemetry>(surfaceId);
 
@@ -40,8 +43,13 @@ ImageRequest ImageFetcher::requestImage(
 }
 
 void ImageFetcher::flushImageRequests() {
-  if (items_.empty()) {
-    return;
+  std::unordered_map<SurfaceId, std::vector<ImageRequestItem>> items;
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    if (items_.empty()) {
+      return;
+    }
+    items.swap(items_);
   }
 
   auto fabricUIManager_ =
@@ -52,14 +60,12 @@ void ImageFetcher::flushImageRequests() {
               SurfaceId, std::string, JReadableMapBuffer::javaobject)>(
               "experimental_prefetchResources");
 
-  for (auto& [surfaceId, surfaceImageRequests] : items_) {
+  for (auto& [surfaceId, surfaceImageRequests] : items) {
     auto readableMapBuffer = JReadableMapBuffer::createWithContents(
         serializeImageRequests(surfaceImageRequests));
     prefetchResources(
         fabricUIManager_, surfaceId, "RCTImageView", readableMapBuffer.get());
   }
-
-  items_.clear();
 }
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/imagemanager/platform/android/react/renderer/imagemanager/ImageFetcher.h

@@ -11,6 +11,7 @@
 #include <react/renderer/imagemanager/ImageRequestParams.h>
 #include <react/utils/ContextContainer.h>
 #include <memory>
+#include <mutex>
 #include <unordered_map>
 #include <vector>
 
@@ -38,6 +39,7 @@ class ImageFetcher {
       Tag tag);
 
   std::unordered_map<SurfaceId, std::vector<ImageRequestItem>> items_;
+  std::mutex mutex_;
   std::shared_ptr<const ContextContainer> contextContainer_;
 };
 } // namespace facebook::react