Skip to content

Latest commit

 

History

History
140 lines (102 loc) · 13.9 KB

README.md

File metadata and controls

140 lines (102 loc) · 13.9 KB
Raw

TurboImage

package version npm downloads

You can find more examples in example folder

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

npm install react-native-turbo-image

cd ios && pod install

Usage

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

<TurboImage
  source={{ uri: "https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg" }}
  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
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

await TurboImage.prefetch([Source]);

dispose

await TurboImage.dispose([Source]);

clearMemoryCache

await TurboImage.clearMemoryCache();

clearDiskCache

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