Smart Images in React Native

In order to avoid common pitfalls when dealing with React Native images, you should also checkout the story below. All these recipes are available in the npm package. Update. react-native-expo-image-cache medium.com 5 Things to know about Images React Native Images & React Native is a delicate topic. , I needed to cache image efficiently as well as displaying them using a progressive image loading technic. On top of that, when a user is uploading a picture, it was required to upload a preview of the picture alongside in order to provide a progressive loading effect for that picture. In a recent project Progressive image loading in the Fiber starter kit This story contains the following the recipes: Progressive image loading Building picture previews client-side before upload Cache images Progressive Image Loading In react web, progressive image loading is fairly trivial. There are many packages available for that task and . In the native world, things are a bit more tricky. You need to find a component that can provide a blur effect to your image as well as being able to provide motion to the blur effect using the . Expo provides the which only works on iOS but can easily be animated. There is that has native dependencies but provides support for Android and cannot be animated via the Animated API at the moment. Below is a simple implementation of a component. We first show the preview, use to loading the image, and then decrease the blur intensity once the image is ready. I wrote my own Animated API BlurView component another component ProgressiveImage Image.prefetch You can play with the component above . here Example of a simple for image loading. expo snack Build Preview Before Upload To provide a progressive image loading effect to a picture, you need a small preview of that picture. This preview can easily be generated server-side. You can also build this preview client-side using . Why do it client-side? It allows you to provide an upload feature to your app without writing any server-side code. You build the preview on the client and uploading both picture to a storage as a service provider such as S3 or Firebase. The code snippet below builds a 50x50 preview from a user provided image. ImageEditor Caching Images In some cases, 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 from , you see the difference from using the default Image cache versus serving the image locally. ting Without cache on the left and with cache on the right The cache function is very simple, we create a unique local path based on the hash of the file URI. If the image exists, we return its local path. If it doesn’t exist, we download it and return the local path. Putting it all together I ended up writing a single Image component that provides the progressive image loading technic et the caching strategy described above. The standalone implementation can be seen . Would you like to see this component available as an npm package? When it comes to displaying images in React Native, do you have other recipes that you would like to share? here Happy Hacking 🎉 Interested by React Native Fiber? Check out the link below. _I recently built a new version of the React Native Fiber starter kit that integrates with Firebase. You can check it…_hackernoon.com Live Coding — Integrating Firebase in React Native