@luckypear/react-native-thumbhash
v1.0.2
Published
A very compact representation of an image placeholder for react native
Downloads
670
Maintainers
Readme
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