CODEWITHSUNDEEP
imageperformancereact-native
mss
mss

Reputation: 177

What is the best for Image in React-Native?

I'm using React-Native and Expo.

Expo gives me many functions that I can use only in JS. (Facebook login, Location, Contact, etc...)

I would like to launch both android and ios so I decided to use expo and maybe it's well for my app.

But I have a worry. My app displays many images. So, I think about performance. I've found famous component named react-native-fast-image but I have trouble including it in my current project.

Is it okay if I use the basic React Native Image component for my scenario. Would it affect performance?

Upvotes: 0

Views: 4038

Answers (3)

K.Wu
K.Wu

Reputation: 3633

  1. As [Murilo Varela][1] mentioned, you should definitely think about preloading and caching images. React Native's own Image has a method called Image.prefetch(url) will allow you to do so. This improves your app's performance in terms of user experience.

  2. There's another way to improve your app's performance in terms of how much memory you app eats while running, I think this is the one you're looking for. First, take a look at a typical social app, such as Twitter. The profile picture and the 4 images are small, their real sizes must be bigger. If you tap on those images, you'll enter the full screen mode and therefore, view the high resolution version of them. But there is a chance that a user is not interested in these 4 pictures, he will not tap on them at all, but skip them. Therefore, why should we download the original versions of those images? Those images could be several mega bytes, but users will not even view them. Hence, we should generate a thumbnail for each image, display the thumbnails like the ones above, only when user tap those images and enter full screen mode should we start to download the original images.

I have experience in Firebase but not in AWS, but I googled it, you can absolutely do that. If you're interested, let me know, I can certainly introduce generating thumbnails with Firebase, but if not, you can google how to do it in AWS. Either way, I think you should definitely think about including thumbnails in your app, it is used by every app you've heard of

Upvotes: 1

Haswin
Haswin

Reputation: 707

As per the general explanation for using react-native-fast-image, React Native's Image component handles image caching similar to browsers for the most part. If the server is returning proper cache control headers for images you'll generally get the sort of built in caching behavior you'd have in a browser.

However using the default Image component in your scenario will lead to :

  • Flickering.
  • Cache misses.
  • Low performance loading from cache.
  • Low performance in general.

Nevertheless you can also use Image.prefetch(url) in native image component to prefetch the image.

Upvotes: 0

Murilo Varela
Murilo Varela

Reputation: 11

Once you are downloading images, you should start thinking of preloading and caching your assets. You can find some information about how to do that with Expo resources in the link below:

https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets.html

Upvotes: 0

Related Questions