Performant React Native image component. Powered by Nuke and Coil
- Memory cache, aggressive LRU disk cache and HTTP disk cache
- Image Processing & Decompression
- Written in TypeScript, Swift and Kotlin
- Support SVG(Experimental) and Gif
npm install react-native-turbo-image
cd ios && pod install
import TurboImage from 'react-native-turbo-image';
// ...
<TurboImage
src={url}
style={{ width: 200, height: 200 }}
cachePolicy="urlCache"
/>;
The URL of the image
The style of the image
type Placeholder = {
blurhash: string;
thumbhash: string;
};
show placeholder while loading, either thumbhash
or blurhash
The cache policy of the image
memory
: LRU memory cache for processed images. set by defaultdataCache
: aggressive LRU disk cacheurlCache
: HTTP disk cache, respect cache-control
The resize mode of the image, default value contain
contain
cover
stretch
center
show the indicator when loading,
-
style?
:medium
orlarge
, default valuemedium
. -
color?
: number / ColorValue
indicator={{
style: 'large',
color: 'red',
}}
Show the blur placeholder image in the case of a failure.
The transition duration of the image. default value: 300(iOS) / 100(Android)
The border radius added to the image
Round the image into a circle
The blur radius of the blur filter added to the image
The color applied to the image.
note: For iOS and Android Q+, it works with any color. For Android Q-, it only supports grayscale.
Scales an image to the given width preserving aspect ratio
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.
Enables Live Text interaction with the image.
determines if use SVG decoder
determines if use Gif decoder
The function to call when the image is fetching
The function to call when the image is successfully loaded
The function to call when the request failed
The function to call when the request is completed
TurboImage.prefetch([URLs]);
await TurboImage.clearMemoryCache();
await TurboImage.clearDiskCache();
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT