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) => {
this.setState({
listLoaded: true,
changeLang: this.onChangeLang.bind(this),
featuredList: Array.from(responseJson.featured),
…
I am using the sample code from the Expo docs:
https://docs.expo.io/versions/v32.0.0/guides/preloading-and-caching-assets/
My problem is that my images from state return as undefined.
I have tried to add
.then(this._loadAssetsAsync)
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.