13

I'm building an app using React Native with Expo. Everything works fine except the images, they load correctly but it takes about 2 seconds to load, and it's weird because all the images are local images and they are light too, so they should load instantly. This problem occurs also after I build and get the .apk on my android device so the images are always stored locally.

This is a portion of the main page of my app:

...
   <View style={styles.bottomItem}>
     <View style={styles.bottomItemInnerFirst}>
       <TouchableOpacity onPress={() => this.props.navigation.navigate('SecondPage')}>
         <Image
           source={require('../assets/images/iconT.jpg')}
           style={{width: '100%', height: '100%'}}
           resizeMode='contain'
         />
       </TouchableOpacity>
     </View>
   </View>
...

The problem occurs not only with the Image tag but also with ImageBackground. I've looked at this doc too https://docs.expo.io/versions/latest/guides/preloading-and-caching-assets/ but I'm using local images and I don't know what to do to make it work.

Simone Romani
  • 415
  • 2
  • 6
  • 20
  • Looks like images are served from expo's server. Although old, this thread has a solution which improves performance (loading assets via `Asset.loadAsync`) https://forums.expo.io/t/images-load-really-slow/2106/6 - hope it helps! – scgough Dec 16 '19 at 12:59
  • 2
    I've tried that solution but it doesn't work. Also images aren't served from expo's server after the build. If I install my app without internet and open it, it shows all the images but still after 2 seconds. I don't really know why it happens, thanks for your help anyway! – Simone Romani Dec 16 '19 at 15:29
  • 2
    Are you sure the problem is loading the images and not rendering them? I've had performance issues before with TouchableOpacity. Try commenting it out and see if that helps. – Joshua Obritsch Dec 23 '19 at 15:14
  • Also, take a look at this thread: https://stackoverflow.com/questions/47320523/background-image-load-slowly-in-react-native/47321456 – Joshua Obritsch Dec 23 '19 at 15:22

5 Answers5

4

2023 Answer: Expo has just released expo-image. Quick highlight of some notable features:

  • Supports every image format (except ICNS on Android)
  • Uses disk / memory caching
  • Uses performant SDWebImage and Glide under the hood

Here's a super nice DX feature of expo-image mentioned on their blog:

It also includes affordances for common image patterns that typically require ad hoc one-off implementations for your app or additional libraries — placeholders, transitions, and blurhash support.

Here's a link to the docs: https://docs.expo.dev/versions/v48.0.0/sdk/image/

Here's a demo from one of the devs: https://twitter.com/i/status/1605240759342739456

OReilly
  • 83
  • 4
3

you can install new dependencies

npm install react-native-fast-image and change Image into FastImage

for reference, you can visit this website:- https://www.npmjs.com/package/react-native-fast-image

this dependency will increase the loading of your Image

kyun
  • 9,710
  • 9
  • 31
  • 66
Bhojani Asgar
  • 93
  • 1
  • 10
  • 2
    react-native-fast-image repository looks dead, be careful choosing this path https://github.com/DylanVann/react-native-fast-image/issues/685 – cengaver Jun 26 '22 at 01:29
  • @cengaver there has been some activity after your comment and overall the main functionality to offline cache and display images work "fine" so far. – Sercan Samet Savran Jan 29 '23 at 00:43
3

Asset Optimisation can also help you in expo. You can try the below commands to optimize assets in your project.

npm install -g sharp-cli
npx expo-optimize

Thanks!

Vikas chhabra
  • 281
  • 1
  • 8
0

Please consider following these steps:

  1. First of all, we need to make sure that your images are not so big in size, because sometimes you find some applications (mostly photographic ones, kindly take a look at this link) are loading images with 2MB or even bigger, that's why they are slow, however the best image size range is between 100KB to 400KB.

  2. Use one of the caching libraries to provide a performance boost in the loading time as such: react-native-progressive-fast-image or react-native-fast-image, be aware that these packages consume memory.

  3. Please be cautious about inline styling and JSX callbacks, each re-render it will create another callback reference and another style Object (this is not very useful for your case but it will increase a little bit the JS thread FPS).

Hamza Hmem
  • 502
  • 5
  • 11
-2

If you are using Image from react-native-elements, you have to set the transition property to false.

<Image 
       source={require('../assets/images/iconT.jpg')}
       transition={false}
/>
ItSNeverLate
  • 533
  • 7
  • 8