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.
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>
);
}