From 77f742a300e7b32305fa1f7481c9d56d065d7d1b Mon Sep 17 00:00:00 2001
From: ben cripps <bencripps1@gmail.com>
Date: Fri, 4 Sep 2026 15:04:11 -0500
Subject: [PATCH] Disable Android Image fadeDuration on native html.img

RN fades images in over 300ms on Android by default, which is not a web
behavior. Force fadeDuration to 0 so html.img matches web; CSS
transitions can still animate opacity.
---
 .../src/native/modules/createStrictDOMImageComponent.js   | 4 ++++
 packages/react-strict-dom/src/types/renderer.native.js    | 1 +
 .../tests/compat/__snapshots__/compat-test.native.js.snap | 1 +
 .../tests/html/__snapshots__/html-test.js.snap-native     | 5 +++++
 .../tests/html/__snapshots__/html-test.native.js.snap     | 2 ++
 packages/react-strict-dom/tests/html/html-test.native.js  | 8 ++++++++
 6 files changed, 21 insertions(+)

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
index fc0fbbbf..4e67672a 100644
--- a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
+++ b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
@@ -85,6 +85,10 @@ function applyImageProps(
 
   // Component-specific props
 
+  // RN Image fades in over 300ms on Android by default. That is not a web
+  // behavior, so disable it. CSS transitions can still animate opacity.
+  nativeProps.fadeDuration = 0;
+
   nativeProps.ref = elementRef;
 }
 
diff --git a/packages/react-strict-dom/src/types/renderer.native.js b/packages/react-strict-dom/src/types/renderer.native.js
index 4f91a652..165996d9 100644
--- a/packages/react-strict-dom/src/types/renderer.native.js
+++ b/packages/react-strict-dom/src/types/renderer.native.js
@@ -70,6 +70,7 @@ type ReactNativeProps = {
   disabled?: ?boolean,
   editable?: TextInputProps['editable'],
   enterKeyHint?: TextInputProps['enterKeyHint'],
+  fadeDuration?: ImageProps['fadeDuration'],
   focusable?: ?boolean,
   height?: ImageProps['height'],
   importantForAccessibility?: 'no-hide-descendants',
diff --git a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
index 7e6b6b79..e188bc02 100644
--- a/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
+++ b/packages/react-strict-dom/tests/compat/__snapshots__/compat-test.native.js.snap
@@ -15,6 +15,7 @@ exports[`<compat.native> "as" equals "div": as=div 1`] = `
 exports[`<compat.native> "as" equals "img": as=img 1`] = `
 <Image
   accessibilityLabel="label"
+  fadeDuration={0}
   ref={[Function]}
   srcSet="1x.img, 2x.img 2x"
   style={
diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
index 1bcaa080..4adc5c31 100644
--- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
+++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.js.snap-native
@@ -3057,6 +3057,7 @@ exports[`<html.*> "i" supports inline event handlers 1`] = `
 
 exports[`<html.*> "img" default rendering 1`] = `
 <Image
+  fadeDuration={0}
   ref={[Function]}
   style={
     {
@@ -3070,6 +3071,7 @@ exports[`<html.*> "img" default rendering 1`] = `
 
 exports[`<html.*> "img" ignores and warns about unsupported attributes 1`] = `
 <Image
+  fadeDuration={0}
   ref={[Function]}
   style={
     {
@@ -3085,6 +3087,7 @@ exports[`<html.*> "img" supports additional image attributes 1`] = `
 <Image
   alt="Alt text"
   crossOrigin="anonymous"
+  fadeDuration={0}
   height={100}
   onError={[Function]}
   onLoad={[Function]}
@@ -3136,6 +3139,7 @@ exports[`<html.*> "img" supports global attributes 1`] = `
     }
   }
   accessibilityViewIsModal={true}
+  fadeDuration={0}
   focusable={true}
   importantForAccessibility="no-hide-descendants"
   nativeID="some-id"
@@ -3159,6 +3163,7 @@ exports[`<html.*> "img" supports global attributes 1`] = `
 
 exports[`<html.*> "img" supports inline event handlers 1`] = `
 <Image
+  fadeDuration={0}
   onBlur={[Function]}
   onFocus={[Function]}
   onGotPointerCapture={[Function]}
diff --git a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
index 26fc0ebc..4d01ea7b 100644
--- a/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
+++ b/packages/react-strict-dom/tests/html/__snapshots__/html-test.native.js.snap
@@ -219,6 +219,7 @@ exports[`<html.*> (native polyfills) polyfills: layout default flex layout: flex
 exports[`<html.*> (native polyfills) polyfills: props <img> "src" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
+  fadeDuration={0}
   ref={[Function]}
   referrerPolicy="no-referrer"
   src="https://src.jpg"
@@ -235,6 +236,7 @@ exports[`<html.*> (native polyfills) polyfills: props <img> "src" prop with load
 exports[`<html.*> (native polyfills) polyfills: props <img> "srcSet" prop with loading props 1`] = `
 <Image
   crossOrigin="use-credentials"
+  fadeDuration={0}
   ref={[Function]}
   referrerPolicy="no-referrer"
   srcSet="https://src.jpg 1x, https://srcx2.jpg 2x"
diff --git a/packages/react-strict-dom/tests/html/html-test.native.js b/packages/react-strict-dom/tests/html/html-test.native.js
index 21981bc3..95770e62 100644
--- a/packages/react-strict-dom/tests/html/html-test.native.js
+++ b/packages/react-strict-dom/tests/html/html-test.native.js
@@ -297,6 +297,14 @@ describe('<html.*> (native polyfills)', () => {
         expect(root.toJSON()).toMatchSnapshot();
       });
 
+      test('disables Android fadeDuration default', () => {
+        let root;
+        act(() => {
+          root = create(<html.img src="https://src.jpg" />);
+        });
+        expect(root.toJSON().props.fadeDuration).toBe(0);
+      });
+
       test('"onError" and "onLoad" prop', () => {
         const onError = jest.fn();
         const onLoad = jest.fn();