Add Android image smoke-test examples and Maestro flows to RNTester (#57306)

Summary:
Pull Request resolved: #57306

Adds five Image examples to RNTester plus matching Maestro end-to-end flows, covering image-loading behaviors that previously had little or no RNTester coverage:

- Progressive JPEG (`progressiveRenderingEnabled`)
- `blurRadius` combined with `Image.prefetch` (blur postprocessor over a prefetched bitmap)
- WebP (lossy/lossless/alpha) and AVIF format decoding
- Image caching across a reload of the same URI (via `Image.queryCache`)
- Wide-gamut (Display-P3) vs sRGB and alpha transparency

Each example renders status text (load/error, cache status) with stable testIDs so the Maestro flows can assert behavior; the visual cases also capture screenshots. Examples that exercise Android-specific decoding (progressive JPEG, WebP/AVIF) are gated to Android; the rest run on both platforms.

Format examples that lack a bundled asset (lossless/alpha WebP, AVIF, Display-P3) currently reference external sample URLs as a stopgap and render an onLoad/onError status so they degrade gracefully; these should be replaced with committed assets in a follow-up.

Changelog:
[Internal]

Differential Revision: D109316705

Author: Abbondanzo

packages/rn-tester/.maestro/image-blur-prefetch.yml

@@ -0,0 +1,35 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Prefetch an image, then render the same URI with blurRadius so the blur
+# postprocessor applies to the already-decoded bitmap. Cross-platform.
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Blur Radius with Prefetch'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-blur-prefetch'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'prefetch: ok'
+    timeout: 20000
+- extendedWaitUntil:
+    visible: 'blurred image: loaded'
+    timeout: 20000
+# Change this to takeScreenshot when you want to update the screenshot
+- assertScreenshot:
+    path: screenshots/image-blur-prefetch-${maestro.platform}
+    cropOn:
+      id: 'image-blur-prefetch'
+    thresholdPercentage: 95

packages/rn-tester/.maestro/image-cache.yml

@@ -0,0 +1,34 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Load a URI twice; queryCache must report it cached after the first load,
+# confirming image caching works. Cross-platform: the URI is a CDN-cacheable
+# image so iOS's NSURLCache-backed queryCache also reports a hit. The regex
+# covers Android (memory|disk) and iOS (which can additionally return disk/memory).
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Image Cache'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-cache'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'first load: loaded'
+    timeout: 20000
+- extendedWaitUntil:
+    visible: 'queryCache: (disk/memory|disk|memory)'
+    timeout: 15000
+- extendedWaitUntil:
+    visible: 'second load: loaded'
+    timeout: 20000

packages/rn-tester/.maestro/image-formats.yml

@@ -0,0 +1,57 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+tags:
+  - android-only
+---
+# Android-only: Fresco decode coverage for WebP (lossy/lossless/alpha) and AVIF.
+# These assets come from external sample URLs, so each format is asserted as
+# reaching a terminal state (loaded|error) rather than strictly loaded, to avoid
+# CI flakiness. Switch to 'loaded' once committed assets replace the URLs.
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - runFlow: ./helpers/launch-app-and-search.yml
+      - inputText:
+          text: 'Image'
+      - assertVisible:
+          id: 'Image'
+      - tapOn:
+          id: 'Image'
+      - assertVisible:
+          id: 'example_search'
+      - tapOn:
+          id: 'example_search'
+      - inputText: 'WebP and AVIF'
+      - hideKeyboard
+      - scrollUntilVisible:
+          element:
+            id: 'image-webp-avif'
+          direction: DOWN
+          speed: 40
+          timeout: 10000
+      - scrollUntilVisible:
+          element: 'WebP lossy: (loaded|error)'
+          direction: DOWN
+          speed: 40
+          timeout: 20000
+      - scrollUntilVisible:
+          element: 'WebP lossless: (loaded|error)'
+          direction: DOWN
+          speed: 40
+          timeout: 20000
+      - scrollUntilVisible:
+          element: 'WebP alpha: (loaded|error)'
+          direction: DOWN
+          speed: 40
+          timeout: 20000
+      - scrollUntilVisible:
+          element: 'AVIF: (loaded|error)'
+          direction: DOWN
+          speed: 40
+          timeout: 20000
+      # Change this to takeScreenshot when you want to update the screenshot
+      - assertScreenshot:
+          path: screenshots/image-formats-${maestro.platform}
+          cropOn:
+            id: 'image-webp-avif'
+          thresholdPercentage: 95

packages/rn-tester/.maestro/image-progressive-jpeg.yml

@@ -0,0 +1,40 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+tags:
+  - android-only
+---
+# Android-only: loads a JPEG with progressiveRenderingEnabled and logs load
+# events. iOS skips this flow (empty=pass).
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - runFlow: ./helpers/launch-app-and-search.yml
+      - inputText:
+          text: 'Image'
+      - assertVisible:
+          id: 'Image'
+      - tapOn:
+          id: 'Image'
+      - assertVisible:
+          id: 'example_search'
+      - tapOn:
+          id: 'example_search'
+      - inputText: 'Progressive JPEG'
+      - hideKeyboard
+      - scrollUntilVisible:
+          element:
+            id: 'image-progressive-jpeg'
+          direction: DOWN
+          speed: 40
+          timeout: 10000
+      # loadStart fires on mount -> proves the progressive load path engaged.
+      # Assert by id since each event is its own element (progress % is dynamic).
+      - extendedWaitUntil:
+          visible:
+            id: 'progressive-jpeg-loadstart'
+          timeout: 15000
+      # Final load event (network image; relies on the same host as image.yml).
+      - extendedWaitUntil:
+          visible:
+            id: 'progressive-jpeg-load'
+          timeout: 20000

packages/rn-tester/.maestro/image-wide-gamut.yml

@@ -0,0 +1,43 @@
+appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
+---
+# Alpha transparency + sRGB vs Display-P3 wide-gamut. Color fidelity needs a
+# screenshot, so we assert load status only. Cross-platform.
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: 'Image'
+- assertVisible:
+    id: 'Image'
+- tapOn:
+    id: 'Image'
+- assertVisible:
+    id: 'example_search'
+- tapOn:
+    id: 'example_search'
+- inputText: 'Wide Gamut'
+- hideKeyboard
+- scrollUntilVisible:
+    element:
+      id: 'image-wide-gamut'
+    direction: DOWN
+    speed: 40
+    timeout: 10000
+- extendedWaitUntil:
+    visible: 'alpha: loaded'
+    timeout: 15000
+- scrollUntilVisible:
+    element: 'sRGB: loaded'
+    direction: DOWN
+    speed: 40
+    timeout: 20000
+# External URL; accept loaded or error.
+- scrollUntilVisible:
+    element: 'P3: (loaded|error)'
+    direction: DOWN
+    speed: 40
+    timeout: 20000
+# Change this to takeScreenshot when you want to update the screenshot
+- assertScreenshot:
+    path: screenshots/image-wide-gamut-${maestro.platform}
+    cropOn:
+      id: 'image-wide-gamut'
+    thresholdPercentage: 95