Does React Native cache remote images?

user_437383 0
Viewed 3711

Does React Native cache remote images?

I have an app that downloads dozens of images remotely. These images seem to cache in my app, however, I'm not sure if it's the OS that's doing that by default, or if React Native is caching them.

If it's React Native, is there any way to customize how long they're cached? Or does the remote server define that?

react-native caching android ios
2 Answers

You may be interested in my higher order component module that adds performance related image caching and "permanent cache" functionality to the native <Image> component. It's cross platform whereas the standard caching functionality for <Image> is different on android vs ios and seems to change a lot in addition to having undocumented behavior.

React Native Image Cache HOC

Tl;DR Code Example:

import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} />
        <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} />
      </View>
  );
  }
}

is there any way to customize how long they're cached

The first image in the above code example will be cached until the total local cache grows past 15 MB (by default) then cached images are deleted oldest first until total cache is below 15 MB again.

The second image will be stored to local disk permanently. People use this as a drop in replacement for shipping static image files with your app.

user_8202730
Related