I'm not even trying to set this prop. Why am I getting this error?

This is my code

<CheckBox
        onChange={this.onClick}
        checked={this.state.isChecked}
        label={this.props.label || ''}
        labelStyle={this.props.labelStyle}
        checkboxStyle={this.props.checkboxStyle}
 />

CheckBox is just in initialize state. Can't not change it's status on press.

Using macOS, react-native 0.45.1, react 16.0.0-alpha.12

shall we make a new npm release?
I noticed last two npm versions (2.0 and 1.2) are messed up. i.e. looking at the project history and the chronological order of commits, I expect the accessibilityLabel property to be available in both versions, but it's not. it seems something has gone horribly wrong, so it's an opportunity to fix that as well.

Hello, I am using the checkbox control within my React Native app. Works well.
I am making the app to run on webbrowsers now, and leveraging react-native-web.

The checkbox compiles, but no checkboxes are drawn at all.
Not sure if others are able to get it work, if not, then perhaps an enhancement request?

thank you

hello. I'm having the following problem. As far as I can tell my jsx is correct but the checkbox is not updating on it's parent component state.

  constructor(props) {
    super(props)
    this.state = {
      contacts: [],
    }
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        {
          this.state.contacts.map(function(contact, idx) {
            return (
              <TouchableHighlight
                key={idx}
                onPress={() => {
                  this.setState({ contacts: this.state.contacts.map(function(c) {
                    if (c.recordID === contact.recordID) {
                      c.selected = !c.selected;
                    }
                    return c;
                  })})
                }}
              >
                <View style={[styles.contactRow]} >
                  <Text>{contact.firstName} {contact.lastName}</Text>
                  <CheckBox
                    label=''
                    onChange={(checked) => {
                      this.setState({ contacts: this.state.contacts.map(function(c) {
                        if (c.recordID === contact.recordID) {
                          c.selected = !c.selected;
                        }
                        return c;
                      })
                    })
                    checked={contact.selected}
                  />
                </View>
              </TouchableHighlight>
            );
          }, this)
        }
      </ScrollView>
  );
}

The state is definitely changing contact.selected to true and false. Any idea why the checkbox component is not rerendering?

I have temporarily resorted to displaying the row's background to pink if the contact is selected.

Hi, this component works great but there's no alternative for styling the whole component. II would be great if we can make just margin correction with this approach

Fixed in PR #73

Thanks for making this!
A link to http://guides.codepath.com/ios/Adding-Image-Assets or a similar gif for this project would be excellent.

Hi,

It's probably a long shot, but I thought I might ask since this hasn't been active recently: I'm in the process of releasing an app in two days which is using this component. I was wondering what the current licensing status is (if there is any).

Would be great if you update the license on the github repo!!

Thanks!

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import CheckBox from 'react-native-checkbox';

export default class PageTwo extends Component {

  render() {
    let save = false;

    return (
      <View style={{margin:80}}>
        <Text>Checkbox</Text>
        <CheckBox label='Save this!' checked={save} onChange={(checked) => {
          save = checked;
          return true;
        }
        }/>
      </View>
    )
  }
}

When rendered, clicking the text of the label or the checkbox itself will not toggle the checked state of the checkbox. Sorry if I'm doing something wrong but this seemed to library-specific to put on StackOverflow.

Hey there,

i tried this component, but unfortunately whatever i do, it never changes the state when i click the checkbox...Here´s my code:

Render Method of Checkbox, where i just changed the image sources:

 render() {
    var source = require ('image!ic_uncheck_white'); // whitebox - placeholder

    if (this.props.checked) {
        source = require ('image!ic_check_black_24dp');
    }   

render Method where i use the Checkbox Component:

                    <View style={styles.row}>
                        <CheckBox
                            style={{flex:1}}
                            label={PREMIUM_ITEMS[2]}
                            checked={this.props.checkedGroups}
                            onChange={(checked) => this._pressRowListener(checked)}
                        />
                    </View>
                    <View style={styles.separator}/>

_pressRowListener: function ( checked ) {

    ToastAndroid.show('checked is ' + checked, ToastAndroid.SHORT);

}

Is it possible to position the label to the left of the checkbox? Looks like I can place it to the right.

Hi @sconxu,

I'm using the Checkbox for my app. When using the checkboxStyle prop, RN complains it is an invalid prop. Here's the warning message:

Warning

Warning: Failed prop type: Invalid prop `checkboxStyle` supplied to `CheckBox`.

My App

https://github.com/marclundgren/react-native-redux-todo-mvc

The line where I'm using a chechbox

https://github.com/marclundgren/react-native-redux-todo-mvc/blame/master/App/components/Todo.js#L51

Screenshot

Hi,

I'm using "react-native-checkbox": "^1.0.12" on iOS real device. (iPhone 6S)

Hello!

I have started a new React Native project and noticed this warning when I started using this library. It isn't a huge deal to me and 16 is still in alpha. Something to consider in the near future though. I can submit a pull request if you want.

Thanks for the great work!

Full warning:

Warning: PropTypes has been moved to a separate package. 
Accessing React.PropTypes is no longer supported and will be removed completely in React 16. 
Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)

Hi,

It will be nice to have a prop to change the colour of the CheckBox component.

Cheers!

Thanks for this component.

Many people use icon libraries like react-native-vector-icons

The current api requires an image file. It would be great if it could also accept another element (like an icon) to use as the toggle.

Let me know if you would like help with this feature.

Thanks!

In a project we are utilizing multiple instances of this component in a view along with flux. We have something like

<CheckBox
  label=''
  onChange={this.props.onPress}
  checked={this.props.completed}
/>

where the onPress handler is a flux action creator

onToggleTask={(taskId) =>
  dispatch(toggleTask(taskId))
}

This was causing a weird issue because the onChange handler would mutate the passed in prop (this.props.completed) but this component also mutates it's own state at https://github.com/sconxu/react-native-checkbox/blob/master/checkbox.js#L39 essentially we would trigger two mutations of the checked state upon click. We ended up adding this dependency under version control and change it's internal behavior to use the passed in prop over it's local state.

How would you prescribe an end-user use this component within a flux app?

It will interfere the input

CheckBox.defaultProps = {
label: 'Label',
labelLines: 1,
labelBefore: false,
checked: null,
checkedImage: CB_ENABLED_IMAGE,
uncheckedImage: CB_DISABLED_IMAGE,
underlayColor: 'transparent'
};

I must set the label to '' in order to hide the 'Label' after the checkbox

label={''}

There should be a way to programmatically change the internal state of this component. We can change the internal state via tap. But passing in a new prop into checked does not update the component's internal state. I think this is really important.

checked can be renamed initiallyChecked and checked can be rewritten to set the component's internal state to evaluate the prop as truthy or falsey and set the state appropriately. @sconxu thoughts?

Clicking on a the label text triggers onChange for some reason.

Here is my entire checkBox component:

`import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import CheckBox from 'react-native-checkbox';

class PrepositionCheckBox extends React.Component {
componentWillMount() {
if (this.props.transitive === true) {
this.props.handleInitialStateOfActivePrepositionCheckbox(false);
}
}
render() {
return (

<CheckBox
checkboxStyle={styles.prepositionCheckBox}
labelBefore={true}
label={this.props.prepositionCheckBoxLabel}
labelStyle={styles.prepositionCheckBoxLabel}
checked={this.props.prepositionCheckBoxState}
onChange={(prepositionCheckBoxCategory, checked) => this.props.handleCheckBoxClick(this.props.prepositionCheckBoxCategory, this.props.prepositionCheckBoxState)} />

);
}
}

const styles = StyleSheet.create({
prepositionCheckBoxRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-start'
},
prepositionCheckBoxLabel: {
height: 25
}
});

export default PrepositionCheckBox;`

Hi, I copied the code on the README, but the toggle doesn't change the image and there's an annoying white background.

Thanks.

onChange={(checked) => console.log('I am checked', checked)}

Since the checkedImage and uncheckedImage is directly put into Image's source attribute, it'd be ideal to have it's type match Image source propType.

ImageSourcePropType is defined here: https://github.com/facebook/react-native/blob/efcdef711eba82b2905d237ee9a3d094652c37ac/Libraries/Image/ImageSourcePropType.js

I can create a pull request if you wish.

I get this error message when compiling for Android:

Error: '-' is not a valid file-based resource name character: File-based resource names must contain only lowercase a-z, 0-9, or underscore
:app:mergeDebugResources FAILED

Would it be possible to simply remove the "-" in the image filenames? It could be replaced by an underscore.

SyntaxError: /node_modules/react-native-checkbox/checkbox.js: Unexp
ected token (31:21)
29 | checked: false,
30 | checkedImage: './cb_enabled.png',

31 | uncheckedImage './cb_disabled.png',
| ^
32 | }
33 | },
34 |

