Blurhash — an image placeholder for React Native

Create automatically beautiful placeholders for remote images in your app

Most of the applications will need at some point to display remote images. And even if you optimize your remote images to have the smallest file size possible, host them on a CDN and use a better image module with preloading at some point your app will still behave like this

Wolt also had this issue and they decided to create Blurhash which is a (very short) string representation of the blurred version of the image. This string can be saved in a database and passed to the app in the same time with the main data therefore all the images can have a nice placeholder right from the start.

Once the image loads, you can add a small fade effect to from opacity:0 and the app will look amazing.

However there are a few steps to be taken to have this working

• you need to generate the hash string server side and save it to the database — here are various ideas for nodejs (I prefer to use sharp)
• you need to install the blurhash module for React Native built by Marc Rousavy and follow the instructions

Pros and Cons

• there is some work needed on the server side to prepare the hash for each image the app will load remotely. However there are a lot of implementations you can use so it should be an easy task (con?)
• your app will look gorgeous and there is no need for a default placeholder image. You can provide a default hash in case the decoding fails or the the remote hash is missing but still is better than loading an image. (pro)
• it doesn’t work with Expo Go — however with an expo development client it will work out of the box (con?)

Let me know your thoughts and if you know other solutions please get in touch :)