Wait for images before box-shadow screenshots (#57922)

Summary:
Pull Request resolved: #57922

Changelog: [Internal]

Expose the box-shadow example test identifier only after all three images have loaded. The E2E navigation helper now waits for stable image content before capturing the screenshot, and the Nougat golden reflects the complete example.

Reviewed By: Abbondanzo

Differential Revision: D115740465

fbshipit-source-id: 78bbec4ef20ce14832ec423c5e98320eb3ba34a0

Author: cipolleschi

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -1258,6 +1258,41 @@ exports.category = 'Basic';
 exports.description =
   'Base component for displaying different types of images.';
 
+component BoxShadowExample() {
+  const [loadedImageCount, setLoadedImageCount] = useState(0);
+  const onLoad = () => setLoadedImageCount(count => count + 1);
+
+  return (
+    <View
+      style={styles.horizontal}
+      testID={loadedImageCount >= 3 ? 'box-shadow-example' : undefined}>
+      <Image
+        onLoad={onLoad}
+        style={[styles.base, styles.boxShadow, styles.boxShadowWithBackground]}
+        source={smallImage}
+      />
+      <Image
+        onLoad={onLoad}
+        style={[
+          styles.base,
+          styles.boxShadow,
+          styles.boxShadowMultiOutsetInset,
+        ]}
+        source={smallImage}
+      />
+      <Image
+        onLoad={onLoad}
+        style={[
+          styles.base,
+          styles.boxShadow,
+          styles.boxShadowAsymetricallyRounded,
+        ]}
+        source={fullImage}
+      />
+    </View>
+  );
+}
+
 exports.examples = [
   {
     title: 'Plain Network Image with `source` prop.',
@@ -1488,34 +1523,7 @@ exports.examples = [
     title: 'Box Shadow',
     name: 'box-shadow',
     render: function (): React.Node {
-      return (
-        <View style={styles.horizontal} testID="box-shadow-example">
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowWithBackground,
-            ]}
-            source={smallImage}
-          />
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowMultiOutsetInset,
-            ]}
-            source={smallImage}
-          />
-          <Image
-            style={[
-              styles.base,
-              styles.boxShadow,
-              styles.boxShadowAsymetricallyRounded,
-            ]}
-            source={fullImage}
-          />
-        </View>
-      );
+      return <BoxShadowExample />;
     },
   },
   {