NativeScript Angular ListPicker that behaves like `<select>`

Question

By default the ListPicker takes up a ton of screen space. Is there a way to make it behave like the metaphor for the HTML <select> when shown on mobile?

I've used this react native plugin before, and its exactly the metaphor I want, but for NativeScript.

Is this easy to do via NativeScript? I want to make use of the platform specific select metaphors, so showing/hiding a ListPicker or putting ListPicker in a modal is not what I'm looking for.

Also, I'm going to have a fairly long list, so an action Dialog wont work for me.

Update: I'm aware of nativescript-drop-down, however it does not use the platform specific "choose from list of choices" widget that webviews and react native plugin do.

By "platform specific choose from list of choices widget" I mean this (from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select):

iOS (note picker renders where keyboard would, with rolodex picker):

Android (note modal, with scroll list of options):

Styptic

Can you clarify how ListPicker in a modal is not what you want, when the RN plugin you highlight as exactly what you want is essentially a ListPicker in a modal? – Mourning

yup, update made with screenshots. I don't know why its not letting me shrink img sizes to a thumbnail per meta.#253903 – Styptic

Answer 1

I think you are looking for the nativescript-drop-down which is similar to the react-native-picker-select you had pointed.

Liking

I saw that, but its not using the platform specific selectors. I'll update my q to be more clear. – Styptic

Answer 2

I was looking for the same solution and couldn't find one so I have created my own. I have attached a sample for you here.

You can have a textField/Label and onTab you can show the ListPicker, like Select behaves in HTML and it will use the native(platform specific) components only.

in your HTML

<StackLayout orientation="vertical" width="210" height="210" backgroundColor="lightgray">
  <Label text="Country" width="70" height="50" backgroundColor="red"></Label>
  <TextField [(ngModel)]="textFieldValue" hint="Choose countty..." editable="false" (tap)="showHideField('country')"></TextField>
</StackLayout>
<StackLayout orientation="vertical" width="100%" height="210" *ngIf="showCountryPicker" backgroundColor="lightgray">
  <ListPicker [items]="listPickerCountries" (selectedIndexChange)="selectedCountyChanged($event)"></ListPicker>
</StackLayout>

and your .ts file

showCountryPicker = false;
listPickerCountries: Array < string > = ["Australia", "Belgium", "Bulgaria", "Canada", "Switzerland",
  "China", "Czech Republic", "Germany", "Spain", "Ethiopia", "Croatia", "Hungary",
  "Italy", "Jamaica", "Romania", "Russia", "United States"
];

showHideField() {
  this.showCountryPicker = true;
}
selectedCountyChanged(args) {
  const picker = < ListPicker > args.object;
  this.showCountryPicker = false;
  this.textFieldValue = this.listPickerCountries[picker.selectedIndex];
}

Unavoidable

Thanks. While this method is definitely functional, it still uses <ListPicker> under the covers. Was hoping there was an easy way to leverage the native platform-specific widgets. I think emulation (like nativescript-drop-down) is currently the only option. – Styptic

I tried it on NativeScript Playground and got the following error on Android: An uncaught Exception occurred on "main" thread. Calling js method onValueChange failed TypeError: Cannot read property 'updateSelectedValue' of null It did work on iOS. What is causing this error? – Fructidor