react-native-turbo-image

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
• Written in TypeScript, Swift and Kotlin
• Support SVG(Experimental) 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="urlCache"
  placeholder={
    blurhash: "UCHx4#R3Si.8I^M{NGkCZLRkRPIA~qNGxtj["
  }
/>;

Props

src: string

The URL of the image

style: ImageStyle

The style of the image

placeholder?: Partial<Placeholder>

Currently only support blurhash. 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

show the indicator when loading,

• style?: medium or large, default value medium.

• color?: number / ColorValue

indicator={{
            style: 'large',
            color: 'red',
          }}

showPlaceholderOnFailure?: boolean

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

fadeDuration?: number

The transition duration of the image. default value: 300(iOS) / 100(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.

isSVG?: boolean

determines if use SVG decoder

isGif?: boolean

determines if use Gif decoder

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>

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