react-native-thumbhash

A very compact representation of an image placeholder for react native

What is thumbhash?

thumbhash is a A very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

To know more about thumbhash click here.

I recommend you to have a pre-encoded thumbhash string and store it in your server. And when your server delivers an image, you can add thumbhash in your payload. You can now immediately show <Thumbhash> component before your Image component finishes loading.

Installation

yarn add @luckypear/react-native-thumbhash

or

npm install @luckypear/react-native-thumbhash

ios

npx pod-install

you will need pod install

android

no extra steps are needed

Usage

The <Blurhash> component has the following properties:

Example

import { Thumbhash } from '@luckypear/react-native-thumbhash';

// ...

<Thumbhash thumbhash="3OcRJYB4d3h/iIeHeEh3eIhw+j2w" />;

Encoding

You can encode with this library and generate your thumbhash in your app.

const thumbhash = await Thumbhash.encode('https://picsum.photos/200');

encode method loads image via react-native image loader, and scales it and encodes it in to a thumbhash string. And this means it is a time taking task so you should be aware of using it.

If you want to encode it in your react-native app, I recommend you a tip that you can use thumbhash string to file name that you will set to server (presigned url or cdn or whatever). then you can just make your own Image component to extract the file name(which is a thumbhash string) and display it before you load your image. this will save some bytes for your playload :)

Features

• [x] thumbhash rendering (decoding)
• [x] new arch/old arch support
• [x] async dencoding
• [x] thumbhash encoding
• [x] resizeMode support

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

Resources

• react-native-blurhash. referenced many setting. thx!
• woltapp/blurhash. Thanks for great algorithm