📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

List Picker

Spinner type module with listed options. Using a ListPicker requires the tns-core-modules/ui/list-picker module.

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

Basics

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

<ListPicker items="{{ pickerItems }}" selectedIndex="{{ index }}" loaded="onListPickerLoaded" class="p-15 picker" row="1"/>
const pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
    "Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

const page = args.object;
const vm = fromObject({
    pickerItems: pokemonList,
    index: 2
});
page.bindingContext = vm;
const pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
    "Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

const page = <Page>args.object;
const vm = fromObject({
    pickerItems: pokemonList,
    index: 2
});
page.bindingContext = vm;

Improve this document

Demo Source


Code Behind

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

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

Improve this document

Demo Source


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;
    const vm = listPicker.page.bindingContext;
    listPicker.on("selectedIndexChange", (lpargs) => {
        vm.set("index", listPicker.selectedIndex);
        console.log(`ListPicker selected value: ${listPicker.selectedValue}`);
        console.log(`ListPicker selected index: ${listPicker.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;
    const vm = listPicker.page.bindingContext;
    listPicker.on("selectedIndexChange", (lpargs) => {
        vm.set("index", listPicker.selectedIndex);
        console.log(`ListPicker selected value: ${(<any>listPicker).selectedValue}`);
        console.log(`ListPicker selected index: ${listPicker.selectedIndex}`);
    });
}

Improve this document

Demo Source


API Reference for ListPicker Class

Native Component

Android iOS
android.widget.NumberPicker UIPickerView