Nativescript-fresco with ng2+Natiivescript

Question

I followed the guidelines to use nativescript-fresco with ng2+nativescript for my android app because it was crashing every time I scrolled more than once down then up. The component in which I'm using it is a listview which displays 20 online images. The urls are passed from the parent component through a @Input directive which works. However, when I switched to FrescoDrawee, the listview is rendered but the images are not.

Here is the html for the component

<GridLayout columns="*,*,*,*,*,*,*,*,*" height="100" class="item"
            xmlns:nativescript-fresco="nativescript-fresco">
    <ios>
        <Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="ios-product-image" (tap)="details(data)"></Image>
    </ios>
    <android>
        <!--<Image [src]="data.imageUrl" row="0" col="0" colspan="3" class="android-product-image" (tap)="details(data)"></Image>-->
        <nativescript-fresco:FrescoDrawee width="100" height="100"
                                          [imageUri]="data.imageUrl"
        ></nativescript-fresco:FrescoDrawee>
    </android>

    <StackLayout row="0" col="3" colSpan="5" (tap)="details(data)">
        <Label [text]="data.name" class="product-name"></Label>
        <Label [text]="data.description" textWrap="true" class="product-description"></Label>
        <GridLayout columns="*,*,*,*,*,*,*,*,*,*" class="increment-decrement" style="width: 100%; height: 20%; vertical-align: bottom">
            <Label [text]="data.price" class="product-price" col="0" colSpan="5"></Label>
            <ios>
                <Button text="-" col="5" colSpan="1" (tap)="dec()"></Button>
                <Label [text]="count" col="6" colSpan="3" class="product-amount" ></Label>
                <Button text="+" col="9" colSpan="1" (tap)="inc()"></Button>
            </ios>
            <android>
                <Label text="-" col="5" colSpan="1" class="inc-dec" (tap)="dec()"></Label>
                <Label [text]="count" col="6" colSpan="3" class="product-amount"></Label>
                <Label text="+" col="9" colSpan="1" class="inc-dec" (tap)="inc()"></Label>
            </android>

        </GridLayout>
    </StackLayout>


    <ios>
        <Button col="11" class="cart" colSpan="1"></Button>
    </ios>


    <android>
        <Label col="11" class="cart" colSpan="1"></Label>
    </android>

    <Image src="~/media/ic_add_shopping_cart_white_24dp.png" col="11"
           style="height: 20%; width: 20%;" (tap)="addToCart()"></Image>

</GridLayout>

And this is the Type-script

import { Component, OnInit, Input} from "@angular/core";
import LabelModule = require("ui/label");
import application = require("application");
import { RouterExtensions } from "nativescript-angular/router";
import { PublicVariables } from "../../shared/publicVariables";


@Component({
  selector:'product-list',
  templateUrl: 'pages/products/product_list.html',
  styleUrls: ['pages/products/product_list-common.css',      'pages/products/product_list.css']
})

export class ProductListComponent implements OnInit {
   @Input() data: any;
   private count=0;

constructor(private routerExtensions: RouterExtensions) {}

ngOnInit() {

}
details() {
    this.routerExtensions.navigate(["/product/:id"]);
    PublicVariables.currentProduct = this.data;
}
inc() {
    ++this.count;
}
dec() {
    if(this.count>0) {
        --this.count;
    }
}
}

I'm relatively new to native-script so my code may not be the cleanest. I have added the nativescript-fresco plugin to my project, imported and initialized it in AppModule. What I don't know is if I need to add anything to the component itself apart from the FrescoDrawee tag because I didn't see anything indicating that in the documentation.

Kindly help me figure out what the problem with my code?

score 0 · Accepted Answer · answered Feb 07 '17 at 13:15

0

I think the problem is with the prefix, you can use it as:

<FrescoDrawee width="100" height="100" [imageUri]="data.imageUrl"></FrescoDrawee>

And for sake of completeness this is what needs to be added to app.module.ts when used with Angular:

import { TNSFrescoModule } from "nativescript-fresco/angular";
import fresco = require("nativescript-fresco");
import application = require("application");

if (application.android) {
  application.onLaunch = function (intent) {
    fresco.initialize();
  };
}

@NgModule({
  imports: [
    TNSFrescoModule

answered Feb 07 '17 at 13:15

Eddy Verbruggen

3,550
1
15
27

Thanks Eddy. What you suggested is exactly what i needed to do. I made the changes exactly as you advised and now my app works. You saved me hours of trying to crack the problem. Thanks again – G-John Feb 08 '17 at 06:03
I noted that this solution caused problems with the iOS app since nativescript-fresco is only initialized for android. The FrescoDrawee tag breaks the iOS app even thoough it is wrapped within tags. I had to add *ngIf=isAndroid and the respective function to tell iOS to ignore the element. Just thought I should add that for anyone who uses this solution – G-John Feb 08 '17 at 06:44
Yep, had to do something similar. I found using 2 different templates (per platform) was the way to go in my case. – Eddy Verbruggen Feb 08 '17 at 06:45

Nativescript-fresco with ng2+Natiivescript

1 Answers1