Creating Instagram/Medium like responsive images in React-Native

You might have seen those blurry images on Medium or Instagram, like this 👇

Don’t glue your eyes to this image, this will remain like this forever 😂

What’s the need for those effects with images

Those blurry effects are intentional and are meant for better User experience. Usually images are bit heavy and takes some time to load. So showing nothing in place while the image is being loaded makes for bad user experience.

How to create a good user experience with images

The best option is to have an original image and a smaller lower quality thumbnail for that image that would show up while the original image is being loaded.

For some cases this method 👇 is better, or at least for my case

But showing that lower quality thumbnail straight away would throw a negative impression on user that the image quality isn’t good especially when the original image is of very high quality, remember First impression is the last impression. So as to visualise the difference between the thumbnail and the original image and to tell the user that the original image still isn’t loaded, we introduce the blurry effect. This way we end up showing something while the image is loaded and also the user knows that the image isn’t loaded yet. For my project this approach aligned to our needs.

Let’s achieve this effect with React-Native

It’s enough philosophy now, let’s get into the developer shoes and find a way out. Surprisingly it’s very very simple, but since React-Native version 0.46. The reason being that the blurRadius which we will use for the blurry effect didn’t supported android until version 0.46, it started offering support for both ios and android since version 0.46.

Basically we will render two overlapping images with same dimensions. The thumbnail will show over the original image because thumbnail will render earlier owing to its smaller size. Here is the snippet showing how to render two overlapping images:

<Image 
    style={{height:'75%', width:'75%', position:'absolute'}}
    source={{uri:'https://s3-us-west-   2.amazonaws.com/ticketmgmt/profileThumb_1506777767750.jpg'}}
    blurRadius={15}
/>
<Image
    style={{height:'75%', width:'75%'}}
    source={{uri:'https://s3-us-west-2.amazonaws.com/ticketmgmt/profilePic_1506777767750.jpg'}}
/>

The above code will render 2 overlapping images. Now we want to remove the thumbnail image once the original images loads completely. To check whether the original image has been loaded we will use react-native Image’s onLoad method which will be called once the image loads completely. We will use a boolean state variable to remove the thumbnail image once the original image loads:

state={
  originalImageLoaded:false
}
{
   this.state.originalImageLoaded ? null :
    <Image 
        style={{height:'75%', width:'75%', position:'absolute'}}
        source={{uri:'https://s3-us-west-          2.amazonaws.com/ticketmgmt/profileThumb_1506777767750.jpg'}}
        blurRadius={15}
    />
}
<Image
    style={{height:'75%', width:'75%'}}
    source={{uri:'https://s3-us-west-2.amazonaws.com/ticketmgmt/profilePic_1506777767750.jpg'}}
    onLoad= { () => this.setState({originalImageLoaded: true}) }
/>

Now, the thubmnail will be removed once the original images is loaded.

I have added some simple animations to remove the snappy behaviour if any that occurs when the thumbnail is removed and original image is shown. Finally we will get a behaviour like this 👇

See you again soon, till then keep your code and environment clean and green ♻️.