how to import plugin from https://market.nativescript.org/

[igorvujovic]

Svelte + native rocks ... :)

Is there easy way to import UI plugin (MaskedTextField for example ) from https://market.nativescript.org/
and use it in svelte markup as component?

Thanks

[halfnelson]

Hi,
Yes there is a way to install plugins. Looks like I forgot to document it.

Install the plugin as normal

tns plugin install nativescript-masked-text-field

then you need to register the new field as a tag:

import { NativeElementNode, registerElement } from "svelte-native/dom"
import { MaskedTextField } from 'nativescript-masked-text-field'

registerElement('maskedTextField', () => new NativeElementNode('maskedTextField', MaskedTextField as any))

you can then use it in your components

 <maskedTextField class="input input-border" mask="(999) 999-9999" text="{maskedValue}"  keyboardType="phone"></maskedTextField>

[igorvujovic]

Nice, thank you 👍

[igorvujovic]

MaskedEdit works like a charm.
How can I import RadListView from https://docs.nativescript.org/ui/professional-ui-components/ListView/getting-started ?
I tried it with component like in listview example from https://svelte-native.technology/docs#template-component but with no success :(

<radListView items="{{ dataItems }}" >
	<Template let:item={i}>
	  <label text="{i}" />
	</Template>
</radListView>

[halfnelson]

Elements requiring templates are a bit harder. You need to create a custom element for it, and register that instead https://github.com/halfnelson/svelte-native-grocery/blob/master/app/RadListViewElement.ts