Develop Reference

Nativescript Cardview Style

It doesn't show me the border and shadow of the CardView, it shows just a long line.
I have also shared the code that I have been trying with Nativescript for Angular:
<StackLayout>
<ListView [items]="locs">
<ng-template let-item="item">
<CardView class="card-style" margin="10" radius="50">
<GridLayout class="card-layout" rows="*,*,*,*,*,*" columns="*,*">
<Image width="100" height="100" [src]="item.image" col="0" row="0" rowSpan="6"></Image>
<Label [text]="item.name" fontWeight="Bold" col="1" row="0"></Label>
<Label [text]="'Local: ' + item.local" fontWeight="Bold" col="1" row="1"></Label>
<Label [text]="item.address" fontWeight="Bold" col="1" row="2"></Label>
<Label [text]="item.phone" fontWeight="Bold" col="1" row="3"></Label>
<Label [text]="item.city" col="1" row="4"></Label>
<Label textWrap="true" [text]="item.schedule" col="1" row="5"></Label>
</GridLayout>
</CardView>
</ng-template>
</ListView>

The next lines it should be added in the component.ts file:
import { registerElement } from '#nativescript/angular';
import { CardView } from '#nstudio/nativescript-cardview';
registerElement('CardView', () => CardView);

Nativescript listview Multiple arrays in each item

I am working with Nativescript ListView and have 4 arrays.
//name array
for (var i = 0; i < employeesJson2.length; i++) {
empNameArray.push(employeesJson2[i].Name)
}
// image array
for (var i = 0; i < employeesJson2.length; i++) {
empImageArray.push(employeesJson2[i].Image)
}
// phone array
for (var i = 0; i < employeesJson2.length; i++) {
empPhoneArray.push(employeesJson2[i].Phone)
}
// email array
for (var i = 0; i < employeesJson2.length; i++) {
empEmailArray.push(employeesJson2[i].Email)
}
I need to be able to utilize these 4 arrays in 1 listview row.
Currently I just have
<StackLayout orientation="vertical">
<ListView items="{{ empNameArray }}" id="rolePicker" itemTap="listViewRoleTap" style="text-align: center" rowHeight="50">
<ListView.itemTemplate>
<Label text="{{ $value }}" textWrap="true" style="padding-top: 10; font-size: 19" />
</ListView.itemTemplate>
</ListView>
</StackLayout>
If i add another listview item it doesn't display. Ideally the items would show up in the same row side by side. Am i missing a step? Should I be combining the arrays? If so, How?

Each list view template can only have one root element. That said if you want to visualize, let's say two or three labels, then you will need to wrap then in container layout.
e.g.
<ListView.itemTemplate>
<StackLayout>
<Label text="first label" />
<Label text="{{ $value }}" />
<Label text="third label" />
</StackLayout>
</ListView.itemTemplate>
Another thing - why iterating over one array to create four additional arrays? If your business logic allows then you can simply use the array with your JSON objects to populate your list view.
What $value is providing is an easy way to bind to value that is not a complex object like a string. So if your array items was of the following kind
var myArray = ["ab", "cd", "ef"];
Then you can use $value like in your example to render each of the value of the current item.
e.g.
<ListView items="{{ myArray }}">
<ListView.itemTemplate>
<Label text="{{ $value }}" />
</ListView.itemTemplate>
</ListView>
However, as far as I understand in your case the objects are of the following kind:
var myArrayItem = { "name": "John",
"image": "some-image-path",
"phone": 123456,
"email": "abv#xyz.com" };
So if you want to iterate and visualize your different key-values then you can do it accessing the key in your binding e.g.
<ListView items="{{ employeesJson2 }}">
<ListView.itemTemplate>
<StackLayout>
<Label text="{{ name }}" />
<Image src="{{ image }}" />
<Label text="{{ phone }}" />
<Label text="{{ email }}" />
</StackLayout>
</ListView.itemTemplate>
</ListView>

Keyboard lifting bottom button

