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:

Name	Type	Explanation	Default Value
blurhash	string	The thumbhash string to use. Example: 3OcRJYB4d3h/iIeHeEh3eIhw+j2w	*Required
decodeAsync	boolean	Asynchronously decode the thumbhash on a background Thread instead of the UI-Thread.	false
resizeMode	'cover' | 'contain' | 'stretch'	Sets the resize mode of the image. ('repeat'and 'center' is not supported.) See: Image::resizeMode	'cover'
onLoadStart	() => void	A callback to call when the Blurhash started to decode the given blurhash string.	undefined
onLoadEnd	() => void	A callback to call when the Blurhash successfully decoded the given blurhash string and rendered the image to the <Blurhash> view.	undefined
onLoadError	(message?: string) => void	A callback to call when the Blurhash failed to load. Use the message parameter to get the error message.	undefined
All View props	ViewProps	All properties from the React Native View	undefined

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

• thumbhash rendering (decoding)
• new arch/old arch support
• async dencoding
• thumbhash encoding
• 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