How to preload an image from local in react native with Expo

Question

I'm doing a project but i'm stuck when loading a background image.

<Image
    source={Images.welcomeBg}
    style={styles.container}
  >
...
</Image>

But Image spends 1-2 second to load it I'm doing follow this link It still doesn't work right now. Plz help me fix this bug

Answer 1

you can do this

make new called cachedAssetAsync.js (sure you can choose whatever name you like)

import { Asset, Font } from 'expo';

export default function cacheAssetsAsync({
  images = [],
  fonts = [],
  videos = [],
}) {
  return Promise.all([
    ...cacheImages(images),
    ...cacheFonts(fonts),
    ...cacheVideos(videos),
  ]);
}

function cacheImages(images) {
  return images.map(image => Asset.fromModule(image).downloadAsync());
}

function cacheVideos(videos) {
  return videos.map(video => Asset.fromModule(video).downloadAsync());
}

function cacheFonts(fonts) {
  return fonts.map(font => Font.loadAsync(font));
}

then in App.js or whatever your root component you use, can do like this

  async _loadAssetsAsync() {
    try {
      await cacheAssetsAsync({
        images: [require('./assets/images/exponent-icon.png')],
        fonts: [
          { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf') },
          MaterialIcons.font,
        ],
        videos: [require('./assets/videos/ace.mp4')],
      });
    } catch (e) {
      console.log({ e });
    } finally {
      this.setState({ appIsReady: true });
    }
  }

you can do the logic when appIsReady is false shows loading screen then when appIsReady is true show the actual screen. And sure you can do this in only one file.

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