nstudio / nativescript-checkbox

NativeScript plugin for checkbox UI component

NativeScript Checkbox

A NativeScript plugin to provide a checkbox widget, radio buttons are also possible.

---

Installation

From your command prompt/terminal go to your app's root folder and execute:

NativeScript 7+:

ns plugin add @nstudio/nativescript-checkbox

NativeScript prior to 7:

tns plugin add @nstudio/[email protected]

Platform controls used:

Android	iOS
Android CheckBox	BEMCheckBox

Sample Usage

Android Sample	iOS Sample

Usage

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:CheckBox="@nstudio/nativescript-checkbox" loaded="pageLoaded">
  <ActionBar title="Native Checkbox" />
  <StackLayout>
    <CheckBox:CheckBox checked="{{ checkProp }}" text="{{ myCheckText }}" fillColor="{{ myCheckColor }}" id="myCheckbox" />
    <CheckBox:CheckBox text="CheckBox Label" checked="false" />
  </StackLayout>
</Page>

import { CheckBox } from '@nstudio/nativescript-checkbox';
import { topmost } from '@nativescript/core/ui/frame';

public toggleCheck() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  checkBox.toggle();
}

public getCheckProp() {
  const checkBox = topmost().getViewById('yourCheckBoxId');
  console.log('checked prop value = ' + checkBox.checked);
}

Angular Usage Sample:

import { TNSCheckBoxModule } from '@nstudio/nativescript-checkbox/angular';

@NgModule({
  imports: [TNSCheckBoxModule]
  // etc.
})
export class YourModule {}

// component:
export class SomeComponent {
  @ViewChild('CB1') FirstCheckBox: ElementRef;
  constructor() {}
  public toggleCheck() {
    this.FirstCheckBox.nativeElement.toggle();
  }

  public getCheckProp() {
    console.log(
      'checked prop value = ' + this.FirstCheckBox.nativeElement.checked
    );
  }
}

<StackLayout>
  <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
  <button (tap)="toggleCheck()" text="Toggle it!"></button>
  <button (tap)="getCheckProp()" text="Check Property"></button>
</StackLayout>

NativeScript-Vue Usage Sample

In your main.js (The file where the root Vue instance is created) register the element

Vue.registerElement(
  'CheckBox',
  () => require('@nstudio/nativescript-checkbox').CheckBox,
  {
    model: {
      prop: 'checked',
      event: 'checkedChange'
    }
  }
);

And in your template, use it as:

<check-box :checked="isChecked" @checkedChange="isChecked = $event.value" />

Use checked instead of v-model. See #99.

Properties

• checked - boolean
• text - text to use with the checkbox
• fillColor - Color of the checkbox element
• boxType - Either 'square' (default) or 'circle'. It's recommended to use 'circle' for radiobuttons. Note that plugin version 3.0.0 switched the default for iOS to 'square' for alignment with Android. Still want circle on iOS and square on Android? Just make the boxType value conditional.

Events

• checkedChange - Use a reference to the CheckBox component to grab it's checked property when this event fires to see the new value.

API

• toggle() - Change the checked state of the view to the inverse of its current state.

Css Styling

• color - set the text label color
• font-size - checkbox is sized to text from here : default 15
• border-width - set the line width of the checkbox element: iOS only

Styling [Android]

• checkStyle - set to the name of your drawable
• checkPadding - set the padding of the checkbox

Add the following to app/App_Resources/Android/drawable/checkbox_grey.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_incomplete" />
    <item android:state_enabled="false" android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey_incomplete" />
    <item android:state_checked="true" android:drawable="@drawable/ic_checkbox_checked_grey"/>
    <item android:state_checked="false" android:drawable="@drawable/ic_checkbox_grey" />
</selector>

Radiobuttons, anyone?

Want to use radiobutton behavior for your checkboxes (only one option possible within a group)? Set boxType="circle" and check out the second tab in the Angular demo, here's a screenshot:

Contributing & Running Demo Apps

• Execute from root:
  • For android: npm run demo.android
  • For iOS: npm run demo.ios
  • npm run demo.ng.android (for angular android)
  • npm run demo.ng.ios (for angular ios)

nativescript-checkbox's Issues

CheckBox in ListView multiple select

I have a long ListView with checkboxes. When I randomly check one checkbox in the top of the list and then scroll down I see a few other checkboxes are also have been checked. It happens to me on Android so I believe this is related to view recycling optimization. The issue below was reported a while ago so I hope someone has a workaround for this problem or maybe I am doing something wrong.

https://stackoverflow.com/questions/17856363/checkbox-in-listview-multiple-select

Possible to not unselect radio button?

Is it possible to make it so you can't unselect an already selected radio button?

Missing closing tag

