Nativebase: How do I change the size of CheckBox?

Created on 16 Apr 2018  Â·  4Comments  Â·  Source: GeekyAnts/NativeBase

How do I change the size of a CheckBox? I've checked the docs here:
http://docs.nativebase.io/Components.html#checkbox-headref

and couldn't find any info.

Most helpful comment

Neither of these links seem to provide options that do anything.

The theme variables link with these attributes don't seem to do anything.:

Variable | Type | Description | Platform values
-- | -- | -- | --
iOS | Android
CheckboxRadius | number | Checkbox radius | 13 | 0
CheckboxBorderWidth | number | Checkbox border width | 1 | 2
CheckboxPaddingLeft | number | Checkbox left padding | 4 | 2
CheckboxPaddingBottom | number | Checkbox bottom padding | 0 | 5
CheckboxIconSize | number | Icon size of checkbox | 21 | 16
CheckboxIconMarginTop | number | Top margin for checkbox icon | undefined | 1
CheckboxFontSize | number | Size of checkbox font | 23/0.9 | 17
DefaultFontSize | number | Default Font size | 17 | 17
checkboxBgColor | color | Background color for checkbox | #039BE5 | #039BE5
checkboxSize | number | Size of checkbox | 20 | 20
checkboxTickColor | color | Checkbox tick color | #fff | #fff

Example these attributes don't do anything:

<CheckBox
     checkboxSize={40}
     CheckboxIconSize={40}                     
/>

All 4 comments

Neither of these links seem to provide options that do anything.

The theme variables link with these attributes don't seem to do anything.:

Variable | Type | Description | Platform values
-- | -- | -- | --
iOS | Android
CheckboxRadius | number | Checkbox radius | 13 | 0
CheckboxBorderWidth | number | Checkbox border width | 1 | 2
CheckboxPaddingLeft | number | Checkbox left padding | 4 | 2
CheckboxPaddingBottom | number | Checkbox bottom padding | 0 | 5
CheckboxIconSize | number | Icon size of checkbox | 21 | 16
CheckboxIconMarginTop | number | Top margin for checkbox icon | undefined | 1
CheckboxFontSize | number | Size of checkbox font | 23/0.9 | 17
DefaultFontSize | number | Default Font size | 17 | 17
checkboxBgColor | color | Background color for checkbox | #039BE5 | #039BE5
checkboxSize | number | Size of checkbox | 20 | 20
checkboxTickColor | color | Checkbox tick color | #fff | #fff

Example these attributes don't do anything:

<CheckBox
     checkboxSize={40}
     CheckboxIconSize={40}                     
/>

To adequately change the style you need to import StyleProvider

import the style you're applying:
import customVariables from './Themes/variable';
​// getTheme is default theme of NativeBase Components
// customVariables is customized variables used in the components theme

You can then wrap your content like so:

<StyleProvider style={getTheme(customVariables)}>
<Component stuff>
<Checkbox />

More details: https://github.com/GeekyAnts/native-base-docs/blob/master/docs/customize/CheckBox.md

Was this page helpful?
0 / 5 - 0 ratings

Related issues

muthuraman007 picture muthuraman007  Â·  3Comments

elnygren picture elnygren  Â·  3Comments

aloifolia picture aloifolia  Â·  3Comments

natashache picture natashache  Â·  3Comments

nschurmann picture nschurmann  Â·  3Comments