CODEWITHSUNDEEP
reactjsreact-nativeexpo
Simone Romani
Simone Romani

Reputation: 435

React Native local images load slowly

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.

Upvotes: 14

Views: 17053

Answers (5)

OReilly
OReilly

Reputation: 153

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

Upvotes: 4

Hamza Hmem
Hamza Hmem

Reputation: 596

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

Upvotes: 0

Vikas chhabra
Vikas chhabra

Reputation: 325

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!

Upvotes: 3

Bhojani Asgar
Bhojani Asgar

Reputation: 103

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

Upvotes: 3

ItSNeverLate
ItSNeverLate

Reputation: 749

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}
/>

Upvotes: -3

Related Questions