React Native Example #29

Activity

1. jamiechong commented on Jan 10, 2024

   

   jamiechong

   on Jan 10, 2024

   Last edited by jamiechong

   More actions

   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
2. evanw commented on Jan 10, 2024

   

   evanw

   on Jan 10, 2024

   Owner

   More actions

   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)
3. Joshandrews43 commented on Jan 11, 2024

   

   Joshandrews43

   on Jan 11, 2024

   Last edited by Joshandrews43

   Author

   More actions

   @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.

   👍React with 👍2Reacted by Kristian Gerardsson and 5o50
4. jamiechong commented on Jan 11, 2024

   

   jamiechong

   on Jan 11, 2024

   More actions

   @Joshandrews43 can you share a link to that post?
5. yjb94 commented on Jul 22, 2024

   

   yjb94

   on Jul 22, 2024

   More actions

   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.

   🎉React with 🎉1Reacted by Cristian Ospina