5 Things to know about Images React Native

The more I work with React Native images, the more I find it tricky. I wrote about , and . In and , I’m using . You can see it in action below. Image Caching without Expo with Expo React Native Sketch Elements React Native Fiber react-native-expo-image-cache Progressive image loading and caching in . React Native Sketch Elements react-native-expo-image-cache is new, fits well in my projects but might not be flexible enough yet to fit your requirements. If it doesn’t, please let me know in order to make this project evolve in the right direction. And in the meantime, you will find below a list of fives things you ought to know about Images in React Native. Don’t use prefetch() React Native provides out of the box which can be useful to pre-load images but in some cases but it is somewhat inadequate. Image.prefetch You really need the image to be present locally in order to avoid any flickering effect when loading it. It also allows to have more control over the cache of images. In the example below, you see the difference from using the Image cache versus serving the image locally. Image.prefetch With prefetch on the left and with cache on the right You might also need to display your image in a different component than . For instance in the example below we use which only works for local paths and or data URIs. Use ExpoKit So you need to store images locally. If you use expo already, there is a out of the box. If your project is detached, the library seems to has lost its main contributor. Last time I used it, it had some issues. It might be worthwhile to add ExpoKit as a dependency of your project even if you are "detached" from the get go. ExpoKit ships many other great components, including which can be natively animated in case you also want to implement progressive image loading. File system library react-native-fetch-blob BlurView Dealing with concurrency on Android Many components might display the same image at the same time. And doing a operation on Android will return true even if the file download is not finished. This means that you need to implement an observer pattern to download each image only once and be notified when the image download has finished. In , this is how the API looks like: Filesystem.exists(localURI) react-native-expo-image-cache import {CacheManager} from "react-native-expo-image-cache";// Remote URIconst {uri} = this.props;CacheManager.cache(uri, localURI => this.setState({ uri: localURI })); Below is the implementation of the observer: static async cache(uri: string, listener: Listener): Promise { const {path, exists} = await getCacheEntry(uri); // Is the image is already downloading, we just listen if (isDownloading(uri)) { addListener(uri, listener); // If it's not downloading and it exists, we serve it } else if (exists) { listener(path); // Else, we download the image and notify everyone when done } else { addListener(uri, listener); await FileSystem.downloadAsync(uri, path); notifyAll(uri, path); unsubscribe(uri); }} Progressive image loading Every-time an image URI is stored in the database, store it’s base64 preview with it. This will allow you to load the image super smoothly. Below is an example: { preview: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", uri: "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/b47b03a1e22e3f1fd884b5252de1e64a06a14126.png?alt=media&token=d636c423-3d94-440f-90c1-57c4de921641"} Now you can immediately display a blurred version of the preview and decrease the blur to 0 when the full version of the image is loaded. On iOS, the from ExpoKit conveniently supports the native animation driver. An Android however, it doesn't default to an animated opacity view. I made a pull request to in order to test a water and find out if the team would be open to have an implementation of that would be more symmetrical on both platforms. In the meantime you can implement your own. This is how it looks like in : BlurView.android.js react-native-expo-image-cache // intensity is an Animated.Valueconst opacity = intensity.interpolate({ inputRange: [0, 100], outputRange: [0, 1]});{ Platform.OS === "ios" && ( )}{ Platform.OS === "android" && ( )} There is a serious bug in . You might be tempted to set a URI in the state of your image component: set it to the preview data URI and then to the full image when loaded. Problem is, sometimes the image won’t refresh. You can use to force its refresh but it will flicker. Solution? Superpose the full image to the preview. Again, this is how it looks like in : This one key react-native-expo-image-cache { // If show the preview if it exists hasPreview && ( )}{ // If the image is loaded, we show it on top // this.onLoadEnd is used to start the deblurring animation (uri && uri !== preview) && ( )} That’s all Folks! We will never finish to talk about Images in React Native. This is my top 5 list. Am I missing some items? Please let know and in the meantime, Happy Hacking 🎉 Looking for beautiful UI kits? I’m implementing all screens and components from Sketch Elements in React Native. You can get it . I’m also posting live coding sessions and tutorials on my . here Youtube channel _After two months in the making, React Native Sketch Elements is finally here. React Native Elements covers a wide…_hackernoon.com React Native Sketch Elements