0

I am not quite sure that the title is the appropriate, because I don´t know whether 'repaint' is correct. Nevertheless I think is clear what it means.

I am using the plugin '@proplugin/nativescript-platform-css' and followed Tiago's Alves excellent blog.

As I am using angular I require the plugin in the main.tns.ts

import { platformNativeScriptDynamic } from 'nativescript-angular/platform';

import { AppModule } from '@src/app/app.module';

require( '@proplugins/nativescript-platform-css' );

platformNativeScriptDynamic().bootstrapModule(AppModule);

I am dynamically changing the rows and columns depending on the device width:

HTML

<GridLayout (layoutChanged)="updateLayout($event)" horizontalAlignment="center" verticalAlignment="center" class="wrap-login100"
[class.phone]="gridLayout.isPhone" [class.tablet]="!gridLayout.isPhone"
row="1" 
[rows]="gridLayout.rows"
[columns]="gridLayout.columns">
  <StackLayout marginBottom="50" [col]="gridLayout.image.col" [row]="gridLayout.image.row" verticalAlignment="center" class="login100-pic">

UPDATE LAYOUT EVENT

updateLayout(value) {
  this.zone.run(() => {
  this.gridLayout = this.platformService.updateLayout('login');
  });
 }

UPDATE METHOD

updateLayout(route) {
let width;
width = screen.mainScreen.widthDIPs;

  let gridLayout;
if (width < 1000) {
  gridLayout = {
    isPhone: true,
    columns: '*',
    rows: '*,2*',
    image: {
      row: 0,
      col: 0
    },
    form: {
      row: 1,
      col: 0
    }
  };
} else {
  gridLayout =  {
    isPhone: false,
  columns: '*,2*',
  rows: '*',
  image: {
    row: 0,
    col: 0
  },
  form: {
    row: 0,
    col: 1
  }
};
}
return gridLayout;
}

When the app started I triggered the updateLayout method and the pp will paint correctly the layout, either tablet or phone. When I change then the orientation, the updateLayout method is also triggered returning the appropriate gridLayout object but nothing happens on the screen.

As you can see in the code I tried to use the angular zone, but nothing changed.

Any ideas will be appreciated as I don't really know where to look...

ampgular
  • 91
  • 1
  • 3
  • The blog assumes you are using Core flavor, refer the [Angular section in the plugin docs](https://npm.proplugins.org/-/web/detail/@proplugins/nativescript-platform-css). This plugin should be compatible with Playground, so if you still have issues please share a Playground Sample. – Manoj Sep 22 '19 at 13:13
  • thks, @Manoj , I was already following the docs in the link. I will try to recreate it in Playgroind – ampgular Sep 23 '19 at 17:10

0 Answers0