How to prevent Static Images in React Native from stuttering / loading asynchronously on iOS

Question

I have trouble getting images in React Native to work as I want.

Because images in RN are decoded natively in a separate thread, React Native displays the images that are used in my components (background images, handles, knobs, sliders) at different times, after each individual image has loaded - instead of showing the whole component at once, when it's ready.

I'm using the require method to render the images:

<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />

This async loading would be acceptable if the loading was almost immediate. But even small images seem to be slowly loading. This leads to the UI feeling very unprofessional, up until the point where all images have loaded for a given component.

Is there any way to speed up the image loading? Would it be faster to wrap an UIImageView (image displaying in XCode iOS projects seems instant). Could 'uri' references to a manually bundled image in XCode be faster? It doesn't really make sense to me, why React Native would be so much slower at rendering images than regular iOS apps. Moreover, when I have multiple dynamic instances of a component created - the images seem to have to load again, every time a new component is created.

Manually tracking image load state

Of course, I could manually track each individual image's loading events, and let the opacity of the component's container view start at 0 and then animate up to 1 when the images were loaded. But this seems overly complicated for something like this.

Answer 1

Images are loaded differently when building for production and for development. During development the images will be served over HTTP from the packager server, whereas in production they will be bundled with the app. Try doing a production build on device to see if it's actually a problem or just a development mode side effect.

Answer 2

Noted here https://facebook.github.io/react-native/docs/images.html#off-thread-decoding I guess the assumption is that your UI won't involve too many images as backgrounds. Open up an issue for this usecase.