[FEATURE] Web support

[mrousavy]

Problem

Currently there is no support for react-native-web.

Solution

A web implementation.

1. Create web/ folder
2. Create project
3. Export React Methods
4. Add Blurhash Encoder/Decoder
   1. Use TypeScript Encoder/Decoder (slow!)
   2. Use Rust (WebAssembly) Encoder/Decoder and interop

[mrousavy]

Resources:

• react-native-web Getting Started
• react-native-slider/js for example usage
• reactnative.directory filtered by libraries with web support

[jacob-israel-turner]

Hey @mrousavy! Awesome library here! I'm in the process of integrating it into our project. We currently deploy to iOS, Android, and web (via react-native-web). I'm curious if you still plan to finish this ticket? If not, I can easily drop in another solution (like react-blurhash) on web instead - but if this is on the horizon, I'd love to stick with one library!

Thanks for your work!

[mrousavy]

@jacob-israel-turner Hi! Thanks for the kind words, unfortunately I don't have plans to create support react-native-web myself since I have never used it and most likely won't do so in the near future. Beside from being really busy, I'd also do react-native-windows support first.

I do however gladly accept PRs for this goal, since it shouldn't be hard to implement at all - it should just be a bit of configuration (and then the wrapping)

So if you want to do this, I can give you as much help as I can from my standpoint out ✌️

[jacob-israel-turner]

Sounds good, thanks for getting back so quickly! I'll take a look and decide between that approach vs the alternative library.

Thanks!

[jacob-israel-turner]

Hey @mrousavy! I looked into react-blurhash, and it appears to have a less developed API. I'd rather use react-native-blurhash on web. I'm going to chip away at this in my free time - if you have any suggestions on starting points or strategies to implement, that would be helpful! Thanks!

[mrousavy]

@jacob-israel-turner awesome, I'm really excited what you come up with.

So for react-native web you don't really have to do a lot of complicated stuff, the most complicated thing you have to do is probably setting up the configurations.

Take a look at this comment above for resources. For example, use the official react-native-web documentation, maybe they have some information on how "native" modules should be structured.

Also, take a look at react-native-slider's implementation, since they have added support for react-native-web.

For the implementation, you only have to implement the <Blurhash> view (will probably be a simple canvas derived from <View>) and the Blurhash.encode function. That will be written in simple TypeScript, just use the official TypeScript encoder and decoder. All other functions, such as getAverageColor and isValidBlurhash don't have to be implemented since those are already in the index.tsx code (platform independant). You also don't have to implement clearCosineCache, unless the TypeScript implementation uses cosine cache (idk)

If you have any more questions, let me know 👍

[jacob-israel-turner]

First pass here: https://github.com/mrousavy/react-native-blurhash/pull/112

First focus here was simply getting the blurhash to render on web. I got that working, but need to do some code cleanup and fully implement the BlurhashModule on web.

@mrousavy I'd love to get your eyes on this. Let me know if you see any major issues so far. Thanks!