{"id":15018472,"url":"https://github.com/nativescript/nativescript-fresco","last_synced_at":"2025-10-19T16:31:02.121Z","repository":{"id":57308529,"uuid":"50441004","full_name":"NativeScript/nativescript-fresco","owner":"NativeScript","description":"This repository holds the NativeScript plugin that exposes the functionality of the Fresco image library to NativeScript developers.","archived":false,"fork":false,"pushed_at":"2019-04-18T20:04:03.000Z","size":8845,"stargazers_count":53,"open_issues_count":8,"forks_count":23,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-10-29T15:51:53.715Z","etag":null,"topics":["android","fresco","images","ios","mobile","nativescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-26T16:12:48.000Z","updated_at":"2024-05-30T15:49:36.000Z","dependencies_parsed_at":"2022-09-10T03:40:24.037Z","dependency_job_id":null,"html_url":"https://github.com/NativeScript/nativescript-fresco","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-fresco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-fresco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-fresco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-fresco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/nativescript-fresco/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237163206,"owners_count":19265227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","fresco","images","ios","mobile","nativescript"],"created_at":"2024-09-24T19:52:00.431Z","updated_at":"2025-10-19T16:30:56.182Z","avatar_url":"https://github.com/NativeScript.png","language":"TypeScript","readme":"# NativeScript Fresco\n\n\u003e A NativeScript Plugin for Android apps.\n\n---\n**This plugin is deprecated.** Feel free to use the [Image Plugin](https://github.com/Akylas/nativescript-image) for efficiently displaying images on Android and iOS in your NativeScript app. If you already have an app that use the Fresco Plugin, read the [migrate-to-image doc](https://github.com/NativeScript/nativescript-fresco/blob/master/MIGRATE-TO-IMAGE.md) for initial guidance.\n\n---\n\u003c!-- TOC depthFrom:2 depthTo:3 --\u003e\n\n- [NativeScript Fresco](#nativescript-fresco)\n  - [What is `nativescript-fresco`?](#what-is-nativescript-fresco)\n  - [How to use `nativescript-fresco`?](#how-to-use-nativescript-fresco)\n    - [In vanila NativeScript](#in-vanila-nativescript)\n      - [From npm](#from-npm)\n      - [From local repo?](#from-local-repo)\n    - [In NativeScript + Angular 2](#in-nativescript--angular-2)\n  - [Examples](#examples)\n  - [Migrating from 3.x.x to 4.x.x](#migrating-from-3xx-to-4xx)\n  - [Features](#features)\n    - [Native Fresco library typings](#native-fresco-library-typings)\n    - [Basic attributes](#basic-attributes)\n    - [Advanced *optional* attributes](#advanced-optional-attributes)\n    - [Events](#events)\n      - [Event arguments](#event-arguments)\n    - [Cache](#cache)\n      - ['Refresh' the 'imageUri'](#refresh-the-imageuri)\n      - [Clear everything from the cache](#clear-everything-from-the-cache)\n      - [Evict all images with a specific URI from the cache](#evict-all-images-with-a-specific-uri-from-the-cache)\n      - [Manually shut down the native Fresco library](#manually-shut-down-the-native-fresco-library)\n  - [Sample Screenshots](#sample-screenshots)\n  - [Contribute](#contribute)\n  - [Get Help](#get-help)\n\n\u003c!-- /TOC --\u003e\n\n## What is `nativescript-fresco`?\n`nativescript-fresco` is a NativeScript plugin that exposes the Fresco library used for efficiently displaying images on Android. More information about what Fresco is and how it works is available on its official website [here](https://code.facebook.com/posts/366199913563917/introducing-fresco-a-new-image-library-for-android/).\n\nThe `nativescript-fresco` plugin enables NativeScript developers to use the `FrescoDrawee` class which is extends the traditional Android ImageView component and adds the smart Fresco image management algorithms. The plugin exposes the drawee as a NativeScript view so you basically put it in the XML definition of your page and provide the URI to the image you would like to use.\n\n## How to use `nativescript-fresco`?\n\n### In vanila NativeScript\n#### From npm\n1. Go to the root folder of your {N} application where you would like to install the plugin and type `tns plugin add nativescript-fresco`.\n4. Initialize `nativescript-fresco` in the `launch` event of your {N} application by using the following code:\n\n#### From local repo?\n1. Clone the repository and go to the root directory on your computer.\n2. Use `tsc` to transpile the `.ts` sources: `tsc -p`.\n3. Go to the root folder of your {N} application where you would like to install the plugin and type `tns plugin add \u003cpath-to-fresco-repo-dir\u003e`.\n4. Initialize `nativescript-fresco` in the `launch` event of your {N} application by using the following code:\n\nJavaScript:\n\n```javascript\nvar application = require(\"application\");\nvar fresco = require(\"nativescript-fresco\");\n\nif (application.android) {\n    application.on(\"launch\", function () {\n        fresco.initialize();\n    });\n}\n```\n\nTypeScript:\n\n```typescript\nimport application = require(\"application\");\nimport fresco = require(\"nativescript-fresco\");\n\nif (application.android) {\n    application.on(\"launch\", () =\u003e {\n        fresco.initialize();\n    });\n}\n```\n\n\u003e When working with \"downsampling\" you will need to pass a configuration to the `initialize` function:\n\n```javascript\nfresco.initialize({ isDownsampleEnabled: true });\n```\n\n\nUse `fresco` in the XML definition of the page as follows:\n\n```xml\n\u003cPage\n    xmlns=\"http://www.nativescript.org/tns.xsd\" \n    xmlns:nativescript-fresco=\"nativescript-fresco\"\u003e\n    \u003cnativescript-fresco:FrescoDrawee width=\"250\" height=\"250\"\n                                      imageUri=\"\u003curi-to-a-photo-from-the-web-or-a-local-resource\u003e\"/\u003e\n\u003c/Page\u003e\n```\n\n### In NativeScript + Angular 2\n\n1. Import the `TNSFrescoModule` from `nativescript-fresco/angular` and add it to the `imports` of your initial `@NgModule`, like shown [here](https://github.com/NativeScript/nativescript-fresco/blob/master/demo-angular/app/app.module.ts).\n2. As described above make sure to initialize the `nativescript-fresco` plugin in the `launch` event of your {N} application.\n\n## Examples\nYou can refer the [demo-angular](https://github.com/NativeScript/nativescript-fresco/tree/master/demo-angular) folder of the repo for runnable {N} project that demonstrates the nativescript-fresco plugin with all of its features in action.\n\n## Migrating from 3.x.x to 4.x.x\n- If you are using the `AnimatedImage` class you can continue to cast to this type just note that it is now an interface rather than a class\n- If you are using the `IAnimatedImage` interface simply change all of your references to be `AnimatedImage`\n- If you are using the `IImageInfo` interface simply change all of your references to be `ImageInfo`\n- If you are using the `IError` interface simply change all of your references to be `FrescoError`\n\n## Features\n\n### Native Fresco library typings\nIf you find yourself in the need to access directly the native library of the nativescript-fresco plugin you can import the android.d.ts from the plugin in your `references.d.ts`:\n\n```/// \u003creference path=\"./node_modules/nativescript-fresco/android.d.ts\" /\u003e```\n\nAs documented by the Fresco library setting the **height and width** are **mandatory**, more details on this topic could be found [here](http://frescolib.org/docs/using-drawees-xml.html#height-and-width-mandatory). So the first this you should do when declaring the FrescoDrawee is set its *width* and *height* attributes or set only one of them and set the FrescoDrawee's **aspectRatio**. The width and height of the FrescoDrawee in your {N} application supports percentages which makes it possible to declare for example *width=\"50%\"* and *aspectRatio=\"1.33\"* achieving exactly 50% width with dynamically calculated height based on the aspect ration of the loaded image from the *imageUri*.\n\n### Basic attributes\n\n- **imageUri** \n\nString value used for the image URI. You can use this property to set the image to be loaded from remote location (http, https), from the resources and local files of your {N} application.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee imageUri=\"https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png\"/\u003e\n```\n\n- **placeholderImageUri** \n\nString value used for the placeholder image URI. You can use this property to set a placeholder image loaded from the local and resources files of your {N} application.\n\n**Note: Currently there are limitations on how many different Images can be set to as 'placeholderImage' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all ```placeholderImageUri``` of your FrescoDrawee instances.*\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee placeholderImageUri=\"~/placeholder.jpg\"/\u003e\n```\n\n- **failureImageUri** \n\nString value used for the failure image URI. You can use this property to set a failure image loaded from the local and resources files of your {N} application that will be shown if the loading of the imageUri is not successful.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee failureImageUri=\"~/failure.jpg\"/\u003e\n```\n\n\n### Advanced *optional* attributes\n\nThere are a couple of *optional* attributes that could be set on the FrescoDrawee instance to achieve advanced behaviors:\n\n- **backgroundUri** \n\nString value used for the background image URI. Using this property has similar effect as the placeholderImageUri but the image is stretched to the size of the FrescoDrawee.\n\n**Note: Currently there are limitations on how many different Images can be set to as 'background' before OutOfMemoryError is thrown. For best results its recommended to use a single image for all ```backgroundUri``` of your FrescoDrawee instances.*\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee backgroundUri=\"~/image.jpg\"/\u003e\n```\n\n- **actualImageScaleType** \n\nString value used by FrescoDrawee image scale type. This property can be set to:\n\n'*center*' - Performs no scaling.\n\n'*centerCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.\n\n'*centerInside*' - Scales the child so that it fits entirely inside the parent.\n\n'*fitCenter*' - Scales the child so that it fits entirely inside the parent.\n\n'*fitStart*' - Scales the child so that it fits entirely inside the parent.\n\n'*fitEnd*' - Scales the child so that it fits entirely inside the parent.\n\n'*fitXY*' - Scales width and height independently, so that the child matches the parent exactly.\n\n'*focusCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee actualImageScaleType=\"centerInside\"/\u003e\n```\n\n- **fadeDuration** \n\nNumber value used for the fade-in duration. This value is in milliseconds.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee fadeDuration=\"3000\"/\u003e\n```\n\n- **blurRadius** \n\nNumber value greater than zero, used as input for the blur function. Larger value means slower processing. For example a value of `10` means that each pixel in the image will be blurred using all adjacent pixels up to a distance of 10.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee blurRadius=\"25\"/\u003e\n```\n\n- **blurDownSampling** \n\nNumber value greater than zero, used to scale the image before applying the blur function. Larger value means faster processing. For example a value of `2` means that the image will be scaled by a factor of two before applying blur.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee blurDownSampling=\"2\"/\u003e\n```\n\n- **aspectRatio** \n\nNumber value used as the aspect ratio of the image. This property is useful when you are working with different aspect ratio images and want to have a fixed Width or Height. The ratio of an image is calculated by dividing its width by its height. \n\n*Note: In some layout scenarios it is necessary to set the ```verticalAlignment``` of the FrescoDrawee to 'top' or 'bottom' in order to \"anchor\" the drawee and achieve dynamic sizing.*\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee aspectRatio=\"1.33\" verticalAlignment=\"top\"/\u003e\n```\n\n- **decodeWidth** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.\n\nNumber value used as the downsampled width of the fresco drawable.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee decodeWidth=\"100\"/\u003e\n```\n\n- **decodeHeight** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.\n\nNumber value used as the downsampled width of the fresco drawable.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee decodeHeight=\"100\"/\u003e\n```\n\n\n- **progressiveRenderingEnabled**\n\nBoolean value used for enabling or disabling the streaming of progressive JPEG images. This property is set to 'false' by default. Setting this property to 'true' while loading JPEG images not encoded in progressive format will lead to a standard loading of those images.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee progressiveRenderingEnabled=\"true\"/\u003e\n```\n\n- **showProgressBar** \n\nBoolean value used for showing or hiding the progress bar.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee showProgressBar=\"true\"/\u003e\n```\n\n- **progressBarColor** \n\nString value used for setting the color of the progress bar. You can set it to hex values (\"*#FF0000*\") and/or predefined colors (\"*green*\").\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee progressBarColor=\"blue\"/\u003e\n```\n\n- **roundAsCircle** \n\nBoolean value used for determining if the image will be rounded as a circle. Its default value is false. If set to true the image will be rounder to a circle.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundAsCircle=\"true\"/\u003e\n```\n\n- **roundedCornerRadius** \n\nNumber value used as radius for rounding the image's corners.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundedCornerRadius=\"50\"/\u003e\n```\n\n- **roundBottomRight** \n\nBoolean value used for determining if the image's bottom right corner will be rounded. The *roundedCornerRadius* is used as the rounding radius.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundBottomRight=\"true\"/\u003e\n```\n\n- **roundBottomLeft** \n\nBoolean value used for determining if the image's bottom left corner will be rounded. The *roundedCornerRadius* is used as the rounding radius.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundBottomLeft=\"true\"/\u003e\n```\n\n- **roundTopLeft** \n\nBoolean value used for determining if the image's top left corner will be rounded. The *roundedCornerRadius* is used as the rounding radius.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundTopLeft=\"true\"/\u003e\n```\n\n- **roundTopRight** \n\nBoolean value used for determining if the image's top right corner should be rounded. The *roundedCornerRadius* is used as the rounding radius.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee roundTopRight=\"true\"/\u003e\n```\n\n- **autoPlayAnimations** \n\nBoolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee autoPlayAnimations=\"true\"/\u003e\n```\n\n- **tapToRetryEnabled** \n\nBoolean value used for enabling/disabling a tap to retry action for the download of the FrescoDrawee image.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee tapToRetryEnabled=\"true\"/\u003e\n```\n\n### Events\n\n- **finalImageSet** - arguments *FinalEventData*\n\nThis event is fired after the final image has been set. When working with animated images you could use this event to start the animation by calling the *FinalEventData.animatable.start()* function.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee finalImageSet=\"onFinalImageSet\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onFinalImageSet(args) {\n    var frescoEventData = args;\n    var drawee = frescoEventData.object;\n}\nexports.onFinalImageSet = onFinalImageSet;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, FinalEventData } from \"nativescript-fresco\";\n\nexport function onFinalImageSet(args: FinalEventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n- **failure** - arguments *FailureEventData*\n\nThis event is fired after the fetch of the final image failed.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee failure=\"onFailure\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onFailure(args) {\n    var drawee = args.object;\n}\nexports.onFailure = onFailure;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";\n\nexport function onFailure(args: FailureEventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n- **intermediateImageSet** - arguments *IntermediateEventData*\n\nThis event is fired after any intermediate image has been set.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee intermediateImageSet=\"onIntermediateImageSet\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onIntermediateImageSet(args) {\n    var drawee = args.object;\n}\nexports.onIntermediateImageSet = onIntermediateImageSet;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, IntermediateEventData } from \"nativescript-fresco\";\n\nexport function onIntermediateImageSet(args: IntermediateEventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n- **intermediateImageFailed** - arguments *FailureEventData*\n\nThis event is fired after the fetch of the intermediate image failed.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee intermediateImageFailed=\"onIntermediateImageFailed\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction intermediateImageFailed(args) {\n    var drawee = args.object;\n}\nexports.intermediateImageFailed = intermediateImageFailed;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, FailureEventData } from \"nativescript-fresco\";\n\nexport function intermediateImageFailed(args: FailureEventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n- **submit** - arguments *EventData*\n\nThis event is fired before the image request is submitted.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee submit=\"onSubmit\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onSubmit(args) {\n    var drawee = args.object;\n}\nexports.onSubmit = onSubmit;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, EventData } from \"nativescript-fresco\";\n\nexport function onSubmit(args: EventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n- **release** - arguments *EventData*\n\nThis event is fired after the controller released the fetched image.\n\n```xml\n\u003cnativescript-fresco:FrescoDrawee release=\"onRelease\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onRelease(args) {\n    var drawee = args.object;\n}\nexports.onRelease = onRelease;\n```\n\nTypeScript:\n\n```typescript\nimport {FrescoDrawee, EventData } from \"nativescript-fresco\";\n\nexport function onRelease(args: EventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n#### Event arguments\n\nAll events exposed by 'nativescript-fresco' provide additional information to their handlers that is needed to properly handle them. Here's a brief description of the event arguments coming with each of the events:\n\n- **FinalEventData**\n\nInstances of this class are provided to the handlers of the *finalImageSet*.\n\n```typescript\nimport {FrescoDrawee, FinalEventData, ImageInfo, AnimatedImage } from \"nativescript-fresco\";\n\nexport function onFinalImageSet(args: FinalEventData) {\n    var info: ImageInfo  = args.imageInfo;\n    var animatable: AnimatedImage = args.animatable;\n    var quality: number = info.getQualityInfo().getQuality();\n    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();\n    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();\n}\n```\n\n- **FailureEventData**\n\nInstances of this class are provided to the handlers of the *failure* and *intermediateImageFailed*.\n\n```typescript\nimport {FrescoDrawee, FailureEventData, FrescoError } from \"nativescript-fresco\";\n\nexport function onFailure(args: FailureEventData) {\n    var error: FrescoError = args.error;\n    var message: string = error.getMessage();\n    var type: string = error.getErrorType();\n    var fullError: string = error.toString();\n}\n```\n\n- **IntermediateEventData**\n\nInstances of this class are provided to the handlers of the *intermediateImageSet*.\n\n```typescript\nimport {FrescoDrawee, IntermediateEventData, ImageInfo } from \"nativescript-fresco\";\n\nexport function onIntermediateImageSet(args: IntermediateEventData) {\n    var info: ImageInfo  = args.imageInfo;\n    var quality: number = info.getQualityInfo().getQuality();\n    var isFullQuality: boolean = info.getQualityInfo().isOfFullQuality();\n    var isOfGoodEnoughQuality: boolean = info.getQualityInfo().isOfGoodEnoughQuality();}\n```\n\n- **EventData**\n\nInstances of this class are provided to the handlers of the *release* and *submit*.\n\n```typescript\nimport {FrescoDrawee, EventData } from \"nativescript-fresco\";\n\nexport function onSubmit(args: EventData) {\n    var drawee = args.object as FrescoDrawee;\n}\n```\n\n### Cache\nThe nativescript-fresco {N} plugin has built-in cache mechanism which handles managing the images in the memory. There are two types of cache mechanisms `memory` and `disk`, you can manually manage both of them with the following functionality.\n\n#### 'Refresh' the 'imageUri'\nNot so rarely you may have a scenario where the actual image on your remote service from the `imageUri` of the `FrescoDrawee` has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the `imageUri` by calling the `updateImageUri()`:\n\n```\n// 'drawee' is the instance the 'FrescoDrawee' in the project.\ndrawee.updateImageUri();\n```\n\n\n#### Clear everything from the cache\nManaging the caches in nativescript-fresco is done via the `ImagePipeline`. In order to get the reference of the ImagePipeline simply call the `getImagePipeline()` function:\n\n```\nvar frescoModel = require(\"nativescript-fresco\");\n\nvar imagePipeLine = frescoModel.getImagePipeline();\n```\n\n- Clear both the memory and disk caches\n\n```\nimagePipeLine.clearCaches();\n``` \n\n- Clear the memory cache\n\n```\nimagePipeLine.clearMemoryCaches();\n``` \n\n- Clear the disk cache\n\n```\nimagePipeLine.clearDiskCaches();\n``` \n\n#### Evict all images with a specific URI from the cache\nIf clearing the entire cache is not what you desired, you can clear only the images linked with a specific URI (`imageUri`). Evicting is done again via the ImagePipeline:\n\n```\nvar frescoModel = require(\"nativescript-fresco\");\n\nvar imagePipeLine = frescoModel.getImagePipeline();\n```\n\n- Evict URI from both the memory and disk caches\n\n```\nimagePipeLine.evictFromCache(\"\u003curi-to-a-photo-from-the-web\u003e\");\n``` \n\n- Evict URI from the memory cache\n\n```\nimagePipeLine.evictFromMemoryCache(\"\u003curi-to-a-photo-from-the-web\u003e\");\n``` \n\n- Evict URI from the disk cache\n\n```\nimagePipeLine.evictFromDiskCache(\"\u003curi-to-a-photo-from-the-web\u003e\");\n```\n\n#### Manually shut down the native Fresco library\nIn very very rare occasions the native Android Fresco library may experience strange memory leak issues, in such scenarios as a last resort you may want to \"shut down\" the library forcing all of the managed memory to possibly be released. You can do that by calling the `shutDown` function exposed by the nativescript-fresco module, one good application lifecycle event to call it inside may be in the `exit` event of the application:\n\n```javascript\nimport * as app from \"application\";\nimport * as frescoModule from \"nativescript-fresco\";\n\nif (app.android) {\n    app.on(app.exitEvent, (args) =\u003e {\n        frescoModule.shutDown();\n    });\n}\n```\n\n## Sample Screenshots\n\nAll of the images are sample images for showcasing purposes.\n\nSample 1 - Placeholder image |  Sample 2 - Transition (fade-in animation)\n-------- | ---------\n![Placeholder image sample](screenshots/screen1-with-placeholder.png) | ![Transition sample](screenshots/screen2-transition-effect.png)\n\nSample 3 - Image shown successfully from imageUri |  Sample 4 - 'Failure' image shown\n-------- | ---------\n![Successfully shown image sample](screenshots/screen3-successful-show.png) | ![Successfully shown image sample](screenshots/screen4-unsuccessful-show.png)\n\n## Contribute\nWe love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-fresco/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).\n\n## Get Help \nPlease, use [github issues](https://github.com/NativeScript/nativescript-fresco/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).\n\n![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/nativescript-fresco?pixel)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-fresco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fnativescript-fresco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-fresco/lists"}