{"id":28637687,"url":"https://github.com/duguyihou/react-native-turbo-image","last_synced_at":"2025-10-24T13:27:55.301Z","repository":{"id":185844957,"uuid":"669460680","full_name":"duguyihou/react-native-turbo-image","owner":"duguyihou","description":"Fast image loading for React Native","archived":false,"fork":false,"pushed_at":"2025-06-11T06:59:35.000Z","size":50913,"stargazers_count":871,"open_issues_count":7,"forks_count":127,"subscribers_count":65,"default_branch":"main","last_synced_at":"2025-06-11T07:49:33.533Z","etag":null,"topics":["image-caching","image-loading","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-turbo-image","language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/duguyihou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-22T10:57:24.000Z","updated_at":"2025-06-10T22:43:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"4e0e73ef-4a5a-4254-b4d2-08bcc3ee9af8","html_url":"https://github.com/duguyihou/react-native-turbo-image","commit_stats":null,"previous_names":["duguyihou/react-native-turbo-image"],"tags_count":65,"template":false,"template_full_name":null,"purl":"pkg:github/duguyihou/react-native-turbo-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duguyihou%2Freact-native-turbo-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duguyihou%2Freact-native-turbo-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duguyihou%2Freact-native-turbo-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duguyihou%2Freact-native-turbo-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/duguyihou","download_url":"https://codeload.github.com/duguyihou/react-native-turbo-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/duguyihou%2Freact-native-turbo-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259518823,"owners_count":22870305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-caching","image-loading","react-native"],"created_at":"2025-06-12T18:11:29.316Z","updated_at":"2025-10-24T13:27:50.264Z","avatar_url":"https://github.com/duguyihou.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eTurboImage\u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-turbo-image\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-native-turbo-image.svg\" alt=\"package version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-turbo-image\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/react-native-turbo-image\" alt=\"npm downloads\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/duguyihou/react-native-turbo-image/blob/main/example/assets/ios.gif\" width=\"200\" /\u003e\n\n\u003e You can find more examples in [example folder](https://github.com/duguyihou/react-native-turbo-image/tree/main/example)\n\n\u003c/div\u003e\n\nPerformant image component for React Native. Powered by [Nuke](https://github.com/kean/Nuke) and [Coil](https://github.com/coil-kt/coil)\n\n## Features\n\n- Support New Architecture. see the [example](https://github.com/duguyihou/APPLibTest)\n- Support authorization headers\n- Support thumbhash, blurhash and memoryCacheKey for placeholder\n- Memory cache, aggressive LRU disk cache and HTTP disk cache\n- Prefetch, dispose, cleanMemoryCache and cleanDiskCache\n- Written in TypeScript, Swift and Kotlin\n- Support special formats (SVG, Gif, APNG)\n\n## Benchmarks\n\n\u003eDisclaimer: Benchmark results are based on controlled testing environments and may vary in real-world applications depending on factors such as network conditions, device specifications, image sizes, and concurrent tasks.\n\nFor example, loading 120 images in flatlist. See the code in the example folder:\n\nWith [React Native built-in image](https://github.com/duguyihou/react-native-turbo-image/blob/main/example/src/screens/list/ImageScreen.tsx) 🐢:\n```\ntook 15s\n```\n\nWith [react-native-turbo-image](https://github.com/duguyihou/react-native-turbo-image/blob/main/example/src/screens/list/DataCacheScreen.tsx) ⚡️:\n```\ntook 2s\n```\n\n## Installation\n\n```sh\nnpm install react-native-turbo-image\n\ncd ios \u0026\u0026 pod install\n```\n\n## Usage\n\n```ts\nimport TurboImage from 'react-native-turbo-image';\n\n\u003cTurboImage\n  source={{ uri: \"https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg\" }}\n  cachePolicy=\"urlCache\"\n  style={{ width: 240, height: 360 }}\n/\u003e;\n\n```\n\n## Properties\n\n| Name                                 | Type                                                                                                  | Description                                                                                                                                                                                           | Default                 |\n| ------------------------------------ | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| `source`                             | [`Source`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#source)           | (**Required**) an object containing a `uri` string                                                                                                                                                    | -                       |\n| `style`                              | `ImageStyle`                                                                                          | Styles to be applied to the image.                                                                                                                                                                    | -                       |\n| `placeholder`                        | [`Placeholder`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#placeholder) | show placeholder while loading                                                                                                                                                                        | -                       |\n| `cachePolicy`                        | [`CachePolicy`](https://github.com/duguyihou/react-native-turbo-image?tab=readme-ov-file#cachepolicy) | Determines how to cache the image                                                                                                                                                                     | urlCache                |\n| `resizeMode`                         | `String`                                                                                              | Resize the image with one of the options: `contain`\u0026nbsp;`cover`\u0026nbsp;`stretch`\u0026nbsp;`center`                                                                                                         | contain                 |\n| `indicator`                          | `object`                                                                                              | `style`: `medium`(default) or `large`.\u0026nbsp; `color`: `number / ColorValue`                                                                                                                           | -                       |\n| `fadeDuration`                       | `number`                                                                                              | The transition duration of the image. Note: To avoid flicking, it will be set to 0 when a placeholder is provided                                                                                     | 300(iOS) / 100(Android) |\n| `resize`                             | `number`                                                                                              | Scales an image to the given width preserving aspect ratio                                                                                                                                            | -                       |\n| `blur`                               | `number`                                                                                              | The blur radius of the blur filter added to the image                                                                                                                                                 | -                       |\n| `monochrome`                         | `number / ColorValue`                                                                                 | The color applied to the image. note: For iOS and Android Q+, it works with any color. For Android Q-, it only supports grayscale                                                                     | -                       |\n| `tint`                               | `number / ColorValue`                                                                                 | The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders                                                        | -                       |\n| `showPlaceholderOnFailure`           | `boolean`                                                                                             | Show the placeholder image in the case of a failure                                                                                                                                                   | false                   |\n| `rounded`                            | `boolean`                                                                                             | Round the image into a circle                                                                                                                                                                         | false                   |\n| `enableLiveTextInteraction`          | `boolean`                                                                                             | Enables Live Text interaction with the image (iOS 16+ only)                                                                                                                                           | false                   |\n| `allowHardware`                      | `boolean`                                                                                             | Setting this to `false` will reduce performance on API 26 and above. Only disable this if necessary. [Coil's docs](https://coil-kt.github.io/coil/recipes/#shared-element-transitions) (Android only) | true                    |\n| `isProgressiveImageRenderingEnabled` | `boolean`                                                                                             | If disabled, progressive image scans will be ignored (iOS only)                                                                                                                                       | true                    |\n| `format`                             | `string`                                                                                              | Specify the format for special image, e.g. `svg`, `gif` and `apng`. In general, TurboImage will determine the decoder automatically.                                                                  | -                       |\n| `onStart`                            | `Function`                                                                                            | Gets called when the request is started.                                                                                                                                                              | -                       |\n| `onProgress`                         | `Function`                                                                                            | Gets called when the request progress is updated.                                                                                                                                                     | -                       |\n| `onSuccess`                          | `Function`                                                                                            | Gets called when the requests finished successfully.                                                                                                                                                  | -                       |\n| `onFailure`                          | `Function`                                                                                            | Gets called when the requests fails.                                                                                                                                                                  | -                       |\n| `onCompletion`                       | `Function`                                                                                            | Gets called when the request is completed.                                                                                                                                                            | -                       |\n\n## Methods\n\n### `prefetch`\n\n```ts\nawait TurboImage.prefetch([Source]);\n```\n\n### `dispose`\n\n```ts\nawait TurboImage.dispose([Source]);\n```\n\n### `clearMemoryCache`\n\n```ts\nawait TurboImage.clearMemoryCache();\n```\n\n### `clearDiskCache`\n\n```ts\nawait TurboImage.clearDiskCache();\n```\n\n## Types\n\n### Source\n\n| Name       | Type                     | Description                                                                                                       |\n| ---------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------- |\n| `uri`      | `string`                 | the url of the image                                                                                              |\n| `headers`  | `Record\u003cstring, string\u003e` | An object representing the HTTP headers to send along with the request for a remote image                         |\n| `cacheKey` | `string`                 | The cache key used to query and store this specific image. If not provided, the uri is used also as the cache key |\n\n### Placeholder\n\n| Name             | Type     | Description                                                                                                                                                                       |\n| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `thumbhash`      | `string` | A string used to generate the image placeholder. For more information, see [thumbhash](https://evanw.github.io/thumbhash/)                                                        |\n| `blurhash`       | `string` | A string used to generate the image placeholder. For more information, see [woltapp/blurhash](https://github.com/woltapp/blurhash).                                               |\n| `memoryCacheKey` | `string` | Using the key of previous request as placeholder. For more information, see [Memory Cache Key](https://coil-kt.github.io/coil/recipes/#using-a-memory-cache-key-as-a-placeholder) |\n\n| thumbhash                                                                                                              | blurhash                                                                                                              | memoryCacheKey                                                                                                              |\n| ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://github.com/duguyihou/react-native-turbo-image/blob/main/example/assets/thumbhash.gif\" width=\"150\" /\u003e | \u003cimg src=\"https://github.com/duguyihou/react-native-turbo-image/blob/main/example/assets/blurhash.gif\" width=\"150\" /\u003e | \u003cimg src=\"https://github.com/duguyihou/react-native-turbo-image/blob/main/example/assets/memoryCacheKey.gif\" width=\"150\" /\u003e |\n\n### CachePolicy\n\n| Name        | Type     | Description                                                                                                                                    |\n| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| `urlCache`  | `string` | Allows the server to manage caching precisely through cache-control HTTP headers. You can determine which images to cache and caching duration |\n| `dataCache` | `string` | Ignores [HTTP cache control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)                                          |\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nTurboImage is released under the [MIT](https://github.com/duguyihou/react-native-turbo-image?tab=MIT-1-ov-file) license. Some of the dependencies are licensed differently, with the Apache-2.0 license, for example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduguyihou%2Freact-native-turbo-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduguyihou%2Freact-native-turbo-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduguyihou%2Freact-native-turbo-image/lists"}