react-native-blurhash

Blurhash

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 implementations and make them usable in React Native.

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, the blurhash property can be used to display the loading placeholder.

About

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, width, height or punch) has changed.

Name	Type	Explanation	Required	Default Value
blurhash	string	The blurhash string to use	✅	undefined
width	number	The width to decode to. You can still up-/down-scale it in React	✅	undefined
height	number	The height to decode to. You can still up-/down-scale it in React	✅	undefined
punch	number	The punch to use for decoding.	❌	1

Read the algorithm description for more details

iOS Screenshot	Android Screenshot

Resources

• this medium article. jesus christ amen thanks for that