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)

Installation

1npm install react-native-turbo-image
2
3cd ios && pod install

Usage

1import TurboImage from 'react-native-turbo-image';
2
3<TurboImage
4  source={{ uri: "https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg" }}
5  cachePolicy="urlCache"
6  style={{ width: 240, height: 360 }}
7/>;
8

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
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

prefetch

1await TurboImage.prefetch([Source]);

dispose

1await TurboImage.dispose([Source]);

clearMemoryCache

1await TurboImage.clearMemoryCache();

clearDiskCache

1await TurboImage.clearDiskCache();

Types

Source

Name	Type	Description
uri	string	the url of the image
headers	Record<string, string>	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

Placeholder

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

CachePolicy

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.