A Image Caching component that I use in react-native show a thumbnail while image is being loaded and also download it to device to allow quick loading the next time

CachedImage.js

import React, {useState, useEffect} from 'react';
import {
  Image,
  View,
  StyleSheet,
} from 'react-native';

import RNFetchBlob from 'rn-fetch-blob';
import isEmpty from '../../utils/is-empty';
import shorthash from 'shorthash';

const ProgressiveImage = props => {
 
  const {thumbnailSource, source, style} = props;

  const [imageUri, setImageUri] = useState(props.source.uri);

  //Make an async useEffect (Picked from SO. Don't trust this code :p)
  const useEffectAsync = (effect, inputs) => {
    useEffect(() => {
      effect();
    }, inputs);
  };

  useEffectAsync(async () => {
    if (!isEmpty(imageUri)) {
      const uri = await downloadImage(imageUri);
      setImageUri(uri);
    }
  }, []);

 

  return (
    <View style={styles.container}>
      <Image
        {...props}
        source={thumbnailSource}
        style={style}
        blurRadius={2}
      />
      
      <Image
        {...props}
        source={{uri: imageUri}}
        style={[styles.imageOverlay, style]}
      />
    </View>
  );
};

const downloadImage = async imageUrl => {
  
  let filename = `image-cache-${shorthash.unique(imageUrl)}`;
  let path = RNFetchBlob.fs.dirs.DocumentDir + '/' + filename;
  
  console.log('Checking if Image exists.....');
  let uriToReturn = null;
  try {
    const exist = await RNFetchBlob.fs.exists(path);
    console.log(`file ${exist ? '' : ' does not'} exist - ${path}`);
    if (exist) uriToReturn = 'file://' + path;
    else if (!exist) {
      console.log('Downloading Image.....');
      const res = await RNFetchBlob.config({
        fileCache: true,
        path,
      }).fetch('GET', imageUrl, {});
      uriToReturn = 'file://' + res.path();
    }
  } catch (err) {
    console.log(err);
  }

  return uriToReturn;
};

const styles = StyleSheet.create({
  imageOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0,
  },
  container: {
    // backgroundColor: '#e1e4e8',
  },
});

export default ProgressiveImage;

is-empty.js

const isEmpty = value => {
  return (
    value === null ||
    value === undefined ||
    (typeof value === 'object' && Object.keys(value).length === 0) ||
    (typeof value === 'string' && value.trim().length === 0)
  );
};

export default isEmpty;

Can you reproduce on CodePen?

@Shivendra30 I am not familiar with CodePen?

https://codepen.io/ - You can write your code here by choosing a react native environment. You can watch some YT videos to figure this out. Super easy

Once you do that, we can work on the same code.