Comments (15)
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?
from blurhash.
@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.
from blurhash.
@siddhatiwari you can use gl-react-blurhash in Expo if this is what you want to do.
from blurhash.
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...
from blurhash.
@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.
from blurhash.
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
from blurhash.
@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
from blurhash.
@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?
from blurhash.
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.
from blurhash.
@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
, ...
from blurhash.
Is there a react-native library that doesn't require native linking?
from blurhash.
@mrousavy @schiller-manuel Thanks for the quick response! Will check out gl-react-blurhash.
from blurhash.
@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? 🙂
from blurhash.
@jerry-git sure, here you go: #176
from blurhash.
Closing, as this is now third-party :)
from blurhash.
Related Issues (20)
- It takes really long in typescript HOT 4
- Why decoded blurhash is so big? HOT 2
- Unclear on the algorithm's use of DCT
- Language-agnostic test suite HOT 1
- Dedicated repos for different implementations
- encode of blurhash is blocking the rendering of the react page HOT 2
- Different hashes for same picture HOT 4
- ES module import issue HOT 19
- Performance Issue? HOT 1
- Where is the Changelog HOT 2
- Grab average color? HOT 4
- Blurhashes on Roku HOT 1
- Decode produces massive image in dimensions HOT 2
- Blurash decode JS draw single line HOT 1
- BlurHash does not work when `privacy.resistFingerprinting` is enabled HOT 1
- Cloudinary compatibility HOT 1
- Reduce intensity of too dominant colors HOT 1
- Found a possible security concern HOT 1
- Dynamically determine X and Y components based on aspect ratio HOT 1
- Website isn't mobile responsive
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blurhash.