React Native Example

[Joshandrews43]

Hi,

Library looks super cool, I am just pretty bad with photo handling and was hoping someone could provide a react native example with minimal dependencies

Thanks!

[jamiechong]

I'm looking for the same. I'm uploading images from a react-native mobile app and it would be great to generate a hash to go along with the upload. It seems like we need to do the following steps:

1. resize the image to fit within 100x100
2. Convert the image into a pixel array where each item is the rgba value of the pixel (I don't know how to do this yet)
3. Pass the pixel array to rgbaToThumbHash - but I'm confused about the return value of this function - it's not a string/hash?

I'm looking to use the hash with expo-image

I might also be unblocked if there was a base64ToThumbHash function

[evanw]

Sorry, I don't know anything about React Native.

Pass the pixel array to rgbaToThumbHash - but I'm confused about the return value of this function - it's not a string/hash?

It's a buffer of bytes (specifically a Uint8Array). You can get a string from a buffer by converting the buffer to base64, and you can get a buffer from a string by converting the string from base64. This is already in the JavaScript example code:

const binaryThumbHash = ThumbHash.rgbaToThumbHash(pixels.width, pixels.height, pixels.data)

// ThumbHash to data URL
const placeholderURL = ThumbHash.thumbHashToDataURL(binaryThumbHash)

// If you want to use base64 instead of binary...
const binaryToBase64 = binary => btoa(String.fromCharCode(...binary))
const base64ToBinary = base64 => new Uint8Array(atob(base64).split('').map(x => x.charCodeAt(0)))
const thumbHashToBase64 = binaryToBase64(binaryThumbHash)
const thumbHashFromBase64 = base64ToBinary(thumbHashToBase64)

[Joshandrews43]

@evanw btoa does not exist in a react native context, I think that's where the issue is. I am not too familiar with image encoding and decoding, so I think an example that works in that environment would be super helpful. Additionally, getting the raw pixel data pixels.data is not as easy without canvas in react native.

Edit: Updating to add that I commented on an expo dev's release post for support for this library with expo-image and they're going to be releasing a native implementation built in soon.

[jamiechong]

@Joshandrews43 can you share a link to that post?

[yjb94]

Hi! I've added a @luckypear/react-native-thumbhash library for react native. you can check here you can use this library just like react-native-blurhash, which i referenced a lot! It's a beta release a.t.m, but i am working on it and any contributions are welcome.