React Native Blurhash

🖼️ A library to show colorful blurry placeholders while your content loads.
Alternatives To React Native Blurhash
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Content Loader12,76830924914 days ago69March 09, 20229mitTypeScript
⚪ SVG-Powered component to easily create skeleton loadings.
React Loading Skeleton3,248661078 days ago25April 11, 20221mitTypeScript
Create skeleton screens that automatically adapt to your app!
Rn Placeholder2,00971152 months ago25September 18, 202019mitTypeScript
🏖️ Display some placeholder stuff before rendering your text or media content in React Native
React Sizeme1,8721,6482313 months ago55August 23, 202130mitJavaScript
Make your React Components aware of their width and height!
React Placeholder1,587102444 months ago23February 05, 202120mitTypeScript
A React component to easily replicate your page with nice placeholders while the content is loading
React Native Blurhash1,480
20 days ago42April 11, 202230mitKotlin
🖼️ A library to show colorful blurry placeholders while your content loads.
React Shimmer1,1405420 days ago22January 28, 202218mitTypeScript
🌠 Async loading, performant Image component for React.js
React Lazy Load Image Component1,08252845 months ago27April 06, 202248mitJavaScript
React Component to lazy load images and components using a HOC to track window scroll position.
React Native Shimmer Placeholder9142362 months ago44September 24, 202118mitJavaScript
Placeholder/ Skeleton of React Native
React Cool Img767223 days ago91June 20, 202123mitTypeScript
😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!
Alternatives To React Native Blurhash
Select To Compare

Alternative Project Comparisons
This library helped you? Consider sponsoring!


🖼️ Give your users the loading experience they want.

Install via npm:

npm i react-native-blurhash
npx pod-install

npm npm

GitHub followers Twitter Follow

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.

The algorithm was created by woltapp/blurhash, which also includes an algorithm explanation.

Turn grey image boxes into colorful blurred images


Example Workflow

    In order to use the Blurhash component, you have to already have a Blurhash string. See the page to create example strings.

    This is how I use it in my project:

  1. A user creates a post by calling a function on my server which expects a payload of an image and some post data (title, description, ...)
  2. The function on my server then
    1. generates a blurhash from the image in the payload using the C encoder
    2. stores the post data (including the generated blurhash string) in my database
    3. uploads the image to a content delivery network (e.g. AWS)
  3. Now everytime a user loads a feed of posts from my database, I can immediately show a <Blurhash> component (with the post's .blurhash property) over my <Image> component, and fade it out once the <Image> component's onLoadEnd function has been called.

  4. Note: You can also use the react-native-blurhash encoder to encode straight from your React Native App!


The <Blurhash> component has the following properties:

Name Type Explanation Required Default Value
blurhash string The blurhash string to use. Example: LGFFaXYk^6#[email protected],[email protected][or[Q6. undefined
decodeWidth number The width (resolution) to decode to. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32.
See: performance
decodeHeight number The height (resolution) to decode to. Higher values decrease performance, use 16 for large lists, otherwise you can increase it to 32.
See: performance
decodePunch number Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders. 1.0
decodeAsync boolean Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread.
See: Asynchronous Decoding
resizeMode 'cover' | 'contain' | 'stretch' | 'center' Sets the resize mode of the image. (no, 'repeat' is not supported.)
See: Image::resizeMode
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. Use style.width and style.height for display-sizes. Also, style.borderRadius is natively supported on iOS. {}

Example Usage:

import { Blurhash } from 'react-native-blurhash';

export default function App() {
  return (
      blurhash="LGFFaXYk^6#[email protected],[email protected][or[Q6."
      style={{flex: 1}}

See the example App for a full code example.

iOS Screenshot Android Screenshot
iOS Demo Screenshot Android Demo Screenshot

Average Color

If your app is really colorful you might want to match some containers' colors to the content's context. To achieve this, use the getAverageColor function to get an RGB value which represents the average color of the given Blurhash:

const averageColor = Blurhash.getAverageColor('LGFFaXYk^6#[email protected],[email protected][or[Q6.')


This library also includes a native Image encoder, so you can encode Images to blurhashes straight out of your React Native App!

const blurhash = await Blurhash.encode('', 4, 3)

Because encoding an Image is a pretty heavy task, this function is non-blocking and runs on a separate background Thread.


If you need to validate a blurhash string, you can use isValidBlurhash.

const result = Blurhash.isValidBlurhash('LGFFaXYk^6#[email protected],[email protected][or[Q6.')
if (result.isValid) {
  console.log(`Blurhash is valid!`)
} else {
  console.log(`Blurhash is invalid! ${result.reason}`)


The performance of the decoders is really fast, which means you should be able to use them in collections quite easily. By increasing the decodeWidth and decodeHeight props, the time to decode also increases. I'd recommend values of 16 for large lists, and 32 otherwise. Play around with the values but keep in mind that you probably won't see a difference when increasing it to anything above 32.

Asynchronous Decoding

Use decodeAsync={true} to decode the Blurhash on a separate background Thread instead of the main UI-Thread. This is useful when you are experiencing stutters because of the Blurhash's decoder - e.g.: in large Lists.

Threads are re-used (iOS: DispatchQueue, Android: kotlinx Coroutines).



A <Blurhash> component caches the rendered Blurhash (Image) as long as the blurhash, decodeWidth, decodeHeight and decodePunch properties stay the same. Because unmounting the <Blurhash> component clears the cache, re-mounting it will cause it to decode again.

Cosine Operations

Cosine operations get cached in memory to avoid expensive re-calculation (~24.576 cos(...) calls per 32x32 blurhash). Since this can affect memory usage, you can manually clear the cosine array cache by calling:


Note: At the moment, cosine operations are only cached on Android. Calling clearCosineCache() is a no-op on other platforms.


Buy Me a Coffee at

Popular Placeholder Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.