In the following snippet (https://github.com/bradmartin/nativescript-checkbox/blob/master/README.md#angular-usage-sample), the third closing tag of <Button> is missing

</Button> instead of </

<StackLayout>
    <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
    <Button (tap)="toggleCheck()" text="Toggle it!"></Button>
    <Button (tap)="getCheckProp()" text="Check Property"></
</StackLayout>

Need same look and feel of the checkbox in both android and IOS

Please suggest a way to have same look and feel (including shape) of the checkbox in both android and IOS .

Tap not working

Hi

I have the latest version of this plugin, also the NS 3.0+.

Now I can't call the tap method, only if I click the text.

The solution that I implemented is set the checkbox children of a Stack layout, and the parent with the tap event.

Add support to api < 21 on fillColor property

I tried to change this checkbox color on an Android 4.3 and that's the error I got:

JS: EXCEPTION: Error: Uncaught (in promise): Error: java.lang.NoSuchMethodError: no method with name='setButtonTintList' signature='(Landroid/content/res/ColorStateList;)V' in class Landroid/widget/CompoundButton;
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:726)
JS: com.tns.Runtime.callJSMethod(Runtime.java:712)
JS: com.tns.Runtime.callJSMethod(Runtime.java:693)
JS: com.tns.Runtime.callJSMethod(Runtime.java:683)
JS: com.tns.gen.java.lang.Runnable.run(Runnable.java:10)
JS: android.os.Handler.handleCallback(Handler.java:730)
JS: android.os.Handler.dispatchMessage(Handler.java:92)
JS: android.os.Looper.loop(Looper.java:137)
JS: android.app.ActivityThread.main(ActivityThread.java:5103)
JS: java.lang.reflect.Method.invokeNative(Native Method)
JS: java.lang.reflect.Method.invoke(Method.java:525)
JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:737)
JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
JS: dalvik.system.NativeStart.main(Native Method)

As I researched, this may be related to the APIversion, as the setButtonTintList method was added on API 21.

Can this plugin add the support to such a color change on API's < 21 or there is another way of doing such a change?

Thanks

Not working with tns-core-modules 2.5+

After update to ns-core-modules 2.5 im getting

