React-native: Using Images as backgrounds, handles etc. of components is not easily feasable due to lazy/off-thread loading

[christianscheuer]

I think there might be a use case for Images which isn't properly supported with the current off-thread decoding model for Images.

I am currently translating an iOS app written in Objective C and partly Xamarin to react native. A lot of my current custom controls/components are skinned with images - be it slider handles, scrollbar handles, component backgrounds etc. This works great, is beautiful and extremely fast in the native/xamarin iOS app.

When I rebuild these components in react native (which was surprisingly fast and easy), and include some of these components in my app, the rendering of the components however will be staggered and seem more like the loading of a slow web page than have the feel of native. This is because each different image will load off-thread and first render when it's available, with all of the other non-image GUI elements being rendered on first frame. Moreover, when using the same component multiple times in the GUI, it seems that each component will load its images in parallel independent of each other (so no caching, it seems). All in all, this behavior makes the UI feel incredibly unprofessional and non-native.

I have made a workaround, where I include every component's contents in a LoadableComponent, which will monitor the onLoad events of the images, and animate the opacity of the entire component from 0 to 1, once all images have properly loaded.

This use case however seems like something that should be supported natively by the react native system. I am wondering whether it would yield better rendering performance if I manually wrapped the iOS UIImageView component and used that for my static images. Maybe react native should provide a NativeStaticImage component for this kind of use.

Please forgive me if this is already covered, but it somehow skipped my attention.

[facebook-github-bot]

Hey christianscheuer, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[christianscheuer]

Thank you, bot. Please see the following stackoverflow discussion for further details, and why we think this is something that should be supported:
http://stackoverflow.com/questions/34272286/how-to-prevent-static-images-in-react-native-from-stuttering-loading-asynchron/34353999#34353999

[satya164]

@christianscheuer Hi. If you want this as something to be worked on by the team, please post it on Product Pains

An alternative for you will be to write a native component which does this for you.

[christianscheuer]

Hi @satya164. Thank you for your quick reply. I'll post it on Product Pains as soon as I get to it. If I end up implementing something myself that could be useful to the community I'll make it available as a package or PR.

[satya164]

@christianscheuer That would be awesome. Thanks :)

[Intellicode]

Seems related to https://github.com/facebook/react-native/issues/2570

[satya164]

Thanks @Intellicode

Closing in favor of #2570

[hasen6]

This thread is closed in favour of #2570 and #2570 is closed in favour of this thread!

This is definitely an issue, I'm experiencing it with switching to any page in NavigatorIOS or Tab bar IOS and back to a page with a background image.

[satya164]

@hasen6 #2570 was never closed.

[hasen6]

Ok it looks closed because it also has a big red 'closed' sign but I guess that's referring to this thread being closed.

[xvalentino]

I'd like to note that resizeMode being set to 'cover' instead of 'contain' solved one flickering issue when the assets were being loaded for a second time.

However, I experience a flicker when switching between two images, on first load. I expect this is because the image is being decoded on the fly, can anyone think of a way we can decode assets before they are being rendered, so the user won't experience a flash?

[filipef101]

@xvalentino Any update ? :((