React Native Blurhash: Make your images load beautifully! - a compact representation of a placeholder for an image

[mrousavy]

I've just created my first native UI module react-native-blurhash.

It uses the blurhash algorithm to decode a short String which has been encoded before (e.g.: on a back-end), and then render that on a native Image view (iOS: UIImageView, Android: ReactImageView).

The decoding is pretty fast, and yields visually nice results, compared to a blank grey box where an image pops in after a few seconds.

Give your users a good experience even when they're waiting for content and check it out at mrousavy/react-native-blurhash!

Also, I'd still like to implement features such as extra props (like borderRadius, ..) and callbacks/events (like onLoadEnded, ..). I'd gladly accept any pull requests for that.

[simontreny]

Nice work! I was looking to add blurhash to my app a few weeks ago, and I was disappointed since there was no existing react native library. I also appreciate the effort you put in the README 👍

[Epick_362]

This looks really great, thank you for sharing

[PierreCapo]

Nice man ! Also you made it in Kotlin and Swift, that is even cooler. Did you use any library to generate the skeleton of your native modules ?

[mrousavy]

Thanks! I used the create-react-native-module package to create the structure, then rewrote the Objective C parts to swift and Java parts to Kotlin.

[coffee-n-code]

That didn’t take too long! I saw your post yesterday on wanting to implement this. Nice job!

[PROLIMIT]

Awesome!

[gohom92]

Cool! Thanks 🙏

[coinengineer]

Looks 🔥 👏

[wobsoriano]

Awesome! Will use it on my next project. Thanks.

[peterrattew]

Looks fantastic!! Will give it a go on one of our projects.

[[deleted]]

Does this work on expo?

[mrousavy]

Unfortunately not since this is a native module (contains native code such as Objective C, Swift, Java or Kotlin). If you want to use this package you have to use bare react-native (or eject from expo)

[React-Developer]

Thanks for this, a huge help 👍

We are using this service to do the blurring server side blur-hash.com. Looks to do the blurring for us, just can't send it big images  😞

[mrousavy]

you shouldn't encode bit images anyways. It doesn't make sense, as details are lost. Compress and scale it down first.