could not load view: CheckBox Type error: Cannot read property 'id' of undefined at resolverPromise(nativescript-angular/zone.js/dist/zone-nativescript.js:416:31

my setup:
ts
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

html

While radiobutton behavior, How to get the selected radiobutton’s boolean value and text name

I used radiobutton behavior for checkboxes as described here.

Its working fine. But i want to get the selected radiobutton’s boolean value and name. In this case how shall i get?

Error: Command pod failed with exit code 31 Error output:

On Ios when i tried to run the app using 'tns run ios --log trace', i got encountered with given error.
After i cannot able to build the app.

`Installing pods...
spawn: pod "install"
Analyzing dependencies
[!] Unable to satisfy the following requirements:

• BEMCheckBox (~> 1.4.1) required by Podfile

None of your spec sources contain a spec satisfying the dependency: BEMCheckBox (~> 1.4.1).

You have either:

• out-of-date source repos which you can update with pod repo update or with pod install --repo-update.
• mistyped the name or version.
• not added the source repo that hosts the Podspec to your Podfile.

Note: as of CocoaPods 1.0, pod repo update does not happen on pod install by default.
Error: Command pod failed with exit code 31 Error output:

[!] Automatically assigning platform ios with version 8.0 on target RAA because no platform was specified. Please specify a platformfor this target in your Podfile. See https://guides.cocoapods.org/syntax/podfile.html#platform.`

What i missed! Like in error i need to update pod?

Radiobutton usage

Hey peeps, love this plugin!

I know it's a checkbox plugin, but I'm currently abusing it as a radionbutton plugin as well (one of my apps requires both).

Would you be interested in a snippet to the README that explains how to achieve it in Angular?

The screengrab below is a still from this tweet:

adding a item in observableArray re-renders the checkboxes

I have a list-view linked to an observableArray to show some items with their corresponding checkboxes, but when I update an item in the array, it is like the animations of the checkboxes are reproduced every time. There's any way to disable the animations ?
Thanks.

Add (tap) callback - INVALID

Hi there,
can you add (tap) caller for CheckBox, so we can get each individual toggle, instead of polling.

Thanks.

Sorry my mistake, had to look at the demo first. Please close it issue.

[Android] check mark/icon is transparent

Can we have something like checkColor as an attribute would be great..
It's transparent currently i'd like to set its color to white..

calendar in native like booking for hotels

hello friends how to implement monthly calendar in nativescript.

Event Firing

When the checkbox is tapped it fires the checkChangedEvent. But annoyingly if the checkbox value is changed in code this also fires the event.

iOS: Can't find variable: BEMCheckBoxDelegate

NativeScript JS app using nativescript-checkbox v 1.1.6, everything runs fine on Android. Same code-base on iOS, in the simulator, when my app does a "var CheckBox = require("nativescript-checkbox").CheckBox;", fails on line 255 in tns_modules/nativescript-checkbox/checkbox.js, says "Can't find variable: BEMCheckBoxDelegate". The BEMCheckBox pod is installed. The app crashes at the same point on the phone, too, so this is not a simulator issue. What could be the issue?

tns doctor issue

Macbooks-MacBook-Air:~ macbook$ tns doctor
WARNING: adb from the Android SDK is not installed or is not configured properly.
For Android-related operations, the NativeScript CLI will use a built-in version of adb.
To avoid possible issues with the native Android emulator, Genymotion or connected
Android devices, verify that you have installed the latest Android SDK and
its dependencies as described in http://developer.android.com/sdk/index.html#Requirements

TIP: To avoid setting up the necessary environment variables, you can use the Homebrew package manager to install the Android SDK and its dependencies.

Verifying CocoaPods. This may take more than a minute, please be patient.
◝ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠧ normalizeTree: sill install lo ◞ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠙ normalizeTree: sill install lo ◡ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠙ normalizeTree: sill install lo ◟ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠙ normalizeTree: sill install lo ◜ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠹ normalizeTree: sill install lo ◠ Installing iOS runtime.⸨░░░░░░░░░░░░░░░░░░⸩ ⠹ normalizeTree: sill install lo ◝ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠸ loadRequestedDeps: sill instal ◞ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◡ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◟ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◜ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◠ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◝ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◞ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◡ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◟ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◜ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◠ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◝ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◞ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◡ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◟ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◜ Installing iOS runtime.⸨ ░░░░░░░░░░░░░░⸩ ⠙ loadRequestedDeps: sill instal ◠ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◝ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◞ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◡ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◟ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◜ Installing iOS runtime.⸨ ░░░░░⸩ ⠙ extract:tns-ios: sill doParall ◠ Installing iOS runtime.⸨ ░░░░░⸩ ⠧ extract:tns-ios: sill doParall ◝ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◞ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◡ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◟ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◜ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◠ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◝ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◞ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◡ Installing iOS runtime.⸨ ░░░░░⸩ ⠇ extract:tns-ios: sill doParall ◟ Installing iOS runtime.⸨ ░░░░░⸩ ⠏ extract:tns-ios: sill doParall ◜ Installing iOS runtime.⸨ ░░░⸩ ⠇ build:tns-ios: sill doSerial [email protected] /private/var/folders/7g/gcgrdzcd01zdkv6dxsdm9dj40000gn/T/nativescript-check-cocoapods117521-59906-qkpw5.ay0fxswcdi
└── [email protected]

npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
◠ Installing iOS runtime.
◠ Verifying CocoaPods. This may take some time, please be patient..
Path must be a string. Received undefined

doctor

┌─────────┬──────────────┐
│ Usage │ Synopsis │
│ General │ $ tns doctor │
└─────────┴──────────────┘

Checks your system for configuration problems which might prevent the NativeScript CLI from working properly.

Run demo

I use git clone and I create the folder nativescript-checkbox
then I open the demo folder: cd demo
and then I do: tns run android
but I get an error and I can not even see the demo
please help

Missing AOT support in latest release (3.0.0)

Add *.metadata.json for angular module.

ERROR in Unexpected value 'TNSCheckBoxModule in path_to_app/node_modules/nativescript-checkbox/angular/index.js' imported by the module 'InputModule in path_to_app/app/input/input.module.ts'. Please add a @NgModule annotation.

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in 'path_to_app/app'
 @ ./main.aot.ts 5:29-62

ngModel not working

I need to update the checked value in array
If i use [checked] instead it wont be updated will always be false unless i have some way to update the array element based on the nativeElement value :/

    public categories = [
      {catid: 1, name: 'Electronics', checked: false},
      {catid: 2, name: 'Furnitures', checked: false},
      {catid: 3, name: 'Home Appliance', checked: false},
      {catid: 4, name: 'Games', checked: false},
      {catid: 5, name: 'Accessories', checked: false}
    ]; 

    <StackLayout *ngFor="let cat of categories">
        <CheckBox [text]="cat.name" [(ngModel)]="cat.checked"></CheckBox>
        <Label [text]="cat.checked"></Label>
    </StackLayout> 

JS: EXCEPTION: Error in pages/categories/categories.html:24:36 caused by: No value accessor for form control with unspecified name attribute
JS: ORIGINAL EXCEPTION: No value accessor for form control with unspecified name attribute

Tap event getting wrong value

Hello i need to add a event checkstate changed. I am trying add a tap event. But its getting first state of switch. I i tap checked switch getting checked prop True.

Event still firing twice on iOS

dbf3782 fixed the issue with events firing twice on iOS, but it only resolved the issue when tapping the checkbox itself. Tapping the adjacent label still makes the event fire twice.

Toggle on Angular

Hey has anyone got toggle working on Angular? If so, what code did you use? Thanks!

Value-accessors moved in nativescript-angular

I encountered a problem that my app crashed not to finding the path"nativescript-angular/value-accessors/base-value-accessor". I found out that this changed in nativescript-angular to the forms subdirectory and should be changed into "nativescript-angular/forms/value-accessors/base-value-accessor". I don't know about the downward compatibility so far.

Update: NativeScript 3.0 Breaking Changes - ui/core/proxy missing

The upcoming release of nativescript has remove the ui/core/proxy module. Will the plugin be compatible with 3.0? any estimates on when that could happen?

Thank you very much in advanced.

How to disable the control?

I have used the checkbox element as

<CheckBox #CB14 text="Agree" checked="false">

How to disable the control if condition is false

`BEMCheckBox (~> 1.4.1)` required by `Podfile`

hello
this plugin woks fine with android, but when i run IOS, i have the following error in terminal

BEMCheckBox (~> 1.4.1) required by Podfile

how to resolve that ?

regards

radio button problem i did by following the link--->https://www.npmjs.com/package/nativescript-radiobutton

ns-renderer: ERROR BOOTSTRAPPING ANGULAR
ns-renderer: Could not load view for: RadioGroup.Error: com.tns.NativeScriptException: Failed to find module: "ui/core/proxy", relative to: app/tns_modules/
com.tns.Module.resolvePathHelper(Module.java:146)
com.tns.Module.resolvePath(Module.java:55)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1021)
com.tns.Runtime.callJSMethodImpl(Runtime.java:903)
com.tns.Runtime.callJSMethod(Runtime.java:890)
com.tns.Runtime.callJSMethod(Runtime.java:874)
com.tns.Runtime.callJSMethod(Runtime.java:866)
com.tns.gen.android.app.Application_ActivityLifecycleCallbacks.onActivityResumed(Application_ActivityLifecycleCallbacks.java:24)
android.app.Application.dispatchActivityResumed(Application.java:216)
android.app.Activity.onResume(Activity.java:1251)
android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1269)
android.app.Activity.performResume(Activity.java:6766)
android.app.ActivityThread.performResumeActivity(ActivityThread.java:3377)
android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3440)
android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2713)
android.app.ActivityThread.-wrap12(ActivityThread.java)
android.app.ActivityThread$H.handleMessage(ActivityThread.java:1460)
android.os.Handler.dispatchMessage(Handler.java:102)
android.os.Looper.loop(Looper.java:154)
android.app.ActivityThread.main(ActivityThread.java:6077)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)

