React Native local images load slowly

Question

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.

Answer 1

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

Answer 2

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!