Tap on checkbox text - IOS

[kriefsacha]

Hi,

I work with radio buttons with the plugin version 1.0.0 on nativescript angular 6.

On android when you click on the text of the radio button , it's choosing it.

On IOS it's not working. You need to tap on the radio button to change your choice.

That's pretty problematic, if you have a fix please. Thanks !

[joost-leisink]

Working with nativescript Vue and facing the same issue. It seems there is no fix so we have to build our own 'hybrid' solution with a checkbox and tappabe label?

[markosole]

Same problem here, the label text would change it's opacity meaning it's pressed but it does not trigger status. I am going to add transparent layer (grid layout allows that) and use as a button to trigger / change status in the JS.

Not perfect but it will do the job.

Here is example:

JS code:

function forceCheckBox(){
    if(viewModel.snizeniSwitch == 1){
        viewModel.set("snizeniSwitch", false);
    } else {
        viewModel.set("snizeniSwitch", true);
    }
}

XML View:

<GridLayout row="0" columns="100,*" rows="35" marginTop="5">
    <!-- Platform specific view -->
    <Android><CheckBox:CheckBox fillColor="white" color="white" col="0" marginLeft="7" marginTop="5" row="0" horizontalAlignment="left" class="filter-label" checked="{{ snizeniSwitch }}" text="Sniženi" id="myCheckbox"/></Android>
    <iOS>
        <CheckBox:CheckBox fillColor="white" tintColor="white" onCheckColor="red" onTintColor="white" onFillColor="white" color="white" col="0" marginLeft="7" marginTop="8" paddingBottom="5" row="0" horizontalAlignment="left" class="filter-label" checked="{{ snizeniSwitch }}" text="Sniženi" id="myCheckbox"/>

        <StackLayout row="0" col="0" width="50" heigh="10" marginLeft="12" tap="forceCheckBox">
            <!-- This is empty and used only as a transparent button  -->
        </StackLayout>
    </iOS>
</GridLayout>

*Checkbox is white and you can customize color, but for test use it on top of any element with background != white iOS version is wrapped in <iOS> and will be displayed only on iOS platform.