TypeError: Could not load view for: RadioGroup.Error: com.tns.NativeScriptException: Failed to find module: "ui/core/proxy", relative to: app/tns_modules/
com.tns.Module.resolvePathHelper(Module.java:146)
com.tns.Module.resolvePath(Module.java:55)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1021)
com.tns.Runtime.callJSMethodImpl(Runtime.java:903)
com.tns.Runtime.callJSMethod(Runtime.java:890)
com.tns.Runtime.callJSMethod(Runtime.java:874)
com.tns.Runtime.callJSMethod(Runtime.java:866)
com.tns.gen.android.app.Application_ActivityLifecycleCallbacks.onActivityResumed(Application_ActivityLifecycleCallbacks.java:24)
android.app.Application.dispatchActivityResumed(Application.java:216)
android.app.Activity.onResume(Activity.java:1251)
android.app.Instrumentation.callActivityOnResume(Instrumentation.java:1269)
android.app.Activity.performResume(Activity.java:6766)
android.app.ActivityThread.performResumeActivity(ActivityThread.java:3377)
android.app.ActivityThread.handleResumeActivity(ActivityThread.java:3440)
android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2713)
android.app.ActivityThread.-wrap12(ActivityThread.java)
android.app.ActivityThread$H.handleMessage(ActivityThread.java:1460)
android.os.Handler.dispatchMessage(Handler.java:102)
android.os.Looper.loop(Looper.java:154)
android.app.ActivityThread.main(ActivityThread.java:6077)
java.lang.reflect.Method.invoke(Native Method)
com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:866)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:756)
at Object.getViewClass (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/nativescript-angular/element-registry.js:29:15)
at ViewUtil.createView (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/nativescript-angular/view-util.js:122:44)
at NativeScriptRenderer.createElement (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/nativescript-angular/renderer.js:104:30)
at DebugRenderer2.createElement (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.j
s:13284:49)
at createElement (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:9362:27)
at createViewNodes (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12051:44)
at callViewAction (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12537:13)
at execComponentViewsAction (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12446:13)
at createViewNodes (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12120:5)
at createRootView (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:11998:5)
at callWithDebugContext (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:13213:42)
at Object.debugCreateRootView [as createRootView] (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12673:12)
at ComponentFactory_.create (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:9919:46)
at ComponentFactoryBoundToModule.create (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:3455:29)
at ApplicationRef_.bootstrap (file:///data/data/org.nativescript.SampleApp/files/app/tns_modules/@angular/core/bundles/core.umd.js:5039:57)

Can't use CheckBox in ListView

Hi @bradmartin ,

Using a CheckBox within a ListView causes a crash on iOS. Android seems to be fine.

Have you come across this?

2016-09-13 21:56:21.615 demo[1607:364606] *** JavaScript call stack:
(
    0   setFrame@[native code]
    1   onLoaded@file:///app/tns_modules/nativescript-checkbox/checkbox.js:154:26
    2   _addViewCore@file:///app/tns_modules/ui/core/view-common.js:932:26
    3   _addViewCore@file:///app/tns_modules/ui/core/view.js:55:43
    4   _addView@file:///app/tns_modules/ui/core/view-common.js:921:26
    5   _prepareCell@file:///app/tns_modules/ui/list-view/list-view.js:312:30
    6   tableViewCellForRowAtIndexPath@file:///app/tns_modules/ui/list-view/list-view.js:63:31
    7   UIApplicationMain@[native code]
    8   start@file:///app/tns_modules/application/application.js:233:26
    9   anonymous@file:///app/app.js:32:18
    10  evaluate@[native code]
    11  moduleEvaluation@:1:11
    12  @:8:48
    13  promiseReactionJob@:1:11
)
2016-09-13 21:56:21.615 demo[1607:364606] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan nan]'
*** First throw call stack:
(0x182d42db0 0x1823a7f80 0x182d42cf8 0x1858255d4 0x185825530 0x1858254c8 0x187e9c618 0x100f08044 0x100f06a28 0x100f06540 0x1009f467c 0x100ce4810 0x100c76890 0x100de2a7c 0x100e21348 0x100cdaf9c 0x100ce7324 0x100cea378 0x100cea314 0x100cea314 0x100cea378 0x100cea378 0x100ce46c8 0x100c90eb0 0x100c7684c 0x1009f7f40 0x100a2b380 0x100a2bb3c 0x100f06ee8 0x100f081b4 0x1881fb030 0x1881fb198 0x1881ea298 0x1881ffc64 0x187f908c4 0x187ea01e4 0x18582e98c 0x1858295c8 0x185829488 0x185828ab8 0x185828818 0x187ea2ff4 0x182cf909c 0x182cf8b30 0x182cf6830 0x182c20c50 0x184508088 0x187f0e088 0x100f08044 0x100f06a28 0x100f06540 0x1009f467c 0x100ce3de8 0x100cea368 0x100cea378 0x100ce46c8 0x100c90eb0 0x100c7684c 0x100da193c 0x100a0581c 0x100e8d44c 0x100ceac64 0x100cea378 0x100cea378 0x100cea378 0x100ce46c8 0x100c90eb0 0x100c7684c 0x100e0a9bc 0x1009fccc0 0x100a353f8 0x100017480 0x1827be8b8)
libc++abi.dylib: terminating with uncaught exception of type NSException

