finally i was able to do image caching with observables but but there are some questions left:

1. is this.cache.enableDownload(); and this.cache.disableDownload(); are in right positions
2. for some reason, images are shown with big delay (after some random dom rerender), if i am not adding cd.detectChanges();

here is my pipe:

import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { Cache } from 'tns-core-modules/ui/image-cache';
import { ImageSource, fromNativeSource } from 'tns-core-modules/image-source';
import { Observable } from 'rxjs';

@Pipe({
    name: 'fromCache',
    pure: true,
})
export class ImageCachePipe implements PipeTransform {
    private cache: Cache;

    constructor(private cd: ChangeDetectorRef) {
        this.cache = new Cache();
        this.cache.placeholder = ImageSource.fromFileSync('~/assets/images/temp-icon.jpg');
        this.cache.maxRequests = 10;
    }

    transform(url: string): any {
        this.cache.enableDownload();

        return new Observable(observer => {

            const imageFromCache = this.cache.get(url);

            if (imageFromCache) {
                observer.next(imageFromCache);
                observer.complete();
                this.cache.disableDownload();
                return;
            }

            observer.next(this.cache.placeholder);

            this.cache.push({
                key: url,
                url,
                completed: (image: any, key: string) => {
                    if (url === key) {
                        observer.next(new ImageSource(image));
                        observer.complete();
                        this.cache.disableDownload();
                        this.cd.detectChanges();
                    }
                }
            });

        });
    }
}

I'm also struggling with this. Whenever I return an observable I get this error. The method setNativeSource() expects UIImage instance.

I've simplified the transform method to this to try and pinpoint the problem.

transform(url: string): Observable<ImageSource> {
    return new Observable(observer => {
      var image = ImageSource.fromFileOrResourceSync('~/assets/images/rest-day-320.jpg');
      observer.next(image);
      observer.complete();
    });
}

If I return the ImageSource directly then it works as expected. Any help would be greatly appreciated. This is what the html looks like.

<Image [src]="day.thumbnailUrl | encodeUrl | imageCache" loadMode="async" class="card-left-image"  stretch="aspectFill">
</Image>

EDIT: I didn't know I had to add the async pipe after. After adding | async to the [src] everything works as expected.