Fix html.img event bug in Fabric (#72)

React Native's "Fabric" architecture appears to have a bug and does not populate the Image 'load' event with 'source' data.
facebook · Apr 4, 2024 · a770fc3 · a770fc3
1 parent 429e2fe
commit a770fc3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
@@ -329,8 +329,8 @@ export function createStrictDOMComponent<T: any, P: StrictProps>(
             const { source } = e.nativeEvent;
             onLoad({
               target: {
-                naturalHeight: source.height,
-                naturalWidth: source.width
+                naturalHeight: source?.height,
+                naturalWidth: source?.width
               },
               type: 'load'
             });

diff --git a/packages/react-strict-dom/tests/html-test.native.js b/packages/react-strict-dom/tests/html-test.native.js
@@ -387,6 +387,44 @@ describe('html', () => {
       expect(root.toJSON()).toMatchSnapshot();
     });
 
+    test('"img" prop "onLoad"', () => {
+      const onLoad = jest.fn();
+
+      const root = create(<html.img onLoad={onLoad} src="https://src.jpg" />);
+      const element = root.toJSON();
+
+      // Expected event shape
+      element.props.onLoad({
+        nativeEvent: {
+          source: {
+            height: 100,
+            width: 200
+          }
+        }
+      });
+      expect(onLoad).toHaveBeenCalledWith({
+        target: {
+          naturalHeight: 100,
+          naturalWidth: 200
+        },
+        type: 'load'
+      });
+
+      // Fabric event bug
+      element.props.onLoad({
+        nativeEvent: {
+          source: undefined
+        }
+      });
+      expect(onLoad).toHaveBeenCalledWith({
+        target: {
+          naturalHeight: undefined,
+          naturalWidth: undefined
+        },
+        type: 'load'
+      });
+    });
+
     test('"input" prop "autoComplete" value', () => {
       [
         'additional-name',