Why doesn't checkbox work in React Native? - react-native

Question

import CheckBox from '#react-native-community/checkbox';
export default class All extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
isSelected: true,
};
}
checkBoxChanged() {
alert('changed');
this.setState({isSelected : !this.state.isSelected})
}
render() {
const { items } = this.state;
return (
<Content>
<View>
{items.map((item) => (
<View>
<Text>{item.name}</Text>
<CheckBox
value={this.state.isSelected}
onValueChange={() => this.checkBoxChanged()}
/>
</View>
))}
</View>
</Content>
);
}
}
This doesn't work.I mean nothing happens.
When I check on, nothing changes and it doesn't reach to checkBoxChanged().
I got stuck in this problem.
I would appreciate it if you could help me :)

Answer 1

You can use onValueChange={() => checkBoxChanged()}
<CheckBox
value={this.state.isSelected}
onValueChange={() => checkBoxChanged()}
/>
And in checkBoxChanged function you can set the state to change the value of isSelected
checkBoxChanged(){
this.setState({isSelected : !this.state.isSelected})
}
Moreover the checkbox has been deprecated you have to install
#react-native-community/checkbox
check this link to know more.
Hope this helps

Answer 2

import { CheckBox } from 'react-native';
isChecked = false
checkBoxChanged() {
alert('changed');
}
getCheckedStatus(){
this.isChecked != this.isChecked;
return this.isChecked;
}
<CheckBox
activeOpacity={1}
textStyle={{ color: colors.colorGray, fontSize: dimen.fontSize.textAppearanceBody1_16 }}
containerStyle={styles.checkBoxContainer}
checkedColor={colors.profileTabSelectedColor}
uncheckedColor={colors.profileTabSelectedColor}
title={'Gender'}
checked={this.getCheckedStatus()}
onPress={() => { this.checkBoxChanged() }}
/>

Answer 3

I would like to tell you don't use checkbox from react-native it is deprecated, still if you are using it please see the below code, there is no onChange Prop, use onValueChange instead of onChange, and maintain a state and pass value prop to checkbox component.
https://reactnative.dev/docs/checkbox#__docusaurus
import React, { useState } from "react";
import { CheckBox, Text, StyleSheet, View } from "react-native";
export default App = () => {
const [isSelected, setSelection] = useState(false);
return (
<View style={styles.container}>
<View style={styles.checkboxContainer}>
<CheckBox
value={isSelected}
onValueChange={setSelection}
style={styles.checkbox}
/>
<Text style={styles.label}>Do you like React Native?</Text>
</View>
<Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text>
</View>
);
};

Answer 4

The code should be
import { CheckBox } from 'react-native';
checkBoxChanged() {
alert('changed');
}
<CheckBox onValueChange={()=>this.checkBoxChanged()} />
You are calling the function directly instead of calling it on click.
This checkbox works only in Android so better use the one from react-native elements
https://react-native-elements.github.io/react-native-elements/docs/checkbox.html

Answer 5

Checkbox are being deprecated from react-native-element but it can be used from react native component.
to use them.
Install : npm install #react-native-community/checkbox --save
Usage:
import CheckBox from '#react-native-community/checkbox';
Inside you use this element
<CheckBox value={this.state.check}
onChange={()=>this.checkBoxText()} />
And inside your class
constructor(props) {
super(props);
this.state = {
check: false
};
Declare a function outside your constructor area.
create:
checkBoxText() {
this.setState({
check:!this.state.check
})
alert("Value Changed to " + this.state.check)
}
It will create your clickable Check-box on your application.