Why does asset.loadAsync fail?

Expo SDK
1

I’m trying to preload an image of my app as shown in the code below.

    const imageAssets = Asset.loadAsync([
      require("./assets/images/appGuide/icon.png")
    ]);
    return Promise.all(imageAssets, cacheFonts);

However, the error is as follows.

Unable to resolve module `./assets/images/appGuide/icon.png` from /*****/LoadingScreen.js`

The same sample error in the expo doc example. Did I misunderstand?

2

Hey @chanho,

Can you share the code where you’re attempting to use this in your LoadingScreen.js?

Cheers,
Adam

3

@adamjnav
Sure. here is my code. It is mostly the same as the sample code in expo docs.

constructor() {
    super();
    this.state = {
      isReady: false
    };
  }

render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._cacheResourcesAsync}
          onFinish={this._finishLoading}
          onError={Sentry.captureException(
            new Error("[LoadingScreen][Expo.AppLoading]App Loading Error")
          )}
        />
      );
    }

    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color={Colors.backgroundColor} />
      </View>
    );
  }

  _cacheResourcesAsync = async () => {
   
    const images = [
       require("./assets/images/appGuide/icon.png"),
       require("./assets/images/common/blackCloseIcon.png"),
    ];

    const cacheFonts = await Font.loadAsync({
      NanumBarunGothic: require("../../assets/fonts/NanumBarunGothic.ttf"),
      TitleMedium: require("../../assets/fonts/TitleMedium.ttf")
    });

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

    return Promise.all(cacheImages, cacheFonts);
  };

  _finishLoading = async () => {
    this.setState({ isReady: true });
    this.props.navigation.navigate("Login");
  };
4

Anyone know about this?

5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.