react-native-turbo-image
v1.24.1TypeScript
Performant image for React native
0/weekUpdated 1 weeks agoMITUnpacked: 49.4 MB
Published by duguyihou
npm install react-native-turbo-imageTurboImage
Performant image component for React Native. Powered by Nuke and Coil
Features
- Support New Architecture. see the example
- Support authorization headers
- Support thumbhash, blurhash and memoryCacheKey for placeholder
- Memory cache, aggressive LRU disk cache and HTTP disk cache
- Prefetch, dispose, cleanMemoryCache and cleanDiskCache
- Written in TypeScript, Swift and Kotlin
- Support special formats (SVG, Gif, APNG)
Benchmarks
> Results may vary in real-world applications depending on factors such as network conditions, device specifications, image sizes, and concurrent tasks.
For example, loading 120 images in flatlist. See the code in the example folder:
With React Native built-in image 🐢:
``
took 15s
With react-native-turbo-image ⚡️:
`
took 2s
Installation
`sh
npm install react-native-turbo-image
cd ios && pod install
`
Usage
`ts
import TurboImage from 'react-native-turbo-image';
cachePolicy="urlCache"
style={{ width: 240, height: 360 }}
/>;
`
Properties
| Name | Type | Description | Default |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| source | Source | (Required) an object containing a uri string | - |style
| | ImageStyle | Styles to be applied to the image. | - |placeholder
| | Placeholder | show placeholder while loading | - |cachePolicy
| | CachePolicy | Determines how to cache the image | urlCache |resizeMode
| | String | Resize the image with one of the options: contain cover stretch center | contain |indicator
| | object | style: medium(default) or large. color: number / ColorValue | - |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) |resize
| | number | Scales an image to the given width preserving aspect ratio | - |blur
| | number | The blur radius of the blur filter added to the image | - |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 | - |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 | - |showPlaceholderOnFailure
| | boolean | Show the placeholder image in the case of a failure | false |rounded
| | boolean | Round the image into a circle | false |enableLiveTextInteraction
| | boolean | Enables Live Text interaction with the image (iOS 16+ only) | false |allowHardware
| | boolean | Setting this to false will reduce performance on API 26 and above. Only disable this if necessary. Coil's docs (Android only) | true |isProgressiveImageRenderingEnabled
| | boolean | If disabled, progressive image scans will be ignored (iOS only) | true |format
| | string | Specify the format for special image, e.g. svg, gif and apng. In general, TurboImage will determine the decoder automatically. | - |onStart
| | Function | Gets called when the request is started. | - |onProgress
| | Function | Gets called when the request progress is updated. | - |onSuccess
| | Function | Gets called when the requests finished successfully. | - |onFailure
| | Function | Gets called when the requests fails. | - |onCompletion
| | Function | Gets called when the request is completed. | - |
Methods
$3
`ts`
await TurboImage.prefetch([Source]);
$3
`ts`
await TurboImage.clearMemoryCache();
$3
`ts`
await TurboImage.clearDiskCache();
Types
$3
| Name | Type | Description |
| ---------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------- |
| uri | string | the url of the image |headers
| | Record | An object representing the HTTP headers to send along with the request for a remote image |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 |
$3
| Name | Type | Description |
| ---------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| thumbhash | string | A string used to generate the image placeholder. For more information, see thumbhash |blurhash
| | string | A string used to generate the image placeholder. For more information, see woltapp/blurhash. |memoryCacheKey
| | string | Using the key of previous request as placeholder. For more information, see Memory Cache Key |
| thumbhash | blurhash | memoryCacheKey |
| ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| 
| 
| 
|
$3
| Name | Type | Description |
| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| urlCache | string | Allows the server to manage caching precisely through cache-control HTTP headers. You can determine which images to cache and caching duration |dataCache
| | string` | Ignores HTTP cache control |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
TurboImage is released under the MIT license. Some of the dependencies are licensed differently, with the Apache-2.0 license, for example.