Preload Caching Assets After componentDidMount()

I am looking for an example of using the Preloading & Caching Assets code after a componentDidMount() that returns a dynamic list of images from the server. The example code works great for caching static assets and I have this configured correctly. Is there any example available for doing this with the AppLoading after the component has been mounted and the state has been set with the dynamic images?

my code looks like this:

componentDidMount() {
const siteUrl = this.state.siteUrl
const apiUrl = siteUrl + ‘api/v1/json_main/apiKey=***/’
return fetch(apiUrl)
.then((response) => response.json())
.then((responseJson) => {
listLoaded: true,
changeLang: this.onChangeLang.bind(this),
featuredList: Array.from(responseJson.featured),

I am using the sample code from the Expo docs:

My problem is that my images from state return as undefined.

I have tried to add
after the setState and the images do not return as undefined. However, the images that are supposedly being cached do not seem to be cached when you load the appropriate pages where they are located. The console.log is showing the correct url. For example, the contact page image is supposedly cached but when you load the Contact screen it still takes a moment for it to load just as it did before.

1 Like

I would really love some insight into this feature from Expo. I have come to the conclusion that maybe this module isn’t really meant to do what I need it to do since the AppLoading is only available before componentDidMount() where I call my API. I also noticed that it didn’t look like it was caching the web images the way I thought it would. Is there anyone on here that might be able to give me some insight on caching web images? There is another module for image caching on github that is popular, but I personally like to integrate features that are already included with Expo since I am running in Expo. Any help or insight would be greatly appreciated!

1 Like

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