How To Cache Images in an Expo Managed React Native App

Author profile picture

@wagslaneLane Wagner

Bitcoinist, libertarian, atheist, cryptography fan, and founding father of http://qvault.io

Caching photographs in React Native will also be simple, even though you might be the use of Expo’s controlled workflow. The issue many devs run into is that React Native most effective helps caching photographs on IOS out of the field.

Fast Get started

Set up the module:

yarn upload react-native-expo-cached-image

Import the element:

import CachedImage from 'react-native-expo-cached-image';

Use the element in a render() approach:

<CachedImage isBackground supply=
/>
The CachedImage element has the similar props and API as React Native’s Symbol and ImageBackground elements. To use CachedImage as a background picture, simply cross in the isBackground prop:
<CachedImage isBackground supply=
/>

What Is It Doing?

CachedImage assists in keeping it easy. It downloads the picture to the consumer’s native filesystem the use of the SHA-256 hash of the URI. Then, on next renders and app makes use of, it lots the picture from the filesystem if it exists. This protects the consumer from the use of useless knowledge and experiencing sluggish load instances.

Tip: With a view to bust the cache, you’ll be able to append a question string or anchor textual content to the URI.

Code

As of writing, here’s the code, be happy to simply copypasta it if you do not want to put in the dependency:

import React,  Part  from 'react';
import  View, Symbol, ImageBackground  from 'react-native';
import * as FileSystem from 'expo-file-system';
import * as Crypto from 'expo-crypto'; export default magnificence CachedImage extends Part { state =  imgURI: ''  async componentDidMount()  const filesystemURI = watch for this.getImageFilesystemKey(this.props.supply.uri); watch for this.loadImage(filesystemURI, this.props.supply.uri);  async componentDidUpdate()  async getImageFilesystemKey(remoteURI)  async loadImage(filesystemURI, remoteURI)  render() 
}

Thank you For Studying

Feedback

Tags

The Noonification banner

Subscribe to get your day by day round-up of best tech tales!

(Visited 1 times, 1 visits today)

Leave a Reply