I need to have a button at the bottom of the screen, but as soon as I tap on a textfield, keyboard shows up and lifts the button with it. I've tried using a button, another stacklayout, a scrollview wrapping it all... nothing's working and I feel I'm not understanding layouts correctly.
It's the gray button -> I want the gray button there
But it always comes up with the keyboard, see?
It's my understanding that this should be a scrollview so it remains at it's bottom position, but if I add a ScrollView to the gridLayout so it scrolls, it doesn't work.
Here's the code. Thank you in advance.
<ActionBar android:title="Entrega {{id}}/{{detalleRuta.delegacion}}/{{detalleRuta.tipoAlbaran}}">
<ActionItem>
<Label *ngIf="!entrega.foto" cssClass="mdi icon-cam" [text]="'mdi-add-a-photo' | fonticon" ios.position="right" (tap)="getFoto()"></Label>
<Label *ngIf="entrega.foto" cssClass="mdi icon-cam" [text]="'mdi-photo' | fonticon" ios.position="right" (tap)="showFoto()"></Label>
</ActionItem>
<ActionItem>
<Label class="mdi icon-map" [text]="'mdi-event-busy' | fonticon" ios.position="right" (tap)="cancelarEntrega()"></Label>
</ActionItem>
</ActionBar>
<GridLayout rows="auto,*, 50" loaded="pageLoaded">
<ListView row="0" [items]="detalle">
<template let-item="item">
<StackLayout orientation="vertical" class="info-entrega">
<Label *ngIf="item.fechaActual" [text]="'Fecha ' + item.fechaActual"></Label>
<Label *ngIf="item.horaActual" [text]="'Hora ' + item.horaActual"></Label>
</StackLayout>
</template>
</ListView>
<TabView row="1" selectedIndex="0" selectedColor="#00B4E6" *ngIf="!noEntregado">
<StackLayout *tabItem="{title: 'Cliente'}">
<ScrollView>
<StackLayout class="formulario">
<TextField [(ngModel)]="entrega.nombreCliente" hint="Nombre Cliente" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField [(ngModel)]="entrega.DNICliente" hint="DNI Cliente" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField [(ngModel)]="entrega.emailCliente" hint="Email Cliente" keyboardType="email" autocorrect="false" autocapitalizationType="none"></TextField>
<Button style="width:100%" class="btn {{ entrega.firmaCliente ? 'conFirma' : 'sinFirma' }}" text="Firma Cliente" (tap)="firmaCliente(false)"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout *tabItem="{title: 'Empleado'}">
<ScrollView>
<StackLayout class="form-config">
<TextField class="input-config" [(ngModel)]="entrega.nombreEmpleado" hint="Nombre Empleado" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField class="input-config" [(ngModel)]="entrega.DNIEmpleado" hint="Dni Empleado" keyboardType="text" autocorrect="false" autocapitalizationType="none"></TextField>
<Button style="width:100%" cssClass="btn {{ entrega.firmaEmpleado ? 'conFirma' : 'sinFirma' }}" text="Firma Empleado" (tap)="firmaEmpleado(false)"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout *tabItem="{title: 'Importes'}">
<ScrollView *ngIf="detalleRuta.importePdte != 0">
<StackLayout class="form-config">
<StackLayout>
<Label *ngIf="entrega.impMetalico" class="impMetalico" [text]="'Metálico ' + impMetalicoCurrency"></Label>
<TextField id="impMetalico" keyboardType="number" [(ngModel)]="entrega.impMetalico" hint="Importe en Metálico" (textChange)="cambioMetalico($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impTarjeta" class="impTarjeta" [text]="'Tarjeta ' + impTarjetaCurrency"></Label>
<TextField id="impTarjeta" keyboardType="number" [(ngModel)]="entrega.impTarjeta" hint="Importe en Tarjeta" (textChange)="cambioTarjeta($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impVale" class="impVale" [text]="'Vale ' + impValeCurrency"></Label>
<TextField id="impVale" keyboardType="number" [(ngModel)]="entrega.impVale" hint="Importe en Vale" (textChange)="cambioVale($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.impOtros" class="impOtros" [text]="'Otros ' + impOtrosCurrency"></Label>
<TextField id="impOtros" keyboardType="number" [(ngModel)]="entrega.impOtros" hint="Importe en Otros" (textChange)="cambioOtros($event)"></TextField>
</StackLayout>
<StackLayout>
<Label *ngIf="entrega.total" class="total" [text]="'Total ' + totalCurrency"></Label>
</StackLayout>
<StackLayout class="sumTotal">
<Label *ngIf="sumTotal" class="total" [text]="'Total ' + sumTotal | myCurrency"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
<StackLayout *ngIf="detalleRuta.importePdte == 0">
<Label class="sinImporte" text="El importe Pendiente es de 0€"></Label>
</StackLayout>
</StackLayout>
</TabView>
<Button row="2" *ngIf="!noEntregado" class="btn" text="Confirmar Entrega" (tap)="submit()"></Button>
<StackLayout row="1" *ngIf="noEntregado">
<ScrollView class="scrollView">
<StackLayout class="form-config">
<Label *ngIf="desc" class="desc" text="{{desc}}"></Label>
<Button style="width:100%" text="Motivo" (tap)="getMotivos()"></Button>
<StackLayout class="input-field">
<TextView hint="Observación." returnKeyType="send" [(ngModel)]="entrega.obsNoEntrega" editable="true" class="input input-border"></TextView>
</StackLayout>
<Button class="btn" text="Cancelar Entrega" (tap)="cancel()"></Button>
</StackLayout>
</ScrollView>
</StackLayout>
</GridLayout>
<ActivityIndicator class="activity-indicator" width="100" [busy]="isLoading" height="100"></ActivityIndicator>

This is how i managed my keyboard to not push button up while the textfield get focus.
<StackLayout>
<ScrollView >
<CardView shadowColor="#FE00FC" elevation="20" id="container" row="1">
<GridLayout rows="auto auto auto auto auto auto auto">
<TextField row="1" hint="User Name" keyboardType="email" autocorrect="false" autocapitalizationType="none" returnKeyType="next" [(ngModel)]="user.name"></TextField>
<TextField row="2" hint="Password" id="pass" keyboardType="email" secure="true" [(ngModel)]="user.password"></TextField>
<Button row="3" text="Login" class="submit-button" (tap)="submit()"></Button>
</GridLayout>
</CardView>
</ScrollView>
</StackLayout>

Nativescript : Select a level from Listview

I want to get a Level text when the listview (i.e,that level) is tapped.I'm able to get the index of that level.But I can not get the level text field.
View:
<Page loaded="loaded">
<GridLayout>
<ListView items="{{ categoryList }}" itemTap="brand">
<ListView.itemTemplate>
<Label text="{{ category }}" horizontalAlignment="left" verticalAlignment="center" />
</ListView.itemTemplate>
</ListView>
</GridLayout>
</Page>
Js Controller:
function getBrand() {
user.register();
}
exports.brand=function (args){
item=args.index;
//what to put here to be able to get the level text property
user.register(item);
}

Edited: You can put the tap listener to the label inside and get the reference through args:
In XML:
<ListView items="{{ categoryList }}">
<ListView.itemTemplate>
<Label text="{{ category }}" tap="brand"/>
</ListView.itemTemplate>
</ListView>
Then in js:
exports.brand = function(args) {
item = args.object;
var text = item.text;
}

How to user Label Nativescript with text value number / date

i want to show number or date from bindingcontex array. with this code :
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="aspectFill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
array pakets fron JSON with value textValue = 'XXXX', numberValue = 3000, dateValue = '2016-06-04'
Both of numberValue and dateValue not show, but textValue show to screen.
What the problems about it ? How to use namber or date in Label Nativescript.
Thanks anyway

I tested this in a test app; and I have the following code, pretty close to unmodified:
Here is the XML:
<Page id="Page" onloaded="pageLoaded" class="">
<ListView items="{{ pakets }}" itemTap="onTap">
<ListView.itemTemplate>
<grid-layout rows="220, *, *, *" columns="*" id="cardReport" tap="goReport">
<image row="0" src="{{ foto }}" stretch="fill"/>
<Label row="1" text="{{ textValue }}" />
<Label row="2" text="{{ numberValue }}" />
<Label row="3" text="{{ dateValue }}" />
</grid-layout>
</ListView.itemTemplate>
</ListView>
</Page>
Here is the JavaScript:
var Observable = require('data/observable').Observable;
var myData = new Observable();
exports.pageLoaded = function(args) {
var page = args.object;
myData.pakets = [
{foto: '~/SO587/nslogo.png', textValue: 'Text', numberValue: 2330, dateValue: '2016-01-01'},
{foto: '~/SO587/gswn.png', textValue: 'Text', numberValue: 2230, dateValue: new Date()},
];
page.bindingContext = myData;
};
And here is how it looks: As you can see from the above data, I have Text, number, Text Date and the second data line has Text, number and a real Date field.

Problems on CSS. i am add with this :
label {
font-family: 'Roboto', Roboto;
}
And work weel.
Thanks Mr. #nathanael