Image component with local uri source (file://) does not render initially

[kuznetsov-online]

Image components with local uri sources (file://) do not render initially. When a re-render of the component tree happens, the images get rendered.

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: 9.1 (9B55)
Android Studio: 3.0.1

Packages: (wanted => installed)
react-native: 0.51.0 (@sraka1 reports this is still an issue in 0.58.4)
react: 16.0.0

Target Platform: Android (5.0.0)

Steps to Reproduce

const image = {uri: 'http://my.bamps.online/cfs/files/images/D8Xg27puAiqjvKetD?store=normal'}
// image2 is cached version of image by react-native-cached-image
const image2 = {uri: 'file:///data/data/com.testcachedimage/cache/imagesCacheDir/my_bamps_online_e6d51c26611343fb5e8c3e493674423c3d3f3943/38baef384cbb5bcc5f6138ca0653884561f85fde.jpg'}
export default class App extends Component<{}> {
  render() {
    return (
      <View style={{backgroundColor:'#777'}}>
        <Image source={image2} style={{width: 100, height: 100}}/>
        <Image source={image2} style={{width: 300, height: 100}}/>
        <ImageBackground source={image2} style={{width: 100, height: 100}}/>
        <ImageBackground source={image2} style={{width: 300, height: 100}}/>
        <Image source={image} style={{width: 100, height: 100}}/>
        <Image source={image} style={{width: 300, height: 100}}/>
      </View>
    );
  }
}

Actual Behavior

[Amurmurmur]

@fiw
The problem might be caused by the limited amount of memory (RAM) available.
Try to use FlatList and pass it a removeClippedSubviews
Could you please also check a LogCat for any warnings or errors thrown by your application.
Could you also try to run the same app on android 5.0.1+ like Android 6.0.0 and so on, see if you get the same results.

[kuznetsov-online]

@Amurmurmur
It's not memory error.
I don't understand, but this image is transparent if it loaded from 'file://' and (height = 100 and width <= 289) or (width = 100 and height <= 320)
no any errors in LogCat

D/ReactNative( 2073): Initializing React Xplat Bridge.
D/ReactNative( 2073): Initializing React Xplat Bridge before initializeBridge
D/ReactNative( 2073): Initializing React Xplat Bridge after initializeBridge
D/ReactNative( 2073): CatalystInstanceImpl.runJSBundle()
D/ReactNative( 2073): ReactInstanceManager.setupReactContext()
D/ReactNative( 2073): CatalystInstanceImpl.initialize()
W/unknown:ReactNative( 2073): Packager connection already open, nooping.
D/ReactNative( 2073): ReactInstanceManager.attachRootViewToInstance()
I/ReactNativeJS( 2073): Running application "testCachedImage" with appParams: {"rootTag":571}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

Android 5.0.0, 6.0.0, 7.0.0 (emu or real device) - the same.

[Amurmurmur]

@fiw Both Release and Debug builds?

[kuznetsov-online]

@Amurmurmur yes, both

[ahmedraza11]

I have the same problem that some times when I navigate to some screen the ImageBackground not shown some time and some time show but after 1 or 2 seconds

[ardmn]

same issue :(

[zhy8023]

You can set the vertical gradient, and then rotate it horizontally. @ahmedraza11

[KonstantinKolodnitsky]

My issue was in path. react-native-fs returns path like /storage/emulated/0/Android/data/com.blah/blah.jpeg but Image component requires it to be file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

[michbil]

Still happens on react-native 0.57.7 It's only related to the files in local cache referenced with file:// protocol.
It I lock my phone screen, and then unlock it, all images are shown as expected.

[sraka1]

@react-native-bot @hramos Please re-open this. Still happens with 0.58.4 and I think it could be considered a critical issue. The Image component is one of the core ones every RN developer relies on.

Maybe renaming the issue as something like "Android: Image component with local uri source (file://) does not render initially" would make sense? There are several similar issues, all of them closed - a master one where progress on this is tracked should be open. When a re-render of the component tree happens, the images get rendered - same as reported by @michbil.

[hramos]

Re-opened and made some edits. @sraka1 let me know if you have additional suggestions to get the description of the issue up to date.

[michbil]

As a temporary solution I had to write own very simple and limited Image component for Android, to overcome this issue and display files from the disk correctly https://gist.github.com/michbil/8af7567573e18d578dd1be0493b66c75

[sraka1]

My (initial) guess is it has something to do with the Fresco image cache...we might not even need it for local uris (if I’m not mistaken, currently all uri sourced images are loaded into the Fresco cache...). I’m planing to explore more tomorrow...

[Sanan4li]

did anyone found any solution? I am facing the same issue when I tries to load Image stored in my phone.

[telly3650]

This solution worked for me

#751 (comment)

[annjawn]

This still continues to be one of the MANY MANY struggles with react-native image.

[kesha-antonov]

Same here. 0.63.0-rc.1

[psamim]

My issue got fixed by adding this
react-native-cameraroll/react-native-cameraroll#219 (comment)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[ductridev]

This error still happens with the protocol file:// and initial the image.

node: 20.10.0
npm: 10.2.3
Android Sdk version: 34
Ndk version: 26.2.11394342
Kotlin version: 1.8.0
react: 18.2.0
react-native: 0.73.6