aspectRatio doesn't work on NS 3.0

[smarza]

Hello @VladimirAmiorkov @ginev @sis0k0 @rbasniak,

I upgraded my project to NS3.0 and after that, all my seems to be rendered with height="1" (like a squeezed pancake :) ).

It is easy to recreate this issue in a blank project NS3.0 Angular Project.

To do so, create a new NS project: tns create HelloWorld --template nativescript-template-ng-tutorial

Add the Fresco Plugin: tns plugin add nativescript-fresco

Add the base code: app.module.ts

...
import { TNSFrescoModule } from "nativescript-fresco/angular";
import * as frescoModule from "nativescript-fresco";
import * as applicationModule from "application";

if (applicationModule.android) {
    applicationModule.on("launch", () => {
        frescoModule.initialize();
    });
}
...

Just for records: Here is the untouched package.json.

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.teste2",
    "tns-android": {
      "version": "3.0.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript-angular": "~3.0.0",
    "nativescript-fresco": "^3.0.2",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "~3.0.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.4.0",
    "typescript": "~2.2.1"
  }
}

Add the sample test code with some FrescoDrawee variations app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App"></ActionBar>
    <StackLayout>
        <Label text="Stacklayout"></Label>
        <FrescoDrawee #drawee verticalAlignment="center" aspectRatio="2" imageUri="~/images/apple.jpg"></FrescoDrawee>
        <Label text="GridLayout"></Label>
        <GridLayout rows="100">
            <FrescoDrawee row="0" #drawee verticalAlignment="center" aspectRatio="2" imageUri="~/images/apple.jpg"></FrescoDrawee>
        </GridLayout>
        <Label text="width:'50"></Label>
        <FrescoDrawee #drawee verticalAlignment="center" width="50" aspectRatio="2" imageUri="~/images/apple.jpg"></FrescoDrawee>
        <Label text="height: 50"></Label>
        <FrescoDrawee #drawee verticalAlignment="center" height="50" aspectRatio="2" imageUri="~/images/apple.jpg"></FrescoDrawee>
        <Label text="width: 50 height: 25"></Label>
        <FrescoDrawee #drawee verticalAlignment="center" width="50" height="25" aspectRatio="2" imageUri="~/images/apple.jpg"></FrescoDrawee>
    </StackLayout>
  `
})
export class AppComponent {
  }

This code renders like this:

The aspectRatio seems to be not working as it should. I suppose it should calculate the height of those images based on the width and aspectRatio value itself.

Does anyone knows if it is an real issue or if I'm doing some wrong ? Maybe it has a breaking change that I don't know since I am upgrading to NS3.0 version.

All my projects code is based on aspectRatio property, so It's really important. I do much appreciate your help.

Thanks in advance Ricardo

[smarza]

Any one please ?

[NickIliev]

@smarza it seems that setting verticalAlignment is causing you issue.

You can overcome this with using the actualImageScaleType on FrescoDrawee

actualImageScaleType
String value used by FrescoDrawee 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.

'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.

'focusCrop' - Scales the child so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

<nativescript-fresco:FrescoDrawee actualImageScaleType="centerInside"/>

e.g.

    <Label text="GridLayout with actualImageScaleType"></Label>
    <GridLayout rows="100">
        <FrescoDrawee row="0" actualImageScaleType="center"  #drawee imageUri="~/images/apple.png"></FrescoDrawee>
    </GridLayout>

[VladimirAmiorkov]

Closing this issue due to no activity. If you find this an interesting thread you can use the dedicated community forums here.