Background image load slowly in react native

Question

I use an image for background like this

<Image
  source={Images.workingBg}
  style={styles.container}
>
  {this.renderHeader(navigation)}
  {this.renderContent(navigation)}
</Image>

But image display slowly, text show before and image show after that even though that image is loaded.

Answer 1

Because images in RN are decoded natively in a separate thread.

Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread.

So RN displaying the placeholder for a few more frames while it is decoding the images used in components, then show them at different times after each individual image has loaded (instead of waiting then show the whole component at once when it's ready).

See: Off-thread Decoding

Note

Images are loaded differently in development/debugging and "real" production. During local debugging the images will be served over HTTP from the packager server, whereas in production they will be bundled with the app.

Solution

Try doing a production build (full release build) on device to see if it's actually a problem or just a development mode side effect.

Or try the workaround from this issue

componentWillMount() {
    this.image = (<Image source={require('./background.png')} />);
}

and in your render() function:

render() {
    return(
        <View>
            {this.image}
        </View>
    );
}