Disable Android Image fadeDuration on native html.img

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;
 }
 

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',

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={

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]}

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"

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();