NativeScript Core

List Picker

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

const listPickerModule = require("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.

<StackLayout row="0">
        <Label text="Use the slider to change ListPicker's selectedIndex" textWrap="true" class="h3 p-15 text-left"/>
        <Slider loaded="onSliderLoaded" minValue="0" maxValue="{{ pokemons.length -1 }}" value="{{ index }}"  class="slider"/>
</StackLayout>
<ListPicker loaded="onListPickerLoaded" row="1" items="{{ pokemons }}" selectedIndex="{{ index }}"  class="p-15 picker" />
function onNavigatingTo(args) {

    const page = args.object;
    const vm = new Observable();
    vm.set("pokemons", pokemonList);
    vm.set("index", 0);
    page.bindingContext = vm;
}

function onSliderLoaded(args) {
    const sliderComponent = args.object;
    sliderComponent.on("valueChange", (sargs) => {
        const page = sargs.object.page;
        const vm = page.bindingContext;
        console.log(`slider index: ${sargs.object.value}`);
        vm.set("index", sargs.object.value);
    });
}

function onListPickerLoaded(args) {
    const listPickerComponent = args.object;
    const vm = listPickerComponent.page.bindingContext;
    listPickerComponent.on("selectedIndexChange", (lpargs) => {
        const listPicker = lpargs.object;
        vm.set("index", listPicker.selectedIndex);
        console.log(`ListPicker selected index: ${listPicker.selectedIndex}`);
    });
}

Improve this document

Demo Source


Code Behind

Creating a ListPicker programmatically and setting up its items.

const listPicker = new listPickerModule.ListPicker();
listPicker.items = pokemonList;
listPicker.selectedIndex = 9;

Improve this document

Demo Source


API Reference for ListPicker Class

Native Component

Android iOS
android.widget.NumberPicker UIPickerView