[android] Image component can't load image in latest version

[llr101]

Description

I init a react native project without framework by npx @react-native-community/cli@latest init AwesomeProject. The version is 0.76.3. But image with remote uri load very slow first time in android, and it is ok in ios.

<Image
    style={{width:100,height:100}}
    source={{
        uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
    onLoad={() => console.warn('onLoad')}
    onLoadStart={() => console.warn('onLoadStart')}
    onLoadEnd={() => console.warn('onLoadEnd')}
    onProgress={() => console.warn('onProgress')}
    onError={() => console.warn('onError')}
/>

The console just print "onLoadStart", then nothing printed. I wait for about 5 mins, the image loaded, and then reload app, the image shows immediately. But when I changed the image uri and reload app, I need to wait for 5 mins again to load the image. My app is pure and no dependences. Could you help me check it? Thank you

Steps to reproduce

1. install pure react-native without framework by npx @react-native-community/cli@latest init AwesomeProject. The version is 0.76.3.
2. Add codes in App.tsx

   <Image
   style={{width:100,height:100}}
   source={{
       uri: 'https://reactnative.dev/img/tiny_logo.png',
   }}
   onLoad={() => console.warn('onLoad')}
   onLoadStart={() => console.warn('onLoadStart')}
   onLoadEnd={() => console.warn('onLoadEnd')}
   onProgress={() => console.warn('onProgress')}
   onError={() => console.warn('onError')}
   />

3. yarn android and check the image load or console print.

React Native Version

0.76.3

Affected Platforms

Runtime - Android, Build - MacOS

Output of npx react-native info

System:
  OS: macOS 14.2
  CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Memory: 10.44 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 10.3.0
    path: ~/.npm-global/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/opt/ruby/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12550806
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: ^15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.3
    wanted: 0.76.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no logs in android studio

Reproducer

https://github.com/llr101/react-native-android-image-error

Screenshots and Videos

No response

[tero-paananen]

I have same issue on "react-native": "0.74.6" only in device, not in simulator.

Tested on Android 9 device.

Seems to work on Android 13 device.

[blakef]

Reducing the reproducer further to:

import React from 'react';
import {SafeAreaView, Image, Button} from 'react-native';

function App(): React.JSX.Element {
  const lastRun = new Date().getTime();
  const delta = () => new Date().getTime() - lastRun;

  return (
    <SafeAreaView>
      <Image
        style={{ width: 100, height: 100 }}
        source={{
          uri: `https://reactnative.dev/img/tiny_logo.png?r=${Math.random()}`,
        }}
        onLoad={() => console.warn('onLoad', delta())}
        onLoadStart={() => console.warn('onLoadStart', delta())}
        onLoadEnd={() => console.warn('onLoadEnd', delta())}
        onProgress={() => console.warn('onProgress', delta())}
        onError={() => console.warn('onError', delta())}
      />
      <Button onPress={() => console.warn('Unblocked')} title="Unblock" />
    </SafeAreaView>
  );
}

export default App;

I haven't been able to reproduce this locally:

[llr101]

Reducing the reproducer further to:

import React from 'react';
import {SafeAreaView, Image, Button} from 'react-native';

function App(): React.JSX.Element {
  const lastRun = new Date().getTime();
  const delta = () => new Date().getTime() - lastRun;

  return (
    <SafeAreaView>
      <Image
        style={{ width: 100, height: 100 }}
        source={{
          uri: `https://reactnative.dev/img/tiny_logo.png?r=${Math.random()}`,
        }}
        onLoad={() => console.warn('onLoad', delta())}
        onLoadStart={() => console.warn('onLoadStart', delta())}
        onLoadEnd={() => console.warn('onLoadEnd', delta())}
        onProgress={() => console.warn('onProgress', delta())}
        onError={() => console.warn('onError', delta())}
      />
      <Button onPress={() => console.warn('Unblocked')} title="Unblock" />
    </SafeAreaView>
  );
}

export default App;

I haven't been able to reproduce this locally:

Are you using an Android physical device? What is the version?

[blakef]

Used the provided reproducer (0.76.3) on a emulator.

[tero-paananen]

Works on my Android 13 device but not on Android 9.

[llr101]

Used the provided reproducer (0.76.3) on a emulator.

As tero-paananen said. It seems like fine on emulator, but not ok on Android 9 physical device.