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

Summary:

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.

Differential Revision: D115740465

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 />;
     },
   },
   {