{"id":13581303,"url":"https://github.com/candlefinance/faster-image","last_synced_at":"2025-04-06T07:31:54.210Z","repository":{"id":147933622,"uuid":"618961414","full_name":"candlefinance/faster-image","owner":"candlefinance","description":"Fast image loading for React Native backed by performant native libraries.","archived":false,"fork":false,"pushed_at":"2024-06-13T19:25:11.000Z","size":2313,"stargazers_count":465,"open_issues_count":10,"forks_count":20,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-06-15T09:55:03.063Z","etag":null,"topics":["activityindicator","cache","coil","coil-kotlin","image","nuke","react-native","transition"],"latest_commit_sha":null,"homepage":"https://candle.fi/discord","language":"Swift","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/candlefinance.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}},"created_at":"2023-03-25T21:09:34.000Z","updated_at":"2024-06-28T03:20:08.059Z","dependencies_parsed_at":"2024-05-12T20:35:23.463Z","dependency_job_id":"7e20a54c-472f-489b-990e-9f26cf9ba676","html_url":"https://github.com/candlefinance/faster-image","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candlefinance%2Ffaster-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candlefinance%2Ffaster-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candlefinance%2Ffaster-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/candlefinance%2Ffaster-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/candlefinance","download_url":"https://codeload.github.com/candlefinance/faster-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247450103,"owners_count":20940854,"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":["activityindicator","cache","coil","coil-kotlin","image","nuke","react-native","transition"],"created_at":"2024-08-01T15:02:00.128Z","updated_at":"2025-04-06T07:31:54.203Z","avatar_url":"https://github.com/candlefinance.png","language":"Swift","funding_links":[],"categories":["Swift"],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n \u003ca href=\"https://www.npmjs.com/package/@candlefinance%2Ffaster-image\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dm/@candlefinance%2Ffaster-image\" alt=\"npm downloads\" /\u003e\n\u003c/a\u003e\n  \u003ca alt=\"discord users online\" href=\"https://discord.gg/qnAgjxhg6n\"\n  target=\"_blank\"\n  rel=\"noopener noreferrer\"\u003e\n    \u003cimg alt=\"discord users online\" src=\"https://img.shields.io/discord/986610142768406548?label=Discord\u0026logo=discord\u0026logoColor=white\u0026cacheSeconds=3600\"/\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\nhttps://github.com/candlefinance/faster-image/assets/12258850/ede91008-4dca-417c-a2ca-4d2177066316\n\nA performant way to render images in React Native with a focus on speed and memory usage. Powered by [Nuke](https://github.com/kean/nuke), the smallest and most performant image loading library for iOS and macOS and [Coil](https://github.com/coil-kt/coil) on Android.\n\n\u003e The framework is lean and compiles in under 2 seconds¹. Nuke has an automated test suite 2x the size of the codebase itself, ensuring excellent reliability. Every feature is carefully designed and optimized for performance.\n\n\u003e Coil performs a number of optimizations including memory and disk caching, downsampling the image in memory, automatically pausing/cancelling requests, and more.\n\n## Features\n\n- [x] Supports visionOS\n- [x] Fast image loading\n- [x] Memory and disk caching\n- [x] Placeholder support:\n  - [x] [blurhash](https://github.com/woltapp/blurhash) (iOS \u0026 Android)\n  - [x] [thumbhash](https://github.com/evanw/thumbhash) (iOS only)\n  - [x] Base64 encoded image\n- [x] Animated transition\n- [x] Failure image\n- [x] Typescript support\n- [x] Written in Swift/Kotlin\n\n## To be added\n\n- [ ] GIF support\n\n\n## Installation\n\n```sh\nyarn add @candlefinance/faster-image\n```\n\n## Usage\n\n```js\nimport { FasterImageView, clearCache, prefetch } from '@candlefinance/faster-image';\n\n\u003cFasterImageView\n  style={styles.image}\n  onSuccess={(event) =\u003e {\n    console.log(event.nativeEvent);\n  }}\n  onError={(event) =\u003e console.warn(event.nativeEvent.error)}\n  source={{\n    transitionDuration: 0.3,\n    borderRadius: 50,\n    cachePolicy: 'discWithCacheControl',\n    showActivityIndicator: true,\n    url: 'https://picsum.photos/200/200?random=1',\n  }}\n/\u003e;\n\n// Clear memory and disk cache\nawait clearCache();\n\n// Prefetch\nawait prefetch(['https://picsum.photos/200/200?random=0'])\n\n// Prefetch with headers\nconst token = 'your-token';\nawait prefetch(['https://picsum.photos/200/200?random=0'], {\n  headers: {\n    Authorization: `Bearer ${token}`,\n  },\n});\n```\n\n## Props\n\n| Prop                      | Type                   | Default                  | Description                                                                                          |\n| ------------------------- | ---------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------- |\n| url                       | string                 |                          | The URL of the image                                                                                 |\n| style                     | object                 |                          | The style of the image                                                                               |\n| resizeMode                | string                 | contain                  | The resize mode of the image                                                                         |\n| thumbhash                 | string                 |                          | The thumbhash of the image as a base64 encoded string to show while loading (Android not tested)     |\n| blurhash                  | string                 |                          | The blurhash of the image to show while loading (iOS only)                                           |\n| showActivityIndicator     | boolean                | false (iOS only)         | Whether to show the UIActivityIndicatorView indicator when the image is loading\n| activityColor             | ColorValue             | undefined (iOS only)     | Activity indicator color. Changed default activity indicator color. Only hex supported     |\n| base64Placeholder         | string                 |                          | The base64 encoded placeholder image to show while the image is loading                              |\n| cachePolicy               | string                 | memory                   | The cache policy of the image                                                                        |\n| transitionDuration        | number                 | 0.75 (iOS) Android (100) | The transition duration of the image                                                                 |\n| borderRadius              | number                 | 0                        | border radius of image                                                                               |\n| borderTopLeftRadius       | number                 | 0                        | top left border radius of image                                                                      |\n| borderTopRightRadius      | number                 | 0                        | top right border radius of image                                                                     |\n| borderBottomLeftRadius    | number                 | 0                        | bottom left border radius of image                                                                   |\n| borderBottomRightRadius   | number                 | 0                        | bottom right border radius of image                                                                  |\n| failureImage              | string                 |                          | If the image fails to download this will be set (blurhash, thumbhash, base64)                        |\n| progressiveLoadingEnabled | boolean                | false                    | Progressively load images (iOS only)                                                                 |\n| onError                   | function               |                          | The function to call when an error occurs. The error is passed as the first argument of the function |\n| onSuccess                 | function               |                          | The function to call when the image is successfully loaded                                           |\n| grayscale                 | number                 | 0                        | Filter or transformation that converts the image into shades of gray (0-1).                          |\n| colorMatrix               | number[][]             |                          | Color matrix that is applied to image                                                                |\n| ignoreQueryParamsForCacheKey | boolean | false | Ignore URL query parameters in cache keys |\n| allowHardware             | boolean                | true                     | Allow hardware rendering (Android only)                                                              |\n| headers                   | Record\u003cstring, string\u003e | undefined                | Pass in headers                                                                                      |\n| accessibilityLabel        | string                 | undefined                | accessibility label                                                                                  |\n| accessible                | boolean                | undefined                | is accessible                                                                                        |\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\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcandlefinance%2Ffaster-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcandlefinance%2Ffaster-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcandlefinance%2Ffaster-image/lists"}