Nativescript 4 support

[Tyg-g]

I'm trying to use this plugin. I get an error right at installation.

npm i nativescript-web-image-cache
/path/to/project
├── [email protected] 
└── UNMET PEER DEPENDENCY [email protected]

npm WARN [email protected] requires a peer of tns-core-modules@^3.0.0 || ^3.0.0-rc.1 but none was installed.

[abhayastudios]

I had the same it will still work... If you want to get rid of the error message you can replace this in node_modules/nativescript-web-image-cache/package.json:

"peerDependencies": {
    "tns-core-modules": ">=3.0.0 || >=3.0.0-rc.1"
  },

I guess it would be best if this would be replaced in the repo indeed.

[Tyg-g]

I'm testing it but the image does not show. No error messages, any logs. I'm clueless.

[abhayastudios]

I had to make sure that the parent element had the width/height set before it showed. Hope that helps. Otherwise post some code to people can have a look at it... I am using NS 4.1 which is working fine for me.

[Tyg-g]

Thank you, I just found this out. If I set the heigth parameter, it is ok. Width is calculated. However it does not calculate the heigth from given or implicit width. For my project without automatic heigth it is quite unusable, I need functionality like the N's <Image> widget. Is it possible to achieve it somehow?

[abhayastudios]

Why not just set the parent's height to 100% and then WebImage will set its own size like Image would do.

[Tyg-g]

It is in a <ScrollView>, so setting the height is not possible.

I want to test the plugin more, but now I'm getting really strange errors, I cannot make it run.

[Tyg-g]

Ok it works now. It shows the image with 1px height. I really need automatic height in this case.

[abhayastudios]

Just now I ran into something similar and saw that it is because if you don't set a height this plugin will just get the screen height (instead of calculating the available height of the parent element). I solved it doing something like below, but I guess it would be better if this plugin would take care of it.

<StackLayout #parent (loaded)="onLoaded()">
  <WebImage #photo [height]="photoHeight" [src]="photoUrl" stretch="aspectFit">
  </WebImage>
</StackLayout>

import { screen } from 'platform';
import { layout } from 'utils/utils';

@ViewChild('parent') parent: ElementRef;
@ViewChild('photo') photo: ElementRef;

public photoObj:any;
public photoHeight:number=0;

public onLoaded() {
  setTimeout(() => {
    this.photoHeight = layout.toDeviceIndependentPixels(this.parent.nativeElement.getMeasuredHeight());
  },1);
}