react-native-blurhash

Blurhash

Make loading not so boring.

npm i react-native-blurhash
cd ios; pod install; cd ..

BlurHash is a compact representation of a placeholder for an image. This is a native UI module for React Native to wrap the Blurhash iOS and Android implementations and make them usable in React Native. See woltapp/blurhash

Example Workflow

In order to use the Blurhash component, you have to already have a Blurhash string. See the blurha.sh page to create example strings.

This is how I use it in my project:

1. A user uploads images from the react native app to firebase
2. In firebase, I have a storage trigger function that generates a blurhash string from the uploaded image using the TypeScript implementation
3. After I generated the blurhash string, I set this as a property on my post document in Firestore.
4. Now everytime a user loads a feed of posts from my Firestore database, I use a <Blurhash> component (with the post's blurhash property) over my <Image> component, and fade it out once the <Image> component's onLoadEnd function has been called.

Usage

The decoders are written in Swift and Kotlin, and are copied from the official woltapp/blurhash repository. I use caching techniques, to only re-render the (quite expensive) Blurhash image creation when one of the blurhash specific props (blurhash, decodeWidth, decodeHeight or decodePunch) has changed.

Name	Type	Explanation	Required	Default Value
blurhash	string	The blurhash string to use. Example: LGFFaXYk^6#M@-5c,1J5@[or[Q6.	✅	undefined
decodeWidth	number	The width (resolution) to decode to. This is not the same as the React Component's Style width! Higher values decrease performance, 32 is plenty!	❌	32
decodeHeight	number	The height (resolution) to decode to. This is not the same as the React Component's Style height! Higher values decrease performance, 32 is plenty!	❌	32
decodePunch	number	Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders.	❌	1.0
All View props	ViewProps	All properties from the React Native View. Use style.width and style.height for render-widths.	❌	{}

Read the algorithm description for more details

Example Usage:

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

export default function App() {
  return (
    <Blurhash
      blurhash="LGFFaXYk^6#M@-5c,1J5@[or[Q6."
      style={{flex: 1}}
    />
  );
}

Example App

iOS Screenshot	Android Screenshot

To run the example App, execute the following commands:

cd react-native-blurhash/example/
yarn
cd ios; pod install; cd ..
npm run ios
npm run android

Performance

The performance of the decoders is really fast, which means you should be able to use them in collections quite easily. Make sure to expect a small delay though, since it is still a complex decoding algorithm. By increasing the decodeWidth and decodeHeight props, the performance decreases. If you don't care much about the render resolution, use lower decodeWidth and decodeHeight values (32 pixels wide is plenty!), and increase style.width and style.height values (or upscale it any other way like flex, scale, ...).

With both decodeWidth and decodeHeight set to 16 the image decoding takes about 2 milliseconds on iOS. For comparison, setting both decodeWidth and decodeHeight to 400 increases the decoding time to around 1.186 milliseconds.

At the moment, the Android decoder is faster than the iOS decoder, I'm not quite sure why.

Resources

• this medium article. jesus christ amen thanks for that
• Native Modules documentation, especially the Swift part