Images load really slow

Expo SDK
1

Hi all,

Even though I cache all the local images while the app loads, a screen with lots of images load very slow. It looks like as if the images load sequentially which looks very unprofessional. How do you guys solve these problems, is there a pattern I need to follow?

Thanks.

1 Like
2

I’m also interested in this. I have a lot of screens with background images and even switching from one screen to another and then back, the screen that was already loaded takes forever for the image to show up again. It looks super unprofessional.

3

@ryanvanderpol As long as the images are not loaded from the bundle, this is a no go for me. I’m porting my code to react native at the moment.
Please look here:

1 Like
4

@onselakin yeah, I agree. I’ve already got too much invested in Expo to change now, but I’m pretty disappointed with how image assets are handled. Here’s another thread I started about the issues I’ve been seeing: Disappearing images - #8 by ide

5

Hiya. I am also interested in the best way to serve up lots of background images. Do we have any progress here yet? I have considered it could be down to the way my app is built, maybe I should be using a FlatList rather than a ListView, this would allow each page to load in as the user scrolls, but then I guess the image may still load slowly.

My current issue is the load time of my app due to the amount of images loading in one go.

Advanced thanks for any help :slight_smile:

6

So, I just had a small breakthrough. The same way in which I am async loading fonts, I can async load assets, my images, this has improved performance greatly.
This link is Expo example code showing how: https://github.com/expo/new-project-template/blob/master/App.js

Hope this helps.

1 Like
7

@philipjc_apacio can you provide some more example code on how to finish this process? I tried implementing the example code and the images won’t even load. I went as far as cloning the repository and loading it from scratch and the app will not get past the “AppLoading” state as the images are never even cached.

8

Hey, cruz. Sure, I can show you how I did this. I performed my loading inside componentWillMount using an async await function. My render shows the loading spinner while the loading is happening. At the end of the async function I call navigate to the first screen.

  export default class AppLoading extends Component {

   async componentWillMount() {

    await Asset.loadAsync([
      require('../assets/img/backgrounds/record_store_x2.png'),
      require('../assets/img/backgrounds/place_collaborate_x2.png'),
      require('../assets/img/backgrounds/inovate_x2.png'),
      require('../assets/img/backgrounds/location_x2.png')
  ]);
2 Likes
9

Thanks @philipjc_apacio,

So then do you just require the image source and use it another component? For example:

const myImageUrl = require('../assets/img/backgrounds/record_store_x2.png')

class MyComponent extends Component {
  render () {
    return (
      <Image source={myImageUrl} />
    )
  }
}
10

For right or wrong, I am yet to discover, I still just require the image in the file I am using it. I guess you could pass them as props if you wanted. I just kept all my requires in the component pages.

11

OK I will try tonight once I get home from work and let you know if it works or not!

12

If you are using Image.prefetch(...) to cache images, then try adding cache: 'force-cache' to your image source.

Image.prefetch({uri: 'https://url.com/img.jpg'});
// ...
<Image source={{uri: 'https://url.com/img.jpg', cache: 'force-cache'}} />
1 Like
13

For remote URIs, you shouldn’t rely too much on prefetch (even though it does fit some use cases). I wrote about it at 5 Things to know about Images in React Native | by William Candillon | Medium

14

@philipjc_apacio Great Tip! I’ve implanted your code, works great. Thank you so much.

15

I tried all ways to improve the speed of loading, here is my treasury experience:

  1. prefetch is only useful if you got your images in your asset!!! if you want to get images show from a web url, I beg you not using it.

  2. expo users cannot do nothing with react-native-fast-image. hope you can merge it in, my dear expo engineers.

3.images show from a web url - git clone following example and playground with it! that make your images show as a rocket do - greatly awesome fast!!!
https://github.com/jdrouet/expo-image-cache-example.git

16

problem persists for ios