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}