techmentormaria/react-native-item-checkbox

Create your own item checkbox with custom colors.

react-native-item-checkbox

Create your own item checkbox with custom colors.

Getting started

npm i react-native-item-checkbox

!IMPORTANT only works with react-native-vector-items now Don't forget to run rnpm link

Basic usage

This basic line will generate a standard checkbox with a 'check' symbol for you.

Options

Option	default value	values
onCheck (PropTypes.func)	function that alerts 'implement me'	callback function
onUncheck (PropTypes.func)	function that alerts 'implement me'	callback function
icon (PropTypes.String)	'check'	any FontAwesome icon you find here
size (PropTypes.number)	18	the size of your checkbox button
backgroundColor (PropTypes.String)	'grey'	colors
color (PropTypes.String)	'white'	colors
iconSize (PropTypes.String)	'normal'	{'small', 'normal', 'large'}
checked (PropTypes.bool)	false	{true, false} (calles onCheck or onUncheck)
default (PropTypes.bool)	false	{true, false} (doesn't call onCheck or onUncheck)
style (PropTypes.func)	null	custom style

Examples

var ItemCheckbox = require('react-native-item-checkbox');

// inside your render function
<ItemCheckbox /> // 

// ...
_onCheckCallback: function() {
  alert('checked');
},
// ...
<ItemCheckbox //example with callbacks
  onCheck={this._onCheckCallback}
/>

<ItemCheckbox //example with icon settings
  color="#FF9999"
  icon="tree"
  iconSize="normal" //"small", "normal", "large"
  size={100}
/>

iconSize

iconSize={"small", "normal", "large"}

react-native-item-checkbox's Issues

Warning: Failed propType: Invalid props.style key `color` supplied to `View`.

Warning: Failed propType: Invalid props.style key color supplied to View.
Bad object: {
"borderWidth": 1,
"borderColor": "red",
"alignSelf": "flex-start",
"overflow": "hidden",
"color": "white",
"flex": 1,
"width": 21,
"height": 21
}

I'm using https://github.com/oblador/react-native-vector-icons and React Native ^0.18.1

passing object to _onCheckCallback doesnt work

Hi Maria,
I've been trying to able to get the list of selected checkboxes using this component , however i found that if I try to pass this._onCheckCallback('checkbox1') and try to log or alert it, it always shows undefined. I need to find a way to identify which checkbox being selected, is there any alternative way of doing it?

Add the default props, but not the checked props.

In my case, I render the checkbox by a state which decide the checkbox is checked or unchecked.

But where the state is true(if true means checked), it will call the onChecked function.

So I wonder if has a default props like the checked props, but it will not call the onChecked function is good

render problem

My check boxes are rendering like this:

I can't get any icon to appear, only a red box!? Any idea what I've done wrong? I've got react-native-vector-icons/FontAwesome imported.

          <ItemCheckbox
            color={CS.lightGrey}
            iconSize="small"
            size={16}
          />

getting propType Warnings

I tried it on RN0.24 but keeps giving me these two:
Failed propType warning: Invalid prop.style key 'color' supplied to 'View'
Failed propType warning: Invalid prop.style key 'color' supplied to 'RTCView'