NativeScript "Switch" component

Question

I'm seeing a really weird behavior with the Switch component...I'm using it inside of an ng-template, and every time I 'switch' one on, every other 10th Switch element is switched on as well. No idea where it's coming from, especially since the 'checked' attribute is not dynamic (see below). Anyone else experiencing this issue? Also, even though I see the other Switches turned on (or off, based on the previous state), the actual "onInviteContact()" is triggered only once, for the actual Switch component that was intentionally clicked.

<RadListView
        [items]="contacts"
        class="list-group" width="100%">
    <ng-template tkListItemTemplate let-contact="item">
        <GridLayout class="contactItem" columns="2*, 3*, *, *" width="100%" orientation="horizontal">
            <Image col="0" *ngIf="contact.photo" [src]="contact.photo"
                   stretch="aspectFill" width="40%"></Image>
            <Image col="0" *ngIf="!contact.photo" src="res://profile_image"
                   stretch="aspectFill" width="40%"></Image>
            <Label col="1" class="nameLabel" [text]="contact.name"></Label>
            <Switch col="2" class="switchElement" checked="false"
                    (checkedChange)="onInviteContact($event, contact)"></Switch>
        </GridLayout>
    </ng-template>
</RadListView>

Shiva Prasad Shiva Prasad · Accepted Answer · 2017-12-10T18:22:56

The only possible explanation to this behavior is the use of Recycle Native View

https://github.com/NativeScript/NativeScript/blob/699e6f5da8ad79f5795e3758365115d681a146c2/tns-core-modules/ui/switch/switch-common.ts#L10

As you can see, it has been set to "auto"

I suspect that when the native view is recycled in a rad list view, or even a list view, the native view of the switch you turned on, got recycled, and used.

To avoid this, you should bind the checked property to some observable.

Hope this answers your question :)

Cheers!

NativeScript "Switch" component

1 Answers