React-native: 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

[zhy8023]

FlatList 'pull-up load more' Sometimes do not trigger, sometimes trigger, do not trigger, you need to roll back a roll。My onEndReachedThreshold is already set to 0.1。Is there any way to fix this problem?

[springHyc]

I have the same problem

[kuznetsov-online]

Why I need to use FlatList? In example App is only one Image.

[baguosiji]

@FiW I also met this question, can you tell me what you have found?

[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

[top1st]

Same problem i got. Who knows solution?

[karthikpala]

getting same issue, any body got an update?

[ardmn]

same issue :(

[zhy8023]

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

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[adirzoari]

@kuznetsov-online same issue. did you solve it?

[buddzbuddy]

same issue, still not found any solution dude?

[liew789]

same issue, looking for solution.

[sudobrackets]

Hi Folks, Anyone have solution for this issue.

[kangfarih]

same issue.. with RN 0.55.4

[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

https://github.com/facebook/react-native/issues/751#issuecomment-90986304

[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
https://github.com/react-native-community/react-native-cameraroll/issues/219#issuecomment-671411010