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.

XML
JavaScript
TypeScript

<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

XML
JavaScript
TypeScript
CSS

<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;
}

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.

XML
JavaScript
TypeScript

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

JavaScript
TypeScript

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

Name	Type	Description
`items`	`Array<any>`	Gets or set the items collection of the ListPicker. The items property can be set to an array or an object defining length and getItem(index) method.
`selectedIndex`	`number`	Gets or set the items collection of the ListPicker. The items property can be set to an array or an object defining length and getItem(index) method.

Events

Name	Description
`selectedIndexChange`	Emitted when the `selectedIndex` is changed.

API References

Name	Type
tns-core-modules/ui/list-picker	`Module`
ListPicker	`Class`

Native Component

Android	iOS
android.widget.NumberPicker	UIPickerView

NativeScript Core