Please provide the following:
- SDK Version: ~38.0.8
- 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)}
/>
);
}