sconxu / react-native-checkbox Goto Github PK
View Code? Open in Web Editor NEWCheckbox component for React native
Checkbox component for React native
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)
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
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.
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?
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'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}
/>
Hi,
It will be nice to have a prop to change the colour of the CheckBox component.
Cheers!
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
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.
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 @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: Failed prop type: Invalid prop `checkboxStyle` supplied to `CheckBox`.
https://github.com/marclundgren/react-native-redux-todo-mvc
https://github.com/marclundgren/react-native-redux-todo-mvc/blame/master/App/components/Todo.js#L51
Is it possible to position the label to the left of the checkbox? Looks like I can place it to the right.
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
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.
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 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})
}}
/>
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={''}
When I use “checked={true}”,Selected by default,Cannot deselect, cannot operate。 I need to do it in some other way.
Thanks
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.
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!
Fixed in PR #73
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?
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 |
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?
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);
}
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
Can I contribute to this repo ?
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.
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.
react-native-checkbox/checkbox.js
Lines 62 to 66 in 2f819ce
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?
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?
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.
What about toggling by default and use a callback on onChange method, or something similar? Nothing happens when onPressed
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.
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!
i don't want the label text,how to hide it
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;`
CheckBox is just in initialize state. Can't not change it's status on press.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.