What about toggling by default and use a callback on onChange method, or something similar? Nothing happens when onPressed

i don't want the label text,how to hide it

When I use “checked={true}”,Selected by default，Cannot deselect, cannot operate。 I need to do it in some other way.
Thanks

I found that react-native-checkbox can easily provide support for automation testing with frameworks such as selenium or appium by making the TouchableHighlight accessible and adding a testID label to it, preferably taken from props. This would be very useful for automated functional testing.

if you use this.props.checked to programatically set the checkbox to false, the box will thrash between its internal checked value and using external value due to type coersion in the if statement. this breaks the box's functionality

If I don't change the label style to this, the bottom of the label is clipped on my nexus 6. Thought this might have something to do with the accessibility settings on my phone, but even when I change it from large font back to normal font the clipping continues. And it isn't even the descenders that are getting clipped.

  label: {
    fontSize: 14,
    lineHeight: 15,
    color: 'grey',
  }

When you change the label to one that has a descender, you end up having to lower the font height to 12. Or, you can fix it all by removing the lineHeight style altogether and then it just works.

Maybe the init value is used to select the picture on every change - so the tick picture is always visible or hidden depending on the init value.

Hi!

I was checking the module, it seems to work but the checkbox doesn't change after click on it. I think that I need to init the vale for "checked" to "true" after click but I can't see the way.