Frontend:

<Page loaded="onLoad" xmlns:CheckBox="nativescript-checkbox"> 
    <ListView items="{{ vehicleList }}" id="vehicleList" itemTap="listViewItemTap">
        <ListView.itemTemplate>

            <CheckBox:CheckBox checked="false" text="Test" />

        </ListView.itemTemplate>       
    </ListView>
</Page>

Codebehind:

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;

var page;

var pageData = new Observable({
    vehicleList: [{test: "test"}]
});

exports.onLoad = function(args) {
    page = args.object;
    page.bindingContext = pageData;
};

Update NPM

Can you push the latest version (1.2.7) to NPM, please? 😃

*ngFor iOS issue

Hello,

We tried out Checkbox with *ngFor. However, If we setup a single element and hardcode it it works fine w/ iOS. But as soon as we move it to a StackLayout with *ngFor it doesn't show up in iOS.

PS: Android works fine.

                <StackLayout orientation="vertical">
                    <Label verticalAlignmet="center" text="Category"></Label>
                    <WrapLayout orientation="horizontal">
                        <StackLayout *ngFor="let category of categories">
                            <CheckBox #CB1 font-size="18" [text]="category.name" checked="false" (checkedChange)="selectedCategories($event, category.id)"></CheckBox>
                        </StackLayout>
                    </WrapLayout>
                </StackLayout>

Tap event is not registered on iOS when clicking the checkbox

In iOS when you click on the checkbox, the tap event is not fired, however the tap event fires when clicking on the text.

Service exited due to Segmentation fault: 11

Hi, I use your plugin in angular2 + nativescript app. I registered element CheckBox for app, but when I tried to use
<CheckBox #cb1 text="test" checked="false"></CheckBox>
I have got this error: "Nov 23 13:52:46 Mustangs-Mac-mini com.apple.CoreSimulator.SimDevice.EBE46F8E-0089-4E10-95B0-9E88F880083C.launchd_sim[456] (UIKitApplication:com.yourdomain.appname[0xd924]
[3887]): Service exited due to Segmentation fault: 11"
And when I deleted this checkbox attribute from view and rerun it. It worked fine.
I used IOS emulator.
Version of the plugin: 1.2.1
nativescript: 2.4.0
I'd deleted platforms, node_modules and other stuffs before I ran app.
Do you know what maybe I have to do to resolve that problem?

Change border color of iOS

Is it possible to change the border color of the checkbox for iOS?

I tried something like this and it didn't work. I'm not experience with native android/iOS, so I'm not sure how else to access the native properties.

this.checkbox.nativeElement.ios.tintColor = new Color('#FFF').ios;

Radiobuttons with directives

Hi guys,
I really like this plugin and it's very useful.
I have a small problem in my app and I don't know how to solve it.

This is the main HTML:
my-profiles.component.html

<Pager dock="top" class="pager" [items]="items" #pager
            <ng-template pagerItemTemplate let-i="index" let-card="item">
                <StackLayout>
                    <ProfileCard [data]="card"></ProfileCard>
                </StackLayout>
            </ng-template>
</Pager>

The nativescript-checkbox is used in ProfileCard directive like that :
profile-card.component.html (partial)

<DockLayout dock="top" stretchLastChild="false">
            <StackLayout width="90" height="30" dock="left">
                <CheckBox #CB1 text="Default" fillColor="white" boxType="circle" class="checkboxDefault" [checked]="isProfileDefault(data.id)"(checkedChange)="setProfileDefault($event)"></CheckBox>
            </StackLayout>
            <Button text="Edit" class="btn-edit-profile" (tap)="editProfile()" dock="right"></Button>
</DockLayout>

profile-card.component.ts

// check if the profile id is already saved as `defaultProfile` in localStorage, if not I'll save the current one as `defaultProfile`
isProfileDefault(profileId: string) {
        let defaultProfileLS = this.userSettings.getOption('defaultProfile');
        if(!defaultProfileLS) {
            this.userSettings.setOption('defaultProfile', profileId);
            return true;
        } else {
            return (profileId == defaultProfileLS);
        }
    }

// save the profileId as `defaultProfile`
setProfileDefault(event) {
       let value = event.value;
        if(value) {
            this.userSettings.setOption('defaultProfile', (String)(this.data.id))
        }
    }

The point is I'd like these checkboxes to be like radio buttons, this is the reason for boxType="circle".

• Android : They behave like radio buttons.
• iOS : No. I mean, in iOS I can select multiple boxes and the checkedChange event is not triggered to save the selected profileId in localStorage.

I've tried to change the HTML with ngModel and the issues are :

• Android : the behavior of radio buttons disappears.
• iOS : the event is triggered and the behavior of radio buttons is still not there.

Any idea would be welcome.
Thanks.

Custom CSS properties are not working

Custom css properties like tint-color, on-tint-color, etc., are never applied when defined inside app.css.

Missing BEMCheckBoxDelegate

It seems that BEMCheckBox.d.ts and platforms/ios/ has disappeared since 2.0.0 ( present in 2.0.0 ), which breaks the iOS runtime.

2.5.0 (Android) Label Color Not Preserved When Webpack Uglified

In TNS 2.5.0 (Android), the label color is not preserved when uglified with webpack. 2.5 fixed CSS uglification issues but I think plugins need changes -- @bradmartin please confirm with @hdeshev

Support radio button appearance in Android

Provide an option to enable the radio button appearance in Android.

May be when boxType is set to Circle on Android, creating a RadioButton instance instead of a CheckBox instance will be a workaround?

export const enum BoxType {
  Circle = 0,
  Square = 1
}
...
this._android = new android.support.v7.widget[this.boxType == BoxType.Circle ? "AppCompatRadioButton" : "AppCompatCheckBox"](this._context, null);

IOS Emulator error

App crash when i run with: tns livesync ios --emulator --watch

Only message is "Service exited due to signal: Segmentation fault: 11"

Unable to set numbers for `text`property

Example

<CheckBox [text]="1"></CheckBox>

Exception

android.content.res.Resources$NotFoundException: String resource ID #0x1 Error

Possible workaround
Convert anything to a string while setting text String.valueOf(text)

Android cannot get checkbox with id

Hi guys, i followed the small tutorial you made, but when i do

let checkBox = topmost().getViewById('yourCheckBoxId');
checkBox.toggle();

It says that Property 'toggle' does not exist on type 'View'.
How can i solve? thank you

Image with foreground color blue

NativeScript/NativeScript#4261

We are facing above issue in NS3.0.

wrong Podfile BEMCheckBox v 1.4.1 doesn't exist anymore

Change
pod 'BEMCheckBox', '~> 1.4.1'
to
pod 'BEMCheckBox'

Using bind expressions with onTintColor or onCheckColor doesn't work with web pack

Using bind expressions with onTintColor or onCheckColor attributes not working with web pack.

eg.

<CheckBox [text]="option.label" [tintColor]="tintColor" [fillColor]="tintColor"
                            [onTintColor]="tintColor" [onCheckColor]="onCheckColor"></CheckBox>

Error

Binding to event property 'onTintColor' is disallowed for security reasons, please use (TintColor)=...
If 'onTintColor' is a directive input, make sure the directive is imported by the current module.  [tintColor]="tintColor"  [fillColor]="tintColor"
                            [ERROR ->][onTintColor]="tintColor" [onCheckColor]="onCheckColor" class"): ng:///<path_to_component>.component.html@15:28
Binding to event property 'onCheckColor' is disallowed for security reasons, please use (CheckColor)=...
If 'onCheckColor' is a directive input, make sure the directive is imported by the current module. ("intColor]="tintColor"

Checkbox not appearing

I'm having trouble getting a checkbox to show up under an angular2 final nativescript project (android).
I did the following:

tns plugin add nativescript-checkbox
tns platform remove android
tns platform add android

I tried adding a sample checkbox like this:
app.component.html

<StackLayout xmlns:CheckBox="nativescript-checkbox"> 
    <CheckBox:CheckBox checked="false" text="Test" />
</StackLayout>

app.component.ts

import {Component, OnInit} from '@angular/core';
import app = require('application');
import { CheckBox } from 'nativescript-checkbox';

@Component({
    selector: "main",
    templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

    constructor() {}

    ngOnInit() {
    }
}

main.ts

import { platformNativeScriptDynamic, NativeScriptModule } from 'nativescript-angular/platform';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule
    ]
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

I don't see any errors even when I do adb logcat, but I also don't see any checkbox ;) Any ideas? I wasn't sure if I can put xmlns:CheckBox="nativescript-checkbox" in my StackLayout tag... I think the Page tag gets added implicitly somewhere, when I search my project for Page I'm not finding anything and if I wrap my own it's not happy.

Android font size not working

Hello,
Font size isn't applied on Android despite working properly on iOS, both in CSS stylesheet and as an inline xml property. Any idea why?
I'm using Nativescript 3.3.0 with Angular.

CSS Properties no longer working

Just a little while ago I was doing .remember-checkbox { vertical-align: center; color: #FFFFFF; } in css and it used to work to make the text white for the checkbox title. Now it stopped working, it could be because I updated the dependencies on my project.

However, applying the property color="#FFFFFF" on the element tag directly still works. Does anyone know if the compatibility of the plugin isn't the same after the angular updates?

All @angular packages are at 4.4.6 and nativescript-angular is at 4.4.1. tns-core-modules and tns-platform-declarations are at 3.3.0.

demo fails to start in Android emulator

Nativescript 2.3, with Angular 2.0 on Android emulator running Android 6.0

host: Fedora 23 (GNU/Linux) x86-64 with Android SDK 25.2

steps: git clone the nativescript-checkbox repo, staying in the master branch and head of the tree, and

cd demo
tns plugin add nativescript-checkbox
tns run android --emulator

the app gets built and installed in the emulator. Upon starting, the app fails with these logs in logcat:

10-22 09:30:53.381 9146 9146 D TNS.Native: V8 version 4.7.80
10-22 09:30:53.429 9146 9146 D TNS.Native: lenNodes=62484, lenNames=733591, lenValues=818035
10-22 09:30:53.429 9146 9146 D TNS.Native: time=1
10-22 09:30:53.487 9146 9146 D TNS.Java: Enabling NativeScript Debugger Agent
10-22 09:30:53.777 9146 9146 E art : invalid stream - problem with parameter iterator in /data/app/org.nativescript.demo-1/base.apk for method void com.tns.NativeScriptActivity.onCreate(android.os.Bundle)
10-22 09:30:53.778 9146 9146 E art : invalid stream - problem with parameter iterator in /data/app/org.nativescript.demo-1/base.apk for method void com.tns.NativeScriptActivity.onCreate(android.os.Bundle)
10-22 09:30:53.780 9146 9146 D AndroidRuntime: Shutting down VM
10-22 09:30:53.780 9146 9146 E art : invalid stream - problem with parameter iterator in /data/app/org.nativescript.demo-1/base.apk for method void com.tns.NativeScriptActivity.onCreate(android.os.Bundle)
10-22 09:30:53.780 9146 9146 W System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.demo/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
10-22 09:30:53.780 9146 9146 W System.err: Calling js method onCreate failed
10-22 09:30:53.780 9146 9146 W System.err: Error: Building UI from XML. @file:///app/main-page.xml:15:25
10-22 09:30:53.780 9146 9146 W System.err: ↳Module '/data/data/org.nativescript.demo/files/app/nativescript-checkbox' not found for element 'nativescript-checkbox:CheckBox'.
10-22 09:30:53.780 9146 9146 W System.err: ↳com.tns.NativeScriptException: Failed to find module with absolute path: "/data/data/org.nativescript.demo/files/app/nativescript-checkbox".
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Module.resolvePathHelper(Module.java:220)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Module.resolvePath(Module.java:60)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.callJSMethodNative(Native Method)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:716)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:697)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:687)
10-22 09:30:53.780 9146 9146 W System.err: com.tns.NativeScriptActivity.onCreate(android.app.Activity.java)
10-22 09:30:53.780 9146 9146 W System.err: android.app.Activity.performCreate(Activity.java:6237)
10-22 09:30:53.780 9146 9146 W System.err: android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)
10-22 09:30:53.780 9146 9146 W System.err: android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)
10-22 09:30:53.780 9146 9146 W System.err: android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
10-22 09:30:53.780 9146 9146 W System.err: android.app.ActivityThread.-wrap11(ActivityThread.java)
10-22 09:30:53.780 9146 9146 W System.err: android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
10-22 09:30:53.780 9146 9146 W System.err: android.os.Handler.dispatchMessage(Handler.java:102)
10-22 09:30:53.780 9146 9146 W System.err: android.os.Looper.loop(Looper.java:148)
10-22 09:30:53.780 9146 9146 W System.err: android.app.ActivityThread.main(ActivityThread.java:5417)
10-22 09:30:53.780 9146 9146 W System.err: java.lang.reflect.Method.invoke(Native Method)
10-22 09:30:53.780 9146 9146 W System.err: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
10-22 09:30:53.780 9146 9146 W System.err: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
10-22 09:30:53.780 9146 9146 W System.err: File: "/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js, line: 162, column: 20
10-22 09:30:53.780 9146 9146 W System.err: StackTrace:
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js', line: 162, column: 21
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'', file:'/data/data/org.nativescript.demo/files/app/tns_modules/xml/xml.js', line: 148, column: 13
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'EasySAXParser.parse', file:'/data/data/org.nativescript.demo/files/app/tns_modules/js-libs/easysax/easysax.js', line: 751, column: 23
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'XmlParser.parse', file:'/data/data/org.nativescript.demo/files/app/tns_modules/xml/xml.js', line: 195, column: 22
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'XmlStringParser.parse', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js', line: 168, column: 27
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'parseInternal', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js', line: 43, column: 11
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'loadInternal', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js', line: 120, column: 27
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'load', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/builder/builder.js', line: 104, column: 27
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'pageFromBuilder', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame-common.js', line: 111, column: 27
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'resolvePageFromEntry', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame-common.js', line: 89, column: 20
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'Frame.navigate', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame-common.js', line: 165, column: 20
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/frame.js', line: 690, column: 19
10-22 09:30:53.780 9146 9146 W System.err: Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.demo/files/app/tns_modules/ui/frame/activity.js', line: 12, column: 25
10-22 09:30:53.780 9146 9146 W System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
10-22 09:30:53.780 9146 9146 W System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
10-22 09:30:53.780 9146 9146 W System.err: at android.app.ActivityThread.-wrap11(ActivityThread.java)
10-22 09:30:53.780 9146 9146 W System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
10-22 09:30:53.780 9146 9146 W System.err: at android.os.Handler.dispatchMessage(Handler.java:102)
10-22 09:30:53.780 9146 9146 W System.err: at android.os.Looper.loop(Looper.java:148)
10-22 09:30:53.780 9146 9146 W System.err: at android.app.ActivityThread.main(ActivityThread.java:5417)
10-22 09:30:53.781 9146 9146 W System.err: at java.lang.reflect.Method.invoke(Native Method)
10-22 09:30:53.781 9146 9146 W System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
10-22 09:30:53.781 9146 9146 W System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
10-22 09:30:53.781 9146 9146 W System.err: Caused by: com.tns.NativeScriptException:
10-22 09:30:53.781 9146 9146 W System.err: Calling js method onCreate failed
10-22 09:30:53.781 9146 9146 W System.err: Error: Building UI from XML. @file:///app/main-page.xml:15:25
10-22 09:30:53.781 9146 9146 W System.err: ↳Module '/data/data/org.nativescript.demo/files/app/nativescript-checkbox' not found for element 'nativescript-checkbox:CheckBox'.
10-22 09:30:53.781 9146 9146 W System.err: ↳com.tns.NativeScriptException: Failed to find module with absolute path: "/data/data/org.nativescript.demo/files/app/nativescript-checkbox".
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Module.resolvePathHelper(Module.java:220)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Module.resolvePath(Module.java:60)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.callJSMethodNative(Native Method)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:865)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.callJSMethodImpl(Runtime.java:730)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:716)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:697)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.Runtime.callJSMethod(Runtime.java:687)
10-22 09:30:53.781 9146 9146 W System.err: com.tns.NativeScriptActivity.onCreate(android.app.Activity.java)
10-22 09:30:53.781 9146 9146 W System.err: android.app.Activity.performCreate(Activity.java:6237)

Can't change font-size through cssClass on css file

Doing this failed...

.checkbox_label { font-size: 5; }

This also failed...

<CheckBox text="Remember me" checked="false" class="checkbox_label" textWrap="true" fontSize="5"></CheckBox>

The only way I have been able to change declaratively the font-size has been including an inline style property like this

<CheckBox text="Remember me" checked="false" class="checkbox_label" textWrap="true" style="font-size: 5;"></CheckBox>

Is this supposed to be the behavior? I have been able to work with color with no problems