react-native-blurhash

Blurhash

🖼️ Give your users the loading experience they want.

Install via npm:

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

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.

The algorithm was created by woltapp/blurhash, which also includes an algorithm explanation.

Example Workflow

blurha.sh This is how I use it in my project: A user uploads images from the react native app to firebase In firebase, I have a storage trigger function that generates a blurhash string from the uploaded image using the encoder from the C implementation. (You can also use the TypeScript implementation if you don't care so much about performance) After I generated the blurhash string, I set this as a property on my post document in Firestore 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. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32. See: performance	❌	32
decodeHeight	number	The height (resolution) to decode to. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32. See: performance	❌	32
decodePunch	number	Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders.	❌	1.0
resizeMode	'cover' | 'contain' | 'stretch' | 'center'	Sets the resize mode of the image. (no, 'repeat' is not supported.) See: Image::resizeMode	❌	'cover'
All View props	ViewProps	All properties from the React Native View. Use style.width and style.height for display-sizes.	❌	{}

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}}
    />
  );
}

See the example App for a full code example.

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. By increasing the decodeWidth and decodeHeight props, the performance decreases. I'd recommend values of 16 for large lists, and 32 otherwise. Play around with the values but keep in mind that you probably won't see a difference when increasing it to anything above 32.

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 1186 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
• woltapp/blurhash of course