List Picker

The ListPicker is a spinner type component for listing options.

Usage

The example demonstrates how to set a ListPicker in XML page, how to bind its selectedIndex property and to handle its change.

<ListPicker items="{{ years }}" selectedIndex="0" loaded="onListPickerLoaded" />

const fromObject = require("tns-core-modules/data/observable").fromObject;
const years = [1980, 1990, 2000, 2010, 2020];
function onNavigatingTo(args) {
    const page = args.object;
    const vm = fromObject({
        years: years
    });
    page.bindingContext = vm;

}
exports.onNavigatingTo = onNavigatingTo;

function onListPickerLoaded(fargs) {
    const listPickerComponent = fargs.object;
    listPickerComponent.on("selectedIndexChange", (args) => {
        const picker = args.object;
        console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
    });
}
exports.onListPickerLoaded = onListPickerLoaded;

import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { ListPicker } from "tns-core-modules/ui/list-picker/list-picker";
const years = [1980, 1990, 2000, 2010, 2020];
export function onNavigatingTo(args: EventData) {

    const page = <Page>args.object;
    const vm = fromObject({
        years: years
    });
    page.bindingContext = vm;

}

export function onListPickerLoaded(fargs) {
    const listPickerComponent = fargs.object;
    listPickerComponent.on("selectedIndexChange", (args: EventData) => {
        const picker = <ListPicker>args.object;
        console.log(`index: ${picker.selectedIndex}; item" ${years[picker.selectedIndex]}`);
    });
}

Styling

<ListPicker items="{{ items }}" class="picker"/>

const fromObject = require("tns-core-modules/data/observable").fromObject;

function onNavigatingTo(args) {

    const items = ["Batman", "Joker", "Bane"];

    const page = args.object;
    const vm = fromObject({
        items: items
    });
    page.bindingContext = vm;

}
exports.onNavigatingTo = onNavigatingTo;

import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args: EventData) {

    const items = ["Batman", "Joker", "Bane"];

    const page = <Page>args.object;
    const vm = fromObject({
        items: items
    });
    page.bindingContext = vm;

}

.picker {
    background-color: blanchedalmond;
    color: red;
    border-color: brown;
    border-radius: 20;
    border-width: 2;
    width: 200;
    height: 100;
    vertical-align: middle;
}

Tips And Tricks

Using key-value pairs

This functionality provides a simple way to specify the text field, which will be displayed in the ListPicker and the value field which will be returned as a result. In this scenario, when we are setting JSON object to the ListPicker's source, we should set up the textField and valueField properties, which will specify the displayed and result values. In the example below we are setting textField to name and valueField to role. This means that all properties marked as name will be displayed in the component and as a result, we will receive their corresponding role. We are receiving the selected value via selectedValue property, which can also be accessed via code-behind.

<ListPicker 
    loaded="onListPickerLoaded"
    items="{{ items }}"
    textField="name"
    valueField="role"
    selectedIndex="{{ index }}"
    selectedValue="{{ selectedItem }}">
</ListPicker>

function onNavigatingTo(args) {

    const page = args.object;
    const vm = fromObject({
        items: [
            { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
            { id: 3, name: "Piqué", role: "Defender" },
            { id: 4, name: "I. Rakitic", role: "Midfielder" }
        ],
        index: 2,
        selectedItem: ""
    });
    page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;

function onListPickerLoaded(args) {
    const listPicker = args.object;
    listPicker.on("selectedIndexChange", (lpargs) => {
        const picker = lpargs.object;
        console.log(`ListPicker selected value: ${picker.selectedValue} ListPicker selected index: ${picker.selectedIndex}`);
    });
}
exports.onListPickerLoaded = onListPickerLoaded;

import { EventData, fromObject } from "tns-core-modules/data/observable";
import { ListPicker } from "tns-core-modules/ui/list-picker";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const vm = fromObject({
        items: [
            { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
            { id: 3, name: "Piqué", role: "Defender" },
            { id: 4, name: "I. Rakitic", role: "Midfielder" }
        ],
        index: 2,
        selectedItem: ""
    });
    page.bindingContext = vm;
}

export function onListPickerLoaded(args: EventData) {
    const listPicker = <ListPicker>args.object;
    listPicker.on("selectedIndexChange", (lpargs) => {
        const picker = <ListPicker>lpargs.object;
        console.log(`ListPicker selected value: ${(<any>picker).selectedValue}`);
        console.log(`ListPicker selected index: ${picker.selectedIndex}`);
    });
}

Creating ListPicker via Code-Behind

Creating a ListPicker programmatically while setting items source and default selected index.

const ListPicker = require("tns-core-modules/ui/list-picker").ListPicker;


function onNavigatingTo(args) {
    const page = args.object;
    const container = page.getViewById("container");

    const listPicker = new ListPicker();
    listPicker.items = [
        "NativeScript Core - JavaScript",
        "NativeScript Core - TypeScript",
        "NativeScript Angular",
        "NativeScript Vue",
        "NativeScript Code Sharing",
        "NativeScript Sidekick"
    ];
    listPicker.selectedIndex = 0;

    container.addChild(listPicker);
}
exports.onNavigatingTo = onNavigatingTo;

import { EventData } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
import { ListPicker } from "tns-core-modules/ui/list-picker";

export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const container = <StackLayout>page.getViewById("container");

    const listPicker = new ListPicker();
    listPicker.items = [
        "NativeScript Core - JavaScript",
        "NativeScript Core - TypeScript",
        "NativeScript Angular",
        "NativeScript Vue",
        "NativeScript Code Sharing",
        "NativeScript Sidekick"
    ];
    listPicker.selectedIndex = 1;
    container.addChild(listPicker);
}

Properties

Events

API References

Native Component