Local Images Not Appearing in iOS Simulator

Please provide the following:

  1. SDK Version: ~38.0.8
  2. Platforms(Android/iOS/web/all): ios
{
    "expo": {
    "name": "infoViz",
    "slug": "infoViz",
    "version": "1.0.0",
    "orientation": "landscape",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "bundleIdentifier": "com.infoviz",
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

I’m developing an application with over 40 static images that need to run stored on the application. The images appear using the standard require conventions when I build and push onto Expo as a standalone app; however, I cannot get them to appear when I run the app in the iOS simulator locally. I would try to take the pre-caching route, but I have the images stored in separate .js files with other information, like title, description, keyPoints, etc., and am trying to display them as a dynamically within the app. Is there any easy way to do this?

From my assets folder, I can load my icon.png. I had this from a previous Expo web project and copied it over to replace the existing blank version from CRNA. It seems to be the file itself and not the name that will load it because I have moved one of the .png files that I use into the same folder level and have even changed its name to icon.png to see if it would work and it still doesn’t.

Here’s a code snippet so you can see what I’m using to debug:

   <TouchableHighlight> 
    <Image
        style={{ width: 500, height: 300 }}
        source={require("../../assets/icon.png")} //Works with existing icon, 
      />                                          //favicon, and splash, but nothing else
    </TouchableHighlight>

Any advice would be greatly appreciated.

**Short Update: I’m trying to use the loadAsync method but it’s still not working. This is what I have in my App.js: (The images files have arrays with the images broken down by category and the require statements are held in arrays of dictionaries within each category)

//Caching images so that the appear`
  async function _loadImagesAsync() {
    const imageAssetsEN = Asset.loadAsync(
      imagesEN.map((sections) => {
        sections.list.map((batch) => {
          return batch.img;
        });
      })
    );
    const imageAssetsES = Asset.loadAsync(
      imagesES.map((sections) => {
        sections.list.map((batch) => {
          return batch.img;
        });
      })
    );
    await Promise.all([...imageAssetsEN, ...imageAssetsES]);
  } 

  //Waits for all images to be cached before loading
  const [dataLoaded, setDataLoaded] = useState(false);
  if (!dataLoaded) {
    return (
      <AppLoading
        startAsync={_loadImagesAsync}
        onFinish={() => setDataLoaded(true)}
      />
    );
  }
1 Like

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