[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7500":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":44,"readmeContent":45,"aiSummary":46,"trendingCount":16,"starSnapshotCount":16,"syncStatus":47,"lastSyncTime":48,"discoverSource":49},7500,"react-native-blurhash","mrousavy\u002Freact-native-blurhash","mrousavy","🖼️ A library to show colorful blurry placeholders while your content loads.","https:\u002F\u002Fblurha.sh",null,"Kotlin",2223,87,8,18,0,1,6,27.83,"MIT License",false,"master",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"algorithm","blurhash","component","encoder","hacktoberfest","image","javascript","kotlin","library","loading","native-module","node","npm","placeholder","react","react-native","swift","typescript","ui","ux","2026-06-12 02:01:40","\u003Ca href=\"https:\u002F\u002Fmargelo.com\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\".\u002Fimg\u002Fbanner-dark.webp\" \u002F>\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\".\u002Fimg\u002Fbanner-light.webp\" \u002F>\n    \u003Cimg alt=\"react-native-vision-camera\" src=\".\u002Fimg\u002Fbanner-light.webp\" \u002F>\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fmrousavy\">\n  \u003Cimg align=\"right\" width=\"160\" alt=\"This library helped you? Consider sponsoring!\" src=\".github\u002Ffunding-octocat.svg\">\n\u003C\u002Fa>\n\n# Blurhash\n\n> 🖼️ Give your users the loading experience they want.\n\nInstall via [npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-blurhash):\n\n```sh\nnpm i react-native-blurhash\nnpx pod-install\n```\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-native-blurhash?color=%238B83E6)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-blurhash)\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freact-native-blurhash?color=%238B83E6)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-native-blurhash)\n\n[![GitHub followers](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Ffollowers\u002Fmrousavy?label=Follow%20%40mrousavy&style=social)](https:\u002F\u002Fgithub.com\u002Fmrousavy?tab=followers)\n[![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fmrousavy?label=Follow%20%40mrousavy&style=social)](https:\u002F\u002Ftwitter.com\u002Fmrousavy)\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\u002Fblurhash](https:\u002F\u002Fgithub.com\u002Fwoltapp\u002Fblurhash), which also includes an [algorithm explanation](https:\u002F\u002Fgithub.com\u002Fwoltapp\u002Fblurhash\u002Fblob\u002Fmaster\u002FAlgorithm.md).\n\n\u003Cdiv align=\"center\">\n  \u003Cp align=\"center\">\n    \u003Cimg align=\"center\" src=\"https:\u002F\u002Fgithub.com\u002Fmrousavy\u002Freact-native-blurhash\u002Fraw\u002Fmaster\u002Fimg\u002Fexplanation.png\" alt=\"Turn grey image boxes into colorful blurred images\" width=\"70%\">\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n## Expo\n\n- ✅ You can use this library with [Development Builds](https:\u002F\u002Fdocs.expo.dev\u002Fdevelopment\u002Fintroduction\u002F). No config plugin is required.\n- ❌ This library can't be used in the \"Expo Go\" app because it [requires custom native code](https:\u002F\u002Fdocs.expo.dev\u002Fworkflow\u002Fcustomizing\u002F).\n\n## Example Workflow\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd width=\"55%\">\n\u003Col>\n  In order to use the Blurhash component, you have to already have a Blurhash string. See the \u003Ca href=\"https:\u002F\u002Fblurha.sh\">blurha.sh\u003C\u002Fa> page to create example strings.\n\n  This is how I use it in my project:\n\n  \u003Cli>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, ...)\u003C\u002Fli>\n  \u003Cli>The function on my server then\u003C\u002Fli>\n  \u003Col>\n    \u003Cli>generates a blurhash from the image in the payload using the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fwoltapp\u002Fblurhash\u002Ftree\u002Fmaster\u002FC\">C encoder\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>stores the post data (including the generated blurhash string) in my database\u003C\u002Fli>\n    \u003Cli>uploads the image to a content delivery network (e.g. AWS)\u003C\u002Fli>\n  \u003C\u002Fol>\n  \u003Cli>Now everytime a user loads a feed of posts from my database, I can immediately show a \u003Ccode><Blurhash>\u003C\u002Fcode> component (with the post's \u003Ccode>.blurhash\u003C\u002Fcode> property) over my \u003Ccode><Image>\u003C\u002Fcode> component, and fade it out once the \u003Ccode><Image>\u003C\u002Fcode> component's \u003Ca href=\"https:\u002F\u002Freactnative.dev\u002Fdocs\u002Fimage#onloadend\">\u003Ccode>onLoadEnd\u003C\u002Fcode>\u003C\u002Fa> function has been called.\u003C\u002Fli>\n\n  \u003Cbr\u002F>\n  \u003Cblockquote>\n  Note: You can also use the \u003Ca href=\"#encoding\">react-native-blurhash encoder\u003C\u002Fa> to encode straight from your React Native App!\n  \u003C\u002Fblockquote>\n\u003C\u002Ftd>\n\u003Ctd width=\"25%\">\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fmrousavy\u002Freact-native-blurhash\u002Fraw\u002Fmaster\u002Fimg\u002Fdemo.gif\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Usage\n\nThe `\u003CBlurhash>` component has the following properties:\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Cth>Name\u003C\u002Fth>\n    \u003Cth>Type\u003C\u002Fth>\n    \u003Cth>Explanation\u003C\u002Fth>\n    \u003Cth>Required\u003C\u002Fth>\n    \u003Cth>Default Value\u003C\u002Fth>\n  \u003C\u002Ftd>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>blurhash\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>string\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>The blurhash string to use. Example: \u003Ccode>LGFFaXYk^6#M@-5c,1J5@[or[Q6.\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>✅\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>undefined\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>decodeWidth\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>number\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>The width (resolution) to decode to. Higher values decrease performance, use \u003Ccode>16\u003C\u002Fcode> for large lists, otherwise you can increase it to \u003Ccode>32\u003C\u002Fcode>.\n    \u003Cbr\u002F>\n    \u003Cblockquote>See: \u003Ca href=\"#performance\">performance\u003C\u002Fa>\u003C\u002Fblockquote>\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>32\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>decodeHeight\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>number\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>The height (resolution) to decode to. Higher values decrease performance, use \u003Ccode>16\u003C\u002Fcode> for large lists, otherwise you can increase it to \u003Ccode>32\u003C\u002Fcode>.\n    \u003Cbr\u002F>\n    \u003Cblockquote>See: \u003Ca href=\"#performance\">performance\u003C\u002Fa>\u003C\u002Fblockquote>\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>32\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>decodePunch\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>number\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders.\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>1.0\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>decodeAsync\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>boolean\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread.\n    \u003Cbr\u002F>\n    \u003Cblockquote>See: \u003Ca href=\"#asynchronous-decoding\">Asynchronous Decoding\u003C\u002Fa>\u003C\u002Fblockquote>\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>false\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>resizeMode\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>'cover' | 'contain' | 'stretch' | 'center'\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>Sets the resize mode of the image. (no, \u003Ccode>'repeat'\u003C\u002Fcode> is not supported.)\n    \u003Cblockquote>See: \u003Ca href=\"https:\u002F\u002Freactnative.dev\u002Fdocs\u002Fimage#resizemode\">Image::resizeMode\u003C\u002Fa>\u003C\u002Fblockquote>\n    \u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>'cover'\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>onLoadStart\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>() => void\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>A callback to call when the Blurhash started to decode the given \u003Ccode>blurhash\u003C\u002Fcode> string.\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>undefined\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>onLoadEnd\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>() => void\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>A callback to call when the Blurhash successfully decoded the given \u003Ccode>blurhash\u003C\u002Fcode> string and rendered the image to the \u003Ccode><Blurhash>\u003C\u002Fcode> view.\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>undefined\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>\u003Ccode>onLoadError\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>(message?: string) => void\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>A callback to call when the Blurhash failed to load. Use the \u003Ccode>message\u003C\u002Fcode> parameter to get the error message.\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>undefined\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd>All \u003Ccode>View\u003C\u002Fcode> props\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>ViewProps\u003C\u002Fcode>\u003C\u002Ftd>\n    \u003Ctd>All properties from the React Native \u003Ccode>View\u003C\u002Fcode>. Use \u003Ccode>style.width\u003C\u002Fcode> and \u003Ccode>style.height\u003C\u002Fcode> for display-sizes. Also, \u003Ccode>style.borderRadius\u003C\u002Fcode> is natively supported on iOS.\u003C\u002Ftd>\n    \u003Ctd>❌\u003C\u002Ftd>\n    \u003Ctd>\u003Ccode>{}\u003C\u002Fcode>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\nExample Usage:\n\n```tsx\nimport { Blurhash } from 'react-native-blurhash';\n\nexport default function App() {\n  return (\n    \u003CBlurhash\n      blurhash=\"LGFFaXYk^6#M@-5c,1J5@[or[Q6.\"\n      style={{flex: 1}}\n    \u002F>\n  );\n}\n```\n\n> See the [example](example\u002F) App for a full code example.\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Cth>iOS Screenshot\u003C\u002Fth>\n    \u003Cth>Android Screenshot\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd width=\"50%\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fmrousavy\u002Freact-native-blurhash\u002Fraw\u002Fmaster\u002Fimg\u002Fdemo_ios.png\" alt=\"iOS Demo Screenshot\">\u003C\u002Ftd>\n    \u003Ctd width=\"50%\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fmrousavy\u002Freact-native-blurhash\u002Fraw\u002Fmaster\u002Fimg\u002Fdemo_android.png\" alt=\"Android Demo Screenshot\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Average Color\n\nIf 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:\n\n```ts\nconst averageColor = Blurhash.getAverageColor('LGFFaXYk^6#M@-5c,1J5@[or[Q6.')\n```\n\n### Encoding\n\nThis library also includes a **native Image encoder**, so you can **encode** Images to blurhashes straight out of your React Native App!\n\n```ts\nconst blurhash = await Blurhash.encode('https:\u002F\u002Fblurha.sh\u002Fassets\u002Fimages\u002Fimg2.jpg', 4, 3)\n```\n\nBecause encoding an Image is a pretty heavy task, this function is **non-blocking** and runs on a separate background Thread.\n\n### Validation\n\nIf you need to validate a blurhash string, you can use `isValidBlurhash`.\n\n```ts\nconst result = Blurhash.isValidBlurhash('LGFFaXYk^6#M@-5c,1J5@[or[Q6.')\nif (result.isValid) {\n  console.log(`Blurhash is valid!`)\n} else {\n  console.log(`Blurhash is invalid! ${result.reason}`)\n}\n```\n\n## Performance\n\nThe 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`.\n\n### Asynchronous Decoding\n\nUse `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.\n\nThreads are re-used (iOS: `DispatchQueue`, Android: kotlinx Coroutines).\n\n### Caching\n\n#### Image\n\nA `\u003CBlurhash>` component caches the rendered Blurhash (Image) as long as the `blurhash`, `decodeWidth`, `decodeHeight` and `decodePunch` properties stay the same. Because unmounting the `\u003CBlurhash>` component clears the cache, re-mounting it will cause it to decode again.\n\n#### Cosine Operations\n\nCosine 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:\n\n```ts\nBlurhash.clearCosineCache()\n```\n\n> Note: At the moment, cosine operations are only cached on Android. Calling `clearCosineCache()` is a no-op on other platforms.\n\n## Resources\n* [this medium article.](https:\u002F\u002Fteabreak.e-spres-oh.com\u002Fswift-in-react-native-the-ultimate-guide-part-2-ui-components-907767123d9e) jesus christ amen thanks for that\n* [Native Modules documentation](https:\u002F\u002Freactnative.dev\u002Fdocs\u002Fnative-modules-ios.html), especially the [Swift part](https:\u002F\u002Freactnative.dev\u002Fdocs\u002Fnative-modules-ios.html#exporting-swift)\n* [This cheatsheet gist](https:\u002F\u002Fgist.github.com\u002Fchourobin\u002Ff83f3b3a6fd2053fad29fff69524f91c) thank you [**@chourobin**](https:\u002F\u002Fgithub.com\u002Fchourobin).\n* [DylanVann\u002Freact-native-fast-image](https:\u002F\u002Fgithub.com\u002FDylanVann\u002Freact-native-fast-image) as a reference for native UI modules\n* [woltapp\u002Fblurhash](https:\u002F\u002Fgithub.com\u002Fwoltapp\u002Fblurhash) of course\n\n\n\u003Ca href='https:\u002F\u002Fko-fi.com\u002FF1F8CLXG' target='_blank'>\u003Cimg height='36' style='border:0px;height:36px;' src='https:\u002F\u002Faz743702.vo.msecnd.net\u002Fcdn\u002Fkofi2.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' \u002F>\u003C\u002Fa>\n","mrousavy\u002Freact-native-blurhash 是一个用于在内容加载时显示彩色模糊占位符的库。其核心功能是通过 BlurHash 算法生成一个小而紧凑的字符串，该字符串可以被解码为一个模糊的图像预览，从而提升用户体验。此库支持多种编程语言和平台，包括 JavaScript、Kotlin 和 Swift，并且可以无缝集成到 React Native 项目中。它非常适合需要优化图片加载体验的应用场景，如社交媒体、新闻阅读器或任何需要展示大量图片的应用程序，能够显著改善用户界面的加载视觉效果。",2,"2026-06-11 03:12:47","top_language"]