Add Image.getSize device coverage (#56746)

Abbondanzo · facebook-github-bot · commit 8fc7ccdb6f7a · 2026-05-13T22:05:26.000-07:00
Summary:

Add an RNTester PlatformTest case that calls Image.getSize against a small PNG, a large JPEG, and an EXIF-rotated JPEG, then verifies the dimensions reported by native image metadata. Extend the existing Image Maestro flow to open the new test and wait for the pass result, so the same flow can run against Android and iOS RNTester builds.

Changelog:
[Internal][Added] - Add RNTester device coverage for Image.getSize dimensions

Reviewed By: christophpurrer

Differential Revision: D104535939
diff --git a/packages/rn-tester/.maestro/image.yml b/packages/rn-tester/.maestro/image.yml
@@ -1,12 +1,27 @@
 appId: ${APP_ID} # iOS: com.meta.RNTester.localDevelopment | Android: com.facebook.react.uiapp
 ---
-- launchApp
-- assertVisible: "Components"
-- scrollUntilVisible:
-    element:
-      id: "Image"
-    direction: DOWN
-    speed: 40
+- runFlow: ./helpers/launch-app-and-search.yml
+- inputText:
+    text: "Image"
+- assertVisible:
+    id: "Image"
 - tapOn:
     id: "Image"
 - assertVisible: "Plain Network Image with `source` prop."
+- assertVisible:
+    id: "example_search"
+- tapOn:
+    id: "example_search"
+- inputText:
+    text: "Image.getSize"
+- hideKeyboard
+- tapOn:
+    id: "platform-test-results"
+- assertVisible: "Results"
+- extendedWaitUntil:
+    visible: "Image.getSize resolves source dimensions"
+    timeout: 30000
+- assertVisible:
+    id: "platform-test-pass-count-1"
+- assertVisible:
+    id: "platform-test-fail-count-0"
diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestMinimizedResultView.js
@@ -33,17 +33,20 @@ export default function RNTesterPlatformTestMinimizedResultView({
   style,
 }: Props): React.MixedElement {
   return (
-    <TouchableHighlight onPress={onPress} style={[styles.root, style]}>
+    <TouchableHighlight
+      testID="platform-test-results"
+      onPress={onPress}
+      style={[styles.root, style]}>
       <View style={styles.innerContainer}>
-        <Text style={styles.statsContainer}>
+        <View style={styles.statsContainer}>
           <RNTesterPlatformTestResultsText
             numError={numError}
             numFail={numFail}
             numPass={numPass}
             numPending={numPending}
             numSkipped={numSkipped}
           />
-        </Text>
+        </View>
         <Text style={styles.caret}>⌃</Text>
       </View>
     </TouchableHighlight>
diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
@@ -275,15 +275,15 @@ export default function RNTesterPlatformTestResultView(
             <View style={styles.titleContainer}>
               <Text style={styles.title}>Results</Text>
               <Text style={styles.filteredText}>{filteredNotice}</Text>
-              <Text style={styles.summaryContainer}>
+              <View style={styles.summaryContainer}>
                 <RNTesterPlatformTestResultsText
                   numError={numError}
                   numFail={numFail}
                   numPass={numPass}
                   numPending={numPending}
                   numSkipped={numSkipped}
                 />
-              </Text>
+              </View>
             </View>
             <View style={styles.actionsContainer}>
               <FilterModalButton
diff --git a/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultsText.js b/packages/rn-tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultsText.js
@@ -24,36 +24,30 @@ export default function RNTesterPlatformTestResultsText(
   const {numPass, numFail, numError, numPending, numSkipped} = props;
   return (
     <>
-      <Text>
+      <Text
+        testID={`platform-test-pass-count-${numPass}`}
+        style={styles.statText}>
         {numPass} <Text style={styles.passText}>Pass</Text>
       </Text>
-      {'  '}
-      <Text>
+      <Text
+        testID={`platform-test-fail-count-${numFail}`}
+        style={styles.statText}>
         {numFail} <Text style={styles.failText}>Fail</Text>
       </Text>
       {numSkipped > 0 ? (
-        <>
-          {'  '}
-          <Text>
-            {numSkipped} <Text style={styles.skippedText}>Skipped</Text>
-          </Text>
-        </>
+        <Text style={styles.statText}>
+          {numSkipped} <Text style={styles.skippedText}>Skipped</Text>
+        </Text>
       ) : null}
       {numError > 0 ? (
-        <>
-          {'  '}
-          <Text>
-            {numError} <Text style={styles.errorText}>Error</Text>
-          </Text>
-        </>
+        <Text style={styles.statText}>
+          {numError} <Text style={styles.errorText}>Error</Text>
+        </Text>
       ) : null}
       {numPending > 0 ? (
-        <>
-          {' '}
-          <Text>
-            {numPending} <Text style={styles.pendingText}>Pending</Text>
-          </Text>
-        </>
+        <Text style={styles.statText}>
+          {numPending} <Text style={styles.pendingText}>Pending</Text>
+        </Text>
       ) : null}
     </>
   );
@@ -75,4 +69,7 @@ const styles = StyleSheet.create({
   skippedText: {
     color: 'blue',
   },
+  statText: {
+    marginEnd: 8,
+  },
 });
diff --git a/packages/rn-tester/js/examples/Image/ImageExample.js b/packages/rn-tester/js/examples/Image/ImageExample.js
@@ -11,10 +11,12 @@
 'use strict';
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import type {PlatformTestComponentBaseProps} from '../Experimental/PlatformTest/RNTesterPlatformTestTypes';
 import type {ImageProps, LayoutChangeEvent} from 'react-native';
 
 import RNTesterButton from '../../components/RNTesterButton';
 import RNTesterText from '../../components/RNTesterText';
+import RNTesterPlatformTest from '../Experimental/PlatformTest/RNTesterPlatformTest';
 import ImageCapInsetsExample from './ImageCapInsetsExample';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
@@ -567,7 +569,7 @@ class OnPartialLoadExample extends React.Component<
         </RNTesterText>
         <Image
           source={{
-            uri: `https://images.pexels.com/photos/671557/pexels-photo-671557.jpeg?&buster=${Math.random()}`,
+            uri: `https://www.facebook.com/assets/react_native_oss_tests/large-image@1x.jpg&buster=${Math.random()}`,
           }}
           onPartialLoad={this.partialLoadHandler}
           style={styles.base}
@@ -673,6 +675,99 @@ const smallImage = {
   uri: IMAGE1,
 };
 
+const GET_SIZE_TEST_IMAGES: ReadonlyArray<{
+  expectedHeight: number,
+  expectedWidth: number,
+  uri: string,
+  name: string,
+}> = [
+  {
+    expectedHeight: 492,
+    expectedWidth: 960,
+    uri: IMAGE1,
+    name: 'large PNG',
+  },
+  {
+    expectedHeight: 3000,
+    expectedWidth: 4500,
+    uri: 'https://www.facebook.com/assets/react_native_oss_tests/large-image@1x.jpg',
+    name: 'large JPEG with density 2',
+  },
+  {
+    expectedHeight: 1200,
+    expectedWidth: 1800,
+    // Rotated 90 degrees counter-clockwise
+    uri: 'https://www.facebook.com/assets/react_native_oss_tests/exif-6@1x.jpg',
+    name: 'EXIF rotated JPEG',
+  },
+];
+
+function getImageSize(uri: string): Promise<{height: number, width: number}> {
+  return new Promise((resolve, reject) => {
+    Image.getSize(uri, (width, height) => resolve({height, width}), reject);
+  });
+}
+
+function ImageGetSizePlatformTest(props: PlatformTestComponentBaseProps) {
+  const {harness} = props;
+  const asyncTest = harness.useAsyncTest(
+    'Image.getSize resolves source dimensions',
+    30000,
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    Promise.all(
+      GET_SIZE_TEST_IMAGES.map(image =>
+        getImageSize(image.uri).then(size => ({image, size})),
+      ),
+    )
+      .then(results => {
+        if (cancelled) {
+          return;
+        }
+
+        for (const result of results) {
+          asyncTest.step(({assert_equals}) => {
+            assert_equals(
+              result.size.width,
+              result.image.expectedWidth,
+              `${result.image.name} width`,
+            );
+            assert_equals(
+              result.size.height,
+              result.image.expectedHeight,
+              `${result.image.name} height`,
+            );
+          });
+        }
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          asyncTest.step(({assert_true}) => {
+            assert_true(false, `Image.getSize failed: ${String(error)}`);
+          });
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          asyncTest.done();
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [asyncTest]);
+
+  return (
+    <RNTesterText>
+      Calling Image.getSize for {GET_SIZE_TEST_IMAGES.length} remote images.
+    </RNTesterText>
+  );
+}
+
 const styles = StyleSheet.create({
   base: {
     width: 64,
@@ -1564,6 +1659,18 @@ exports.examples = [
       return <ImageSizeExample source={fullImage} />;
     },
   },
+  {
+    title: 'Image.getSize',
+    render: function (): React.Node {
+      return (
+        <RNTesterPlatformTest
+          title="Image.getSize"
+          description="Calls Image.getSize and verifies the source dimensions returned by native image metadata."
+          component={ImageGetSizePlatformTest}
+        />
+      );
+    },
+  },
   {
     title: 'MultipleSourcesExample',
     description:
