![](\"./img/banner.svg\")
\n\n\n\n\n ![\"This](\".github/funding-octocat.svg\")
\n\n\n# Blurhash\n\n> 🖼️ Give your users the loading experience they want.\n\nInstall via [npm](https://www.npmjs.com/package/react-native-blurhash):\n\n```sh\nnpm i react-native-blurhash\nnpx pod-install\n```\n\n[](https://www.npmjs.com/package/react-native-blurhash)\n[](https://www.npmjs.com/package/react-native-blurhash)\n\n[](https://github.com/mrousavy?tab=followers)\n[](https://twitter.com/mrousavy)\n\n**BlurHash** is a compact representation of a placeholder for an image. Instead of displaying boring grey little boxes while your image loads, show a _blurred preview_ until the full image has been loaded.\n\n> The algorithm was created by [woltapp/blurhash](https://github.com/woltapp/blurhash), which also includes an [algorithm explanation](https://github.com/woltapp/blurhash/blob/master/Algorithm.md).\n\n\n ![\"Turn](\"https://github.com/mrousavy/react-native-blurhash/raw/master/img/explanation.png\")
\n
\n
\n \n Note: You can also use the react-native-blurhash encoder to encode straight from your React Native App!\n\n | \n\n![](\"https://github.com/mrousavy/react-native-blurhash/raw/master/img/demo.gif\") \n | \n
| Name | \nType | \nExplanation | \nRequired | \nDefault Value | \n \n
|---|---|---|---|---|
blurhash | \n string | \n The blurhash string to use. Example: LGFFaXYk^6#M@-5c,1J5@[or[Q6. | \n ✅ | \nundefined | \n
decodeWidth | \n number | \n The width (resolution) to decode to. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32.\n \n See: performance | \n ❌ | \n32 | \n
decodeHeight | \n number | \n The height (resolution) to decode to. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32.\n \n See: performance | \n ❌ | \n32 | \n
decodePunch | \n number | \n Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders. | \n❌ | \n1.0 | \n
decodeAsync | \n boolean | \n Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread.\n \n See: Asynchronous Decoding | \n ❌ | \nfalse | \n
resizeMode | \n 'cover' | 'contain' | 'stretch' | 'center' | \n Sets the resize mode of the image. (no, 'repeat' is not supported.)\n See: Image::resizeMode\n | \n ❌ | \n'cover' | \n
onLoadStart | \n () => void | \n A callback to call when the Blurhash started to decode the given blurhash string. | \n ❌ | \nundefined | \n
onLoadEnd | \n () => void | \n A callback to call when the Blurhash successfully decoded the given blurhash string and rendered the image to the <Blurhash> view. | \n ❌ | \nundefined | \n
onLoadError | \n (message?: string) => void | \n A callback to call when the Blurhash failed to load. Use the message parameter to get the error message. | \n ❌ | \nundefined | \n
All View props | \n ViewProps | \n All properties from the React Native View. Use style.width and style.height for display-sizes. Also, style.borderRadius is natively supported on iOS. | \n ❌ | \n{} | \n
| iOS Screenshot | \nAndroid Screenshot | \n
|---|---|
![\"iOS](\"https://github.com/mrousavy/react-native-blurhash/raw/master/img/demo_ios.png\") | \n ![\"Android](\"https://github.com/mrousavy/react-native-blurhash/raw/master/img/demo_android.png\") | \n
\n","readmeFilename":"README.md","users":{"mrousavy":true}}