You can find more examples in example folder

react-native-turbo-image

Performant React Native image component. Powered by Nuke and Coil

Features

• Memory cache, aggressive LRU disk cache and HTTP disk cache
• Image Processing & Decompression (borderRadius, rounded, blur, monochrome, tint and resize)
• Written in TypeScript, Swift and Kotlin
• Support SVG and Gif

Installation

npm install react-native-turbo-image

cd ios && pod install

Usage

import TurboImage from 'react-native-turbo-image';

// ...

<TurboImage
  src={url}
  style={{ width: 200, height: 200 }}
  cachePolicy="dataCache"
  blurhash="UCHx4#R3Si.8I^M{NGkCZLRkRPIA~qNGxtj["
/>;

Props

src: string

The URL of the image

style: ImageStyle

The style of the image

blurhash?: string

The blurhash of the image to show while loading, generated by blurh.sh

cachePolicy?: enum

The cache policy of the image

• memory: LRU memory cache for processed images. set by default
• dataCache: aggressive LRU disk cache
• urlCache: HTTP disk cache, respect cache-control

resizeMode?: enum

The resize mode of the image, default value contain

• contain
• cover
• stretch
• center

indicator?: enum

show the indicator when loading, default value medium. It does not work with blurhash

• medium
• large

showPlaceholderOnFailure?: boolean

Show the blur placeholder image in the case of a failure.

fadeDuration?: number

The transition duration of the image. default value: 0.3(iOS) / 0.1(Android)

borderRadius?: number

The border radius added to the image

rounded?: boolean

Round the image into a circle

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.

resize?: number

Scales an image to the given width preserving aspect ratio

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.

onStart?: (result: NativeSyntheticEvent<TaskState>) => void

The function to call when the image is fetching

onSuccess?: (result: NativeSyntheticEvent<Success>) => void

The function to call when the image is successfully loaded

onFailure?: (result: NativeSyntheticEvent<Failure>) => void

The function to call when the request failed

onCompletion?: (result: NativeSyntheticEvent<TaskState>) => void

The function to call when the request is completed

Methods

prefetch: (sources: string[]) => Promise<void> (WIP)

TurboImage.prefetch([
  'https://placedog.net/300/300?id=122',
  'https://placedog.net/300/300?id=123',
  'https://placedog.net/300/300?id=124',
  'https://placedog.net/300/300?id=125',
  'https://placedog.net/300/300?id=126',
]);

clearMemoryCache: () => Promise<void>

await TurboImage.clearMemoryCache();

clearDiskCache: () => Promise<void>

await TurboImage.clearDiskCache();

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT