CODEWITHSUNDEEP
javascriptreactjsreact-native
fagner nunes
fagner nunes

Reputation: 57

PreFetch images React native

I have a Component in which the background changes every 5sec. The way I've implemented there is a small delay between images being loaded. I am looking for a way to prefetch the images upon the component mounting instead of when the URL state changes.

componentDidMount(){
    setInterval(() => {
        let nextStorie = this.state.currentStory + 1
        this.setState({ url: this.state.listOfUrls[nextStorie].url, currentStory: nextStorie })
    }, 15000)
}
return (
    <ImageBackground source={{ uri: this.state.url }}>
        <Content />
    </ImageBackground>
)

Upvotes: 1

Views: 597

Answers (1)

William Brochensque junior
William Brochensque junior

Reputation: 2972

You probably can pre-load your list of images using react-native-preload-images

Use it like as follow:

import { preloadImages, PreloadedImage } from 'react-native-preload-images'

[...]

componentDidMount(){
  const images = [
    {name: 'pic1.png', uri: 'https://mypics.com/pic1.png'},
    {name: 'pic2.png', uri: 'https://mypics.com/pic2.png'}    
   ];

   preloadImages(images);
}

[...]

Upvotes: 1

Related Questions