Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-turbo-image

Package Overview
Dependencies
Maintainers
0
Versions
66
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-turbo-image

Performant image for React native

  • 1.20.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.1K
increased by25.66%
Maintainers
0
Weekly downloads
 
Created
Source

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://github.com/duguyihou/react-native-turbo-image/assets/9347790/7955aa00-0b53-44d1-88bd-9b5e320db21e" }}
  style={{ width: 300, height: 300 }}
/>;

Properties

NameTypeDescriptionDefault
sourceSource(Required) an object containing a uri string-
styleImageStyleStyles to be applied to the image.-
placeholderPlaceholdershow placeholder while loading-
cachePolicyCachePolicyDetermines how to cache the imageurlCache
resizeModeStringResize the image with one of the options: contain cover stretch centercontain
indicatorobjectstyle: medium(default) or largecolor: number / ColorValue-
fadeDurationnumberThe transition duration of the image. Note: To avoid flicking, it will be set to 0 when a placeholder is provided300(iOS) / 100(Android)
resizenumberScales an image to the given width preserving aspect ratio-
blurnumberThe blur radius of the blur filter added to the image-
monochromenumber / ColorValueThe color applied to the image. note: For iOS and Android Q+, it works with any color. For Android Q-, it only supports grayscale-
tintnumber / ColorValueThe color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders-
showPlaceholderOnFailurebooleanShow the placeholder image in the case of a failurefalse
roundedbooleanRound the image into a circlefalse
enableLiveTextInteractionbooleanEnables Live Text interaction with the image (iOS 16+ only)false
allowHardwarebooleanSetting this to false will reduce performance on API 26 and above. Only disable this if necessary. Coil's docs (Android only)true
formatstringSpecify the format for special image, e.g. svg, gif and apng. In general, TurboImage will determine the decoder automatically.-
onStartFunctionGets called when the request is started.-
onProgressFunctionGets called when the request progress is updated.-
onSuccessFunctionGets called when the requests finished successfully.-
onFailureFunctionGets called when the requests fails.-
onCompletionFunctionGets 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

NameTypeDescription
uristringthe url of the image
headersRecord<string, string>An object representing the HTTP headers to send along with the request for a remote image
cacheKeystringThe cache key used to query and store this specific image. If not provided, the uri is used also as the cache key

Placeholder

NameTypeDescription
thumbhashstringA string used to generate the image placeholder. For more information, see thumbhash
blurhashstringA string used to generate the image placeholder. For more information, see woltapp/blurhash.
memoryCacheKeystringUsing the key of previous request as placeholder. For more information, see Memory Cache Key
thumbhashblurhashmemoryCacheKey

CachePolicy

NameTypeDescription
urlCachestringAllows the server to manage caching precisely through cache-control HTTP headers. You can determine which images to cache and caching duration
dataCachestringIgnores 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.

Keywords

FAQs

Package last updated on 24 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc