List Picker

The ListPicker is a spinner type component for listing options.

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"
    ];
    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"
    ];
    listPicker.selectedIndex = 1;
    container.addChild(listPicker);
}

Improve this document

Demo Source

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

List Picker

Usage

Styling

Tips And Tricks

Using key-value pairs

Creating ListPicker via Code-Behind

Properties

Events

API References

Native Component