{"id":19220107,"url":"https://github.com/nativescript-community/ui-image","last_synced_at":"2025-04-06T07:13:55.862Z","repository":{"id":45464133,"uuid":"113755297","full_name":"nativescript-community/ui-image","owner":"nativescript-community","description":"Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.","archived":false,"fork":false,"pushed_at":"2024-12-02T16:13:39.000Z","size":23628,"stargazers_count":36,"open_issues_count":2,"forks_count":9,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-30T06:10:06.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","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-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["farfromrefug"]}},"created_at":"2017-12-10T14:10:47.000Z","updated_at":"2024-12-22T10:42:47.000Z","dependencies_parsed_at":"2023-01-23T20:01:34.066Z","dependency_job_id":"c675473b-1793-4fc1-8548-3c9ee5fa4aeb","html_url":"https://github.com/nativescript-community/ui-image","commit_stats":{"total_commits":374,"total_committers":14,"mean_commits":"26.714285714285715","dds":"0.17647058823529416","last_synced_commit":"b15694e34058498f37ead9ddc5e2362cc1f2e18c"},"previous_names":["akylas/nativescript-image"],"tags_count":115,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"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":[],"created_at":"2024-11-09T14:34:01.953Z","updated_at":"2025-04-06T07:13:55.846Z","avatar_url":"https://github.com/nativescript-community.png","language":"Java","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003eThis monorepo contains multiple packages:\u003cbr\u003e\u003cbr\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eimage\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-image\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-image?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-image.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-image\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-image.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eAdvanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [setup](#setup)\r\n* [API](#api)\r\n\t* [Events](#events)\r\n\t\t* [Event arguments](#event-arguments)\r\n\t* [Properties](#properties)\r\n\t* [Advanced *optional* attributes](#advanced-optional-attributes)\r\n\t* [Cache](#cache)\r\n\t\t* ['Refresh' the 'src'](#refresh-the-src)\r\n\t\t* [Clear everything from the cache](#clear-everything-from-the-cache)\r\n\t\t* [Evict all images with a specific URI from the cache](#evict-all-images-with-a-specific-uri-from-the-cache)\r\n\t\t* [Manually shut down the native imageModule library](#manually-shut-down-the-native-imagemodule-library)\r\n* [Flavors](#flavors)\r\n* [Demos](#demos)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos-1)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-image`\n\n\r\n[](#setup)\r\n\r\n\r\n[](#setup)\r\n\r\n## setup\n\n```javascript\nimport imageModule = require(\"@nativescript-community/ui-image\");\n\n//do this before creating any image view\nimageModule.initialize({ isDownsampleEnabled: true });\n```\n\n\r\n[](#api)\r\n\r\n\r\n[](#api)\r\n\r\n## API\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\u003c@nativescript-community/ui-image:Img finalImageSet=\"onFinalImageSet\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onFinalImageSet(args) {\n    var imageModuleEventData = args;\n    var img = imageModuleEventData.object;\n}\nexports.onFinalImageSet = onFinalImageSet;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, FinalEventData } from \"@nativescript-community/ui-image\";\n\nexport function onFinalImageSet(args: FinalEventData) {\n    var img = args.object as Img;\n}\n```\n\n- **failure** - arguments *FailureEventData*\n\nThis event is fired after the fetch of the final image failed.\n\n```xml\n\u003c@nativescript-community/ui-image:Img failure=\"onFailure\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onFailure(args) {\n    var img = args.object;\n}\nexports.onFailure = onFailure;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, FailureEventData } from \"@nativescript-community/ui-image\";\n\nexport function onFailure(args: FailureEventData) {\n    var img = args.object as Img;\n}\n```\n\n- **intermediateImageSet** - arguments *IntermediateEventData* (Android only)\n\nThis event is fired after any intermediate image has been set.\n\n```xml\n\u003c@nativescript-community/ui-image:Img intermediateImageSet=\"onIntermediateImageSet\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onIntermediateImageSet(args) {\n    var img = args.object;\n}\nexports.onIntermediateImageSet = onIntermediateImageSet;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, IntermediateEventData } from \"@nativescript-community/ui-image\";\n\nexport function onIntermediateImageSet(args: IntermediateEventData) {\n    var img = args.object as Img;\n}\n```\n\n- **intermediateImageFailed** - arguments *FailureEventData* (Android only)\n\nThis event is fired after the fetch of the intermediate image failed.\n\n```xml\n\u003c@nativescript-community/ui-image:Img intermediateImageFailed=\"onIntermediateImageFailed\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction intermediateImageFailed(args) {\n    var img = args.object;\n}\nexports.intermediateImageFailed = intermediateImageFailed;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, FailureEventData } from \"@nativescript-community/ui-image\";\n\nexport function intermediateImageFailed(args: FailureEventData) {\n    var img = args.object as Img;\n}\n```\n\n- **submit** - arguments *EventData* (Android only)\n\nThis event is fired before the image request is submitted.\n\n```xml\n\u003c@nativescript-community/ui-image:Img submit=\"onSubmit\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onSubmit(args) {\n    var img = args.object;\n}\nexports.onSubmit = onSubmit;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, EventData } from \"@nativescript-community/ui-image\";\n\nexport function onSubmit(args: EventData) {\n    var img = args.object as Img;\n}\n```\n\n- **release** - arguments *EventData* (Android only)\n\nThis event is fired after the controller released the fetched image.\n\n```xml\n\u003c@nativescript-community/ui-image:Img release=\"onRelease\"/\u003e\n```\n\nJavaScript:\n\n```javascript\nfunction onRelease(args) {\n    var img = args.object;\n}\nexports.onRelease = onRelease;\n```\n\nTypeScript:\n\n```typescript\nimport {Img, EventData } from \"@nativescript-community/ui-image\";\n\nexport function onRelease(args: EventData) {\n    var img = args.object as Img;\n}\n```\n\n#### Event arguments\n\nInstances of this class are provided to the handlers of the *finalImageSet*.\n\n```typescript\nimport {Img, FinalEventData, ImageInfo, AnimatedImage } from \"@nativescript-community/ui-image\";\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 {Img, FailureEventData, imageModuleError } from \"@nativescript-community/ui-image\";\n\nexport function onFailure(args: FailureEventData) {\n    var error: imageModuleError = 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 {Img, IntermediateEventData, ImageInfo } from \"@nativescript-community/ui-image\";\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 {Img, EventData } from \"@nativescript-community/ui-image\";\n\nexport function onSubmit(args: EventData) {\n    var img = args.object as Img;\n}\n```\n\n\n### Properties\n\n- **src** \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\u003c@nativescript-community/ui-image:Img src=\"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 Img instances.*\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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 src is not successful.\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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 Img instance to achieve advanced behaviors:\n\n- **backgroundUri**  (Android only)\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 Img.\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 Img instances.*\n\n```xml\n\u003c@nativescript-community/ui-image:Img backgroundUri=\"~/image.jpg\"/\u003e\n```\n\n- **stretch** \n\nString value used by Img 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'*aspectFit*' - 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'*fill*' - 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'*aspectFill*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.\n\n\n```xml\n\u003c@nativescript-community/ui-image:Img stretch=\"centerInside\"/\u003e\n```\n\n- **fadeDuration** \n\nNumber value used for the fade-in duration. This value is in milliseconds.\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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\u003c@nativescript-community/ui-image:Img blurRadius=\"25\"/\u003e\n```\n\n- **blurDownSampling**  (Android only)\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\u003c@nativescript-community/ui-image:Img 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 Img to 'top' or 'bottom' in order to \"anchor\" the img and achieve dynamic sizing.*\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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 imageModule drawable.\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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 imageModule drawable.\n\n```xml\n\u003c@nativescript-community/ui-image:Img decodeHeight=\"100\"/\u003e\n```\n\n- **headers**\n\nObject that defines custom request headers to be sent with the image download request.\n\n```xml\n\u003c@nativescript-community/ui-image:Img headers=\"{Authorization: 'bearer abcdefghijk'}\"/\u003e\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\u003c@nativescript-community/ui-image:Img progressiveRenderingEnabled=\"true\"/\u003e\n```\n\n- **showProgressBar**\n\nBoolean value used for showing or hiding the progress bar.\n\n```xml\n\u003c@nativescript-community/ui-image:Img 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\u003c@nativescript-community/ui-image:Img 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\u003c@nativescript-community/ui-image:Img roundAsCircle=\"true\"/\u003e\n```\n\n- **roundTopLeftRadius** \n\nRadius of the Top Left corner in \n\n```xml\n\u003c@nativescript-community/ui-image:Img roundTopLeftRadius=\"50\"/\u003e\n```\n\n- **roundTopRightRadius** \n\nRadius of the Top Right corner in \n\n```xml\n\u003c@nativescript-community/ui-image:Img roundTopRightRadius=\"50\"/\u003e\n```\n- **roundBottomLeftRadius** \n\nRadius of the Bottom Left corner in \n\n```xml\n\u003c@nativescript-community/ui-image:Img roundBottomLeftRadius=\"50\"/\u003e\n```\n- **roundBottomRightRadius** \n\nRadius of the Bottom Right corner in \n\n```xml\n\u003c@nativescript-community/ui-image:Img roundBottomRightRadius=\"50\"/\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\u003c@nativescript-community/ui-image:Img autoPlayAnimations=\"true\"/\u003e\n```\n\n- **tapToRetryEnabled** (Android only)\n\nBoolean value used for enabling/disabling a tap to retry action for the download of the Img image.\n\n```xml\n\u003c@nativescript-community/ui-image:Img tapToRetryEnabled=\"true\"/\u003e\n```\n\n### Cache\nThe @nativescript-community/ui-image {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 'src'\nNot so rarely you may have a scenario where the actual image on your remote service from the `src` of the `Img` has changed but the {N} app already has an image in its internal cache. In such scenario you can easily 'refresh' the `src` by calling the `updateImageUri()`:\n\n```\n// 'img' is the instance the 'Img' in the project.\nimg.updateImageUri();\n```\n\n\n#### Clear everything from the cache\nManaging the caches in @nativescript-community/ui-image is done via the `ImagePipeline`. In order to get the reference of the ImagePipeline simply call the `getImagePipeline()` function:\n\n```\nvar imageModuleModel = require(\"@nativescript-community/ui-image\");\n\nvar imagePipeLine = imageModuleModel.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 (`src`). Evicting is done again via the ImagePipeline:\n\n```\nvar imageModuleModel = require(\"@nativescript-community/ui-image\");\n\nvar imagePipeLine = imageModuleModel.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 imageModule library\nIn very very rare occasions the native Android imageModule 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-community/ui-image 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 imageModuleModule from \"@nativescript-community/ui-image\";\n\nif (app.android) {\n    app.on(app.exitEvent, (args) =\u003e {\n        imageModuleModule.shutDown();\n    });\n}\n```\n\n\r\n[](#flavors)\r\n\r\n\r\n[](#flavors)\r\n\r\n## Flavors\n\nUsing core\n```xml\n\u003cPage\n    xmlns=\"http://www.nativescript.org/tns.xsd\" \n    xmlns:@nativescript-community/ui-image=\"@nativescript-community/ui-image\"\u003e\n    \u003c@nativescript-community/ui-image:Img width=\"250\" height=\"250\"\n                                      src=\"\u003curi-to-a-photo-from-the-web-or-a-local-resource\u003e\"/\u003e\n\u003c/Page\u003e\n```\n\nOther flavors are presented in the demo apps that you can find under `demo-snippets`\n\n\r\n[](#demos)\r\n\r\n\r\n[](#demos)\r\n\r\n## Demos\nThis repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-image\n$ cd ui-image\n$ npm i\n$ npm run setup\n$ npm run build # \u0026\u0026 npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte\n$ ns run ios|android\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003eimage-colorfilter\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-image-colorfilter\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-image-colorfilter?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-image-colorfilter.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-image-colorfilter\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-image-colorfilter.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003ecolor matrix filters for @nativescript-community/ui-image\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [setup](#setup)\r\n* [Demos](#demos)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos-1)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-image-colorfilter`\n\n\r\n[](#setup)\r\n\r\n\r\n[](#setup)\r\n\r\n## setup\n\n```typescript\nimport { installMixins } from \"@nativescript-community/ui-image-colorfilter\";\n\n//do this before creating any image view\ninstallMixins();\n```\n\n\nIt adds one property `colorMatrix` which is a `number[]`\nYou can find samples color matrix [here](https://github.com/skratchdot/color-matrix)\n\n\r\n[](#demos)\r\n\r\n\r\n[](#demos)\r\n\r\n## Demos\nThis repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-image\n$ cd ui-image\n$ npm i\n$ npm run setup\n$ npm run build # \u0026\u0026 npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte\n$ ns run ios|android\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\u003cdetails open\u003e\n\u003csummary\u003e\u003cb\u003ezoomimage\u003c/b\u003e\u003c/summary\u003e\n\n\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-zoomimage\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-zoomimage?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-zoomimage.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-zoomimage\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-zoomimage.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eZoomable image view based on @nativescript-community/ui-image\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-ios.gif\" height=\"500\" /\u003e | \u003cimg src=\"https://github.com/nativescript-community/ui-image/raw/master/images/demo-android.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [setup](#setup)\r\n* [Demos](#demos)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos-1)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-zoomimage`\n\n\r\n[](#setup)\r\n\r\n\r\n[](#setup)\r\n\r\n## setup\n\n```javascript\nimport imageModule = require(\"@nativescript-community/ui-zoomimage\");\n\n//do this before creating any image view\nimageModule.initialize({ isDownsampleEnabled: true });\n```\n\nThis component directly inherint `@nativescript-community/ui-image` so you can find the doc [here]()\n\nIt adds a few properties\n\n\r\n[](#demos)\r\n\r\n\r\n[](#demos)\r\n\r\n## Demos\nThis repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:\n```shell\n$ git clone https://github.com/@nativescript-community/ui-image\n$ cd ui-image\n$ npm i\n$ npm run setup\n$ npm run build # \u0026\u0026 npm run build.angular\n$ cd demo-ng # or demo-vue or demo-svelte\n$ ns run ios|android\n```\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\u003c/details\u003e\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-image/lists"}