@nativescript-community/ui-image 4.1.6 → 4.2.0

package/README.md

@@ -1,47 +1,78 @@
-# Welcome to NativeScript imageModule
-
-> A NativeScript Plugin for Android apps.
-
-[![Build Status](https://travis-ci.org/@nativescript-community/ui-image.svg?branch=master)](https://travis-ci.org/@nativescript-community/ui-image)
-[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-image.svg)](https://www.npmjs.com/package/@nativescript-community/ui-image)
-[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-image.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-image)
-[![Dependency status](https://david-dm.org/@nativescript-community/ui-image.svg)](https://david-dm.org/@nativescript-community/ui-image)
-[![peerDependencies Status](https://david-dm.org/@nativescript-community/ui-image/peer-status.svg)](https://david-dm.org/@nativescript-community/ui-image?type=peer)
-
-
-<!-- TOC depthFrom:2 depthTo:3 -->
-
-- [What is `@nativescript-community/ui-image`?](#what-is-@nativescript-community/ui-image)
-- [How to use `@nativescript-community/ui-image`?](#how-to-use-@nativescript-community/ui-image)
-    - [In vanila NativeScript](#in-vanila-nativescript)
-    - [In NativeScript + Angular 2](#in-nativescript--angular-2)
-- [Examples](#examples)
-- [Features](#features)
-    - [Basic attributes](#basic-attributes)
-    - [Advanced *optional* attributes](#advanced-optional-attributes)
-    - [Events](#events)
-    - [Cache](#cache)
-- [Sample Screenshots](#sample-screenshots)
-- [Contribute](#contribute)
-- [Get Help](#get-help)
-
-<!-- /TOC -->
-
-## What is `@nativescript-community/ui-image`?
-`@nativescript-community/ui-image` is a NativeScript plugin for efficiently displaying images on iOS and Android. It uses imageModule on [Android](https://code.facebook.com/posts/366199913563917/introducing-imageModule-a-new-image-library-for-android/) and [SDWebImage](https://sdwebimage.github.io/) on iOS
-
-## How to use `@nativescript-community/ui-image`?
-
-### In vanila NativeScript
-#### From npm
-1. Go to the root folder of your {N} application where you would like to install the plugin and type `tns plugin add @nativescript-community/ui-image`.
-4. Initialize `@nativescript-community/ui-image` in the `launch` event of your {N} application by using the following code:
-
-#### From local repo?
-1. Clone the repository and go to the root directory on your computer.
-2. Use `tsc` to transpile the `.ts` sources: `tsc -p`.
-3. Go to the root folder of your {N} application where you would like to install the plugin and type `tns plugin add <path-to-imageModule-repo-dir>`.
-4. When working with "downsampling" you will need to initialize the image a configuration to the `initialize` function:
+<!-- ⚠️ This README has been generated from the file(s) "blueprint.md" ⚠️-->
+<!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      DO NOT EDIT THIS READEME DIRECTLY! Edit "bluesprint.md" instead.
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+<h1 align="center">@nativescript-community/ui-image</h1>
+<p align="center">
+		<a href="https://npmcharts.com/compare/@nativescript-community/ui-image?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@nativescript-community/ui-image.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@nativescript-community/ui-image"><img alt="NPM Version" src="https://img.shields.io/npm/v/@nativescript-community/ui-image.svg" height="20"/></a>
+	</p>
+
+<p align="center">
+  <b>Advanced and efficient image display plugin which uses Fresco (Android) and SDWebImage (iOS) to implement caching, placeholders, image effects, and much more.</b></br>
+  <sub><sub>
+</p>
+
+<br />
+
+
+| <img src="https://github.com/nativescript-community/ui-image/raw/master/images/demo-ios.gif" height="500" /> | <img src="https://github.com/nativescript-community/ui-image/raw/master/images/demo-android.gif" height="500" /> |
+| --- | ----------- |
+| iOS Demo | Android Demo |
+
+
+[](#table-of-contents)
+
+## Table of Contents
+
+* [Installation](#installation)
+* [setup](#setup)
+* [API](#api)
+	* [Events](#events)
+		* [Event arguments](#event-arguments)
+	* [Properties](#properties)
+	* [Advanced *optional* attributes](#advanced-optional-attributes)
+	* [Cache](#cache)
+		* ['Refresh' the 'src'](#refresh-the-src)
+		* [Clear everything from the cache](#clear-everything-from-the-cache)
+		* [Evict all images with a specific URI from the cache](#evict-all-images-with-a-specific-uri-from-the-cache)
+		* [Manually shut down the native imageModule library](#manually-shut-down-the-native-imagemodule-library)
+* [Flavors](#flavors)
+* [Demos](#demos)
+* [Demos and Development](#demos-and-development)
+	* [Setup](#setup)
+	* [Build](#build)
+	* [Demos](#demos-1)
+* [Questions](#questions)
+
+
+[](#installation)
+
+## Installation
+Run the following command from the root of your project:
+
+`ns plugin add @nativescript-community/ui-image`
+
+
+[](#setup)
+
+## setup
 
 ```javascript
 import imageModule = require("@nativescript-community/ui-image");
@@ -50,234 +81,14 @@ import imageModule = require("@nativescript-community/ui-image");
 imageModule.initialize({ isDownsampleEnabled: true });
 ```
 
-
-Use `imageModule` in the XML definition of the page as follows:
-
-```xml
-<Page
-    xmlns="http://www.nativescript.org/tns.xsd" 
-    xmlns:@nativescript-community/ui-image="@nativescript-community/ui-image">
-    <@nativescript-community/ui-image:Img width="250" height="250"
-                                      src="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
-</Page>
-```
-
-### In NativeScript + Angular 2
-
-1. Import the `TNSImageModule` from `@nativescript-community/ui-image/angular` and add it to the `imports` of your initial `@NgModule`, like shown [here](https://github.com/nativescript-community/ui-image/blob/master/demo-angular/app/app.module.ts).
-2. As described above make sure to initialize the `@nativescript-community/ui-image` plugin in the `launch` event of your {N} application.
-
-## Examples
-You can refer the [demo-angular](https://github.com/nativescript-community/ui-image/tree/master/demo-angular) folder of the repo for runnable {N} project that demonstrates the @nativescript-community/ui-image plugin with all of its features in action.
-
-## Features
-
-### Basic attributes
-
-- **src** 
-
-String 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.
-
-```xml
-<@nativescript-community/ui-image:Img src="https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png"/>
-```
-
-- **placeholderImageUri** 
-
-String 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.
-
-**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.*
-
-```xml
-<@nativescript-community/ui-image:Img placeholderImageUri="~/placeholder.jpg"/>
-```
-
-- **failureImageUri** 
-
-String 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.
-
-```xml
-<@nativescript-community/ui-image:Img failureImageUri="~/failure.jpg"/>
-```
-
-
-### Advanced *optional* attributes
-
-There are a couple of *optional* attributes that could be set on the Img instance to achieve advanced behaviors:
-
-- **backgroundUri**  (Android only)
-
-String 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.
-
-**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.*
-
-```xml
-<@nativescript-community/ui-image:Img backgroundUri="~/image.jpg"/>
-```
-
-- **stretch** 
-
-String value used by Img image scale type. This property can be set to:
-
-'*center*' - Performs no scaling.
-
-'*centerCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
-
-'*centerInside*' - Scales the child so that it fits entirely inside the parent.
-
-'*fitCenter*' - Scales the child so that it fits entirely inside the parent.
-
-'*aspectFit*' - Scales the child so that it fits entirely inside the parent.
-
-'*fitStart*' - Scales the child so that it fits entirely inside the parent.
-
-'*fitEnd*' - Scales the child so that it fits entirely inside the parent.
-
-'*fitXY*' - Scales width and height independently, so that the child matches the parent exactly.
-
-'*fill*' - Scales width and height independently, so that the child matches the parent exactly.
-
-'*focusCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
-
-'*aspectFill*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
-
-
-```xml
-<@nativescript-community/ui-image:Img stretch="centerInside"/>
-```
-
-- **fadeDuration** 
-
-Number value used for the fade-in duration. This value is in milliseconds.
-
-```xml
-<@nativescript-community/ui-image:Img fadeDuration="3000"/>
-```
-
-- **blurRadius** 
-
-Number 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.
-
-```xml
-<@nativescript-community/ui-image:Img blurRadius="25"/>
-```
-
-- **blurDownSampling**  (Android only)
-
-Number 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.
-
-```xml
-<@nativescript-community/ui-image:Img blurDownSampling="2"/>
-```
-
-- **aspectRatio** 
-
-Number 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. 
-
-*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.*
-
-```xml
-<@nativescript-community/ui-image:Img aspectRatio="1.33" verticalAlignment="top"/>
-```
-
-- **decodeWidth** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.
-
-Number value used as the downsampled width of the imageModule drawable.
-
-```xml
-<@nativescript-community/ui-image:Img decodeWidth="100"/>
-```
-
-- **decodeHeight** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.
-
-Number value used as the downsampled width of the imageModule drawable.
-
-```xml
-<@nativescript-community/ui-image:Img decodeHeight="100"/>
-```
-
-
-- **progressiveRenderingEnabled**
-
-Boolean 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.
-
-```xml
-<@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
-```
-
-- **showProgressBar**  (Android only)
-
-Boolean value used for showing or hiding the progress bar.
-
-```xml
-<@nativescript-community/ui-image:Img showProgressBar="true"/>
-```
-
-- **progressBarColor**  (Android only)
-
-String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
-
-```xml
-<@nativescript-community/ui-image:Img progressBarColor="blue"/>
-```
-
-- **roundAsCircle** 
-
-Boolean 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.
-
-```xml
-<@nativescript-community/ui-image:Img roundAsCircle="true"/>
-```
-
-- **roundTopLeftRadius** 
-
-Radius of the Top Left corner in 
-
-```xml
-<@nativescript-community/ui-image:Img roundTopLeftRadius="50"/>
-```
-
-- **roundTopRightRadius** 
-
-Radius of the Top Right corner in 
-
-```xml
-<@nativescript-community/ui-image:Img roundTopRightRadius="50"/>
-```
-- **roundBottomLeftRadius** 
-
-Radius of the Bottom Left corner in 
-
-```xml
-<@nativescript-community/ui-image:Img roundBottomLeftRadius="50"/>
-```
-- **roundBottomRightRadius** 
-
-Radius of the Bottom Right corner in 
-
-```xml
-<@nativescript-community/ui-image:Img roundBottomRightRadius="50"/>
-```
-
-- **autoPlayAnimations** 
-
-Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.
-
-```xml
-<@nativescript-community/ui-image:Img autoPlayAnimations="true"/>
-```
-
-- **tapToRetryEnabled** (Android only)
-
-Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.
-
-```xml
-<@nativescript-community/ui-image:Img tapToRetryEnabled="true"/>
-```
+
+[](#api)
+
+## API
 
 ### Events
 
-- **finalImageSet** - arguments *FinalEventData*
+ **finalImageSet** - arguments *FinalEventData*
 
 This 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.
 
@@ -442,10 +253,6 @@ export function onRelease(args: EventData) {
 
 #### Event arguments
 
-All events exposed by '@nativescript-community/ui-image' 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:
-
-- **FinalEventData**
-
 Instances of this class are provided to the handlers of the *finalImageSet*.
 
 ```typescript
@@ -501,6 +308,210 @@ export function onSubmit(args: EventData) {
 }
 ```
 
+
+### Properties
+
+- **src** 
+
+String 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.
+
+```xml
+<@nativescript-community/ui-image:Img src="https://docs.nativescript.org/angular/img/cli-getting-started/angular/chapter0/NativeScript_logo.png"/>
+```
+
+- **placeholderImageUri** 
+
+String 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.
+
+**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.*
+
+```xml
+<@nativescript-community/ui-image:Img placeholderImageUri="~/placeholder.jpg"/>
+```
+
+- **failureImageUri** 
+
+String 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.
+
+```xml
+<@nativescript-community/ui-image:Img failureImageUri="~/failure.jpg"/>
+```
+
+
+### Advanced *optional* attributes
+
+There are a couple of *optional* attributes that could be set on the Img instance to achieve advanced behaviors:
+
+- **backgroundUri**  (Android only)
+
+String 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.
+
+**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.*
+
+```xml
+<@nativescript-community/ui-image:Img backgroundUri="~/image.jpg"/>
+```
+
+- **stretch** 
+
+String value used by Img image scale type. This property can be set to:
+
+'*center*' - Performs no scaling.
+
+'*centerCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
+
+'*centerInside*' - Scales the child so that it fits entirely inside the parent.
+
+'*fitCenter*' - Scales the child so that it fits entirely inside the parent.
+
+'*aspectFit*' - Scales the child so that it fits entirely inside the parent.
+
+'*fitStart*' - Scales the child so that it fits entirely inside the parent.
+
+'*fitEnd*' - Scales the child so that it fits entirely inside the parent.
+
+'*fitXY*' - Scales width and height independently, so that the child matches the parent exactly.
+
+'*fill*' - Scales width and height independently, so that the child matches the parent exactly.
+
+'*focusCrop*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
+
+'*aspectFill*' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.
+
+
+```xml
+<@nativescript-community/ui-image:Img stretch="centerInside"/>
+```
+
+- **fadeDuration** 
+
+Number value used for the fade-in duration. This value is in milliseconds.
+
+```xml
+<@nativescript-community/ui-image:Img fadeDuration="3000"/>
+```
+
+- **blurRadius** 
+
+Number 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.
+
+```xml
+<@nativescript-community/ui-image:Img blurRadius="25"/>
+```
+
+- **blurDownSampling**  (Android only)
+
+Number 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.
+
+```xml
+<@nativescript-community/ui-image:Img blurDownSampling="2"/>
+```
+
+- **aspectRatio** 
+
+Number 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. 
+
+*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.*
+
+```xml
+<@nativescript-community/ui-image:Img aspectRatio="1.33" verticalAlignment="top"/>
+```
+
+- **decodeWidth** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.
+
+Number value used as the downsampled width of the imageModule drawable.
+
+```xml
+<@nativescript-community/ui-image:Img decodeWidth="100"/>
+```
+
+- **decodeHeight** (downsampling) - make sure to enable downsample (**isDownsampleEnabled**) in the initialize function of the plugin otherwise this property is disregarded.
+
+Number value used as the downsampled width of the imageModule drawable.
+
+```xml
+<@nativescript-community/ui-image:Img decodeHeight="100"/>
+```
+
+
+- **progressiveRenderingEnabled**
+
+Boolean 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.
+
+```xml
+<@nativescript-community/ui-image:Img progressiveRenderingEnabled="true"/>
+```
+
+- **showProgressBar**  (Android only)
+
+Boolean value used for showing or hiding the progress bar.
+
+```xml
+<@nativescript-community/ui-image:Img showProgressBar="true"/>
+```
+
+- **progressBarColor**  (Android only)
+
+String value used for setting the color of the progress bar. You can set it to hex values ("*#FF0000*") and/or predefined colors ("*green*").
+
+```xml
+<@nativescript-community/ui-image:Img progressBarColor="blue"/>
+```
+
+- **roundAsCircle** 
+
+Boolean 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.
+
+```xml
+<@nativescript-community/ui-image:Img roundAsCircle="true"/>
+```
+
+- **roundTopLeftRadius** 
+
+Radius of the Top Left corner in 
+
+```xml
+<@nativescript-community/ui-image:Img roundTopLeftRadius="50"/>
+```
+
+- **roundTopRightRadius** 
+
+Radius of the Top Right corner in 
+
+```xml
+<@nativescript-community/ui-image:Img roundTopRightRadius="50"/>
+```
+- **roundBottomLeftRadius** 
+
+Radius of the Bottom Left corner in 
+
+```xml
+<@nativescript-community/ui-image:Img roundBottomLeftRadius="50"/>
+```
+- **roundBottomRightRadius** 
+
+Radius of the Bottom Right corner in 
+
+```xml
+<@nativescript-community/ui-image:Img roundBottomRightRadius="50"/>
+```
+
+- **autoPlayAnimations** 
+
+Boolean value used for enabling the automatic playing of animated images. Note that rounding of such images is not supported and will be ignored.
+
+```xml
+<@nativescript-community/ui-image:Img autoPlayAnimations="true"/>
+```
+
+- **tapToRetryEnabled** (Android only)
+
+Boolean value used for enabling/disabling a tap to retry action for the download of the Img image.
+
+```xml
+<@nativescript-community/ui-image:Img tapToRetryEnabled="true"/>
+```
+
 ### Cache
 The @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.
 
@@ -581,22 +592,79 @@ if (app.android) {
 }
 ```
 
-## Sample Screenshots
+
+[](#flavors)
+
+## Flavors
+
+Using core
+```xml
+<Page
+    xmlns="http://www.nativescript.org/tns.xsd" 
+    xmlns:@nativescript-community/ui-image="@nativescript-community/ui-image">
+    <@nativescript-community/ui-image:Img width="250" height="250"
+                                      src="<uri-to-a-photo-from-the-web-or-a-local-resource>"/>
+</Page>
+```
+
+Other flavors are presented in the demo apps that you can find under `demo-snippets`
+
+
+[](#demos)
+
+## Demos
+This repository includes Angular, Vue.js demos. In order to run these execute the following in your shell:
+```shell
+$ git clone https://github.com/@nativescript-community/ui-image
+$ cd ui-image
+$ npm i
+$ npm run setup
+$ npm run build # && npm run build.angular
+$ cd demo-ng # or demo-vue or demo-svelte
+$ ns run ios|android
+```
+
+
+[](#demos-and-development)
+
+## Demos and Development
+
+
+### Setup
+
+To run the demos, you must clone this repo **recursively**.
+
+```
+git clone https://github.com/@nativescript-community/ui-image.git --recursive
+```
+
+**Install Dependencies:**
+```bash
+npm i # or 'yarn install' or 'pnpm install'
+```
+
+**Interactive Menu:**
 
-All of the images are sample images for showcasing purposes.
+To start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.
 
-Sample 1 - Placeholder image |  Sample 2 - Transition (fade-in animation)
--------- | ---------
-![Placeholder image sample](screenshots/screen1-with-placeholder.png) | ![Transition sample](screenshots/screen2-transition-effect.png)
+### Build
 
-Sample 3 - Image shown successfully from src |  Sample 4 - 'Failure' image shown
--------- | ---------
-![Successfully shown image sample](screenshots/screen3-successful-show.png) | ![Successfully shown image sample](screenshots/screen4-unsuccessful-show.png)
+```bash
+npm run build
 
-## Contribute
-We 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-community/ui-image/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
+npm run build.angular # or for Angular
+```
 
-## Get Help 
-Please, use [github issues](https://github.com/nativescript-community/ui-image/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).
+### Demos
+
+```bash
+npm run demo.[ng|react|svelte|vue].[ios|android]
+
+npm run demo.svelte.ios # Example
+```
+
+[](#questions)
+
+## Questions
 
-![](https://ga-beacon.appspot.com/UA-111455-24/@nativescript-community/ui-image?pixel)
+If 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).

package/angular/directives.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class ImgDirective {
     constructor();
-    static ɵfac: i0.ɵɵFactoryDef<ImgDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<ImgDirective, "NSImg", never, {}, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImgDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ImgDirective, "NSImg", never, {}, {}, never, never, false>;
 }
 export declare const NSIMG_DIRECTIVES: (typeof ImgDirective)[];