React-native loads local images with a delay

Question

I have a hybrid react-native app and I have some static images which are loaded from the bundle. In the app when I open a page containing the images, it shows a gray rectangle while the image is getting decoded. Here are some pics of what I mean:

When the page loads, I can see the left image first and after a delay of ~0.2 seconds the right image fades in. I have searched for this issue and I can't find any clean workarounds. This is the code I use to load the image:

<Image
     style={{
         height: 30,
         width: 30,
         marginStart: 5,
     }}
     source={require('../assets/google-logo.png')}
/>

I have even tried to load the images through application bundles (i.e. add the image through XCode/Android Studio) but again the same happens. I thought this might be an effect of the debug version as it is loading from the packager but then I built a release version and the same happened.

I have seen some solutions which use the state of the component to set a flag when the Image is loaded and then render the component but I think there should be something better. Are there any clean solutions to this problem?

This is very disappointing about react-native that it cannot load simple small images in a pleasant way!

What is your `react-native` version?. Because i have never seen that problem. — jose920405, Apr 02 '19 at 17:15
@jose920405 it's 0.58.4. You mean when you require an image there is no delay for loading the image? — Hamed, Apr 03 '19 at 12:45

score 4 · Accepted Answer · edited Feb 02 '20 at 20:29

4

The problem was mine. I had several images that some loaded from the internet and therefore I used react-native-element's Image component which has a placeholder for when the image is downloading. This image component caused the effect so I added both images as:

import { Image } from 'react-native';
import { Image as RneImage } from 'react-native-elements';

Now when I am using Image form React Native core, it loads static images fast!

edited Feb 02 '20 at 20:29

AmerllicA

29,059
15
130
154

answered Apr 05 '19 at 15:36

Hamed

297
3
21

can you post a sample of code , where you are using? – Nadeem Yousaf Sep 06 '19 at 06:13

React-native loads local images with a delay

1 Answers1

Linked