Any example of code that might help?

Thks!

I want to control the style of label in checkbox. Like height, width, these styles can be set in the labelStyle. but if the label text is too long, the label will wrap. I can not control the number of rows. So the label's prop numberOfLines can be exposed?

When using the onChange prop and passing the checked parameter, the parameter actually return the opposite of what the checked state actually is.

Anyone else getting this issue?

I am using below code to set the initial value to true on check box.
But whatever I click on the checkbox, it always show selected. I can't unselect the checkbox unless I remove the initial value checked={true}.

<CheckBox
            labelStyle={{fontSize: FontSize.small}}
            label='title'
            checked={true}
            onChange={(checked) => {
              this.setState({state: !checked})
            }}
          />

I have successfully included with my project, but checkbox not changing the state dynamically on click. But its changing when i change the component properties "checked={true} (or) checked={false}"

any suggestion?

Quite simple really, I've made a checkbox using the code in the README

When I touch the checkbox I get the log to tell me it's been touched but the tick doesn't appear. I can't toggle the checkbox on and off.

The device I'm using is Android 5.0

when i implement it in my android application , it shows error as can't find variable Checkbox.
I have installed it through npm install react-native-checkbox --save and in my node modules folder this exist and aslo exist in package.json. But shows error whats the problem? please suggest me.

Currently, on lines 49 and 58 of checkbox.js, you have code like this:

<Text style={[this.props.labelStyle, styles.label]}>{this.props.label}</Text>

The last item in a style array takes precedence. This means that the styles object built into the component always takes precedence over the user defined label styles. This, in turn, means that the user can never override the fontSize, lineHeight, or color of the label.

I'm not sure if this is intentional, but if it is, it seems like bad practice. It would be better to set styles.label as a default and let this.props.labelStyle override the built-in default styles.

Can I contribute to this repo ?