Modern Image Loading Experience For React Native – Blurhash

Description:

BlurHash is a compact representation of a placeholder for an image. Instead of displaying boring grey little boxes while your image loads, show a blurred preview until the full image has been loaded.

Install & Import:

# NPM
$ npm i react-native-blurhash --save

import { Blurhash } from 'react-native-blurhash';

Basic usage:

export default function App() {
  return (
    <Blurhash
      blurhash="hash here"
      style={{flex: 1}}
    />
  );
}

Preview: