React Native implementation

[mrousavy]

UPDATE: I've created a native UI module for iOS (Swift) and Android (Kotlin) myself, check it out here: mrousavy/react-native-blurhash

Hi! The library is really awesome, but I can't seem to find a way to use it in React Native (with the blurhash-typescript library).
The decode(...) function returns a raw pixel array (UInt8ClampedArray), but the <Image> component can't be initialized with a pixel array. (see: react-native Image.source)

[espipj]

I'm happy to help with this, I've been trying by using react-native-canvas but it is not performant at all...
It would be amazing a decodeToBase64 method, it would be quite easy from there to give support for React Native... 📱
Another approach would be calling the native libs (Kotlin and Swift) I guess that would be more performant...

[mrousavy]

@espipj yes, I've thought about using the native APIs aswell by implementing this extra initializing method in the existing, already very fast, fast-image component library. I've also created an issue over there

Unfortunately I don't have the time right now to create such a pull request, from what I understood though it doesn't seem that hard when I looked into the native code of fast-image.

[espipj]

Hey @mrousavy I got something working on iOS using the swift implementation and linking it to React Native

I'm working on it at https://github.com/espipj/react-native-blurhash
I might need some help as my Swift and Kotlin experience is none
cc/ @LuisRodriguezLD

[schiller-manuel]

@mrousavy I implemented blurhash using OpenGL so that it can be used in React Native.
The package is available here: https://github.com/schiller-manuel/gl-react-blurhash

[mrousavy]

@schiller-manuel that looks really interesting! your idea of using this would be to render this GL View as a placeholder until the image (which is a separate, invisible component) has been loaded, to then swap the GL View with the Image view, correct?

[schiller-manuel]

yes, that's how I'd use it. In the linked example the onPress event triggers the swapping of placeholder and image, but it could also be the onLoad event of the actual image.

[mrousavy]

@espipj @schiller-manuel I've just created a native UI module for this. See: https://github.com/mrousavy/react-native-blurhash.

Currently, I've only implemented iOS, working on Android right now. It uses the default Image component, I still need to create extra properties like resizeMethod, resizeMode, and maybe borderRadius. If you could help me out on that and create some PRs, I'd gladly accept them.

In short: It's a lightweight component that just renders the Blurhash Image in react native. No need for react-native-unimodules, gl-react, gl-react-native, buffer, ...

[mrousavy]

I did it. It's working on Android and iOS. Uses the lightweight native Image components, and no dependencies. I've also added an encoder so you can encode straight out of your react native app. For decoding, I also added an asynchronous decoder (decodeAsync={true}) so the UI thread never gets blocked.

Here's the link: https://github.com/mrousavy/react-native-blurhash
Or npm: https://www.npmjs.com/package/react-native-blurhash

@woltapp do you want to mention this library in the README in case anyone else is searching for a React Native implementation?

[siddhatiwari]

Is there a react-native library that doesn't require native linking?

[schiller-manuel]

@siddhatiwari you can use gl-react-blurhash in Expo if this is what you want to do.

[mrousavy]

@siddhatiwari while the expo library works, you should keep in mind that the performance is not as good as my native module, since it uses the JS thread for decoding, which is slower and blocks any other JS code execution. @schiller-manuel did an awesome job implementing this without native code, but it's just limited performance wise per design. Always choose the right tool for the job.

[siddhatiwari]

@mrousavy @schiller-manuel Thanks for the quick response! Will check out gl-react-blurhash.

[jerry-git]

@woltapp do you want to mention this library in the README in case anyone else is searching for a React Native implementation?

Hi @mrousavy! Firstly, sorry for the super late reply. Secondly, yes let's have it documented in the readme. Would you mind providing a PR for that? 🙂

[mrousavy]

@jerry-git sure, here you go: #176

[Thisen]

Closing, as this is now third-party :)