Why doesn't checkbox work in 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 :)

Hadi Mir · Accepted Answer · 2020-04-21 06:19:23Z

2

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

answered Apr 21, 2020 at 6:19

Hadi Mir

5,1752 gold badges33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Wes Over a year ago

I installed @react-native-community/checkbox and changed the code as you told me but nothing changed :(

Hadi Mir Over a year ago

That is probably because you haven't initialized the state. see The "value" of the checkbox. If true the checkbox will be turned on. Default value is false. so you have to change the isSelected (which you will initialize in the state). and checkBoxChanged function toggels isSelected whenever checkbox is checked

Hadi Mir Over a year ago

so right after you begin the class, initialize state like this class YouClassName extends React.Component { state = { isSelected: false } //...rest of the code

Wes Over a year ago

I use checkbox in map, so it doesn't work? I'm going to edit my question. I would appreciate it if you could check it out again :)

Hadi Mir Over a year ago

Since you are using map function it will display checkbox for every element in items array and since every checkbox have same value (isSelected) so when you check any of the checkbox it will reflect in all of them.

Mahammad Momin · Accepted Answer · 2025-03-07 07:42:56Z

1

npm install @react-native-community/checkbox

import CheckBox from '@react-native-community/checkbox';
const [agree, setAgree] = useState(false);

<CheckBox value={agree} onChange={() => setAgree(!agree)} />

This approach makes checkboxes easy to implement in a react native project ensuring a smooth user experience

edited Mar 7 at 7:42

Mahammad Momin

5557 silver badges15 bronze badges

answered Mar 7 at 6:36

Ameer Mukhar

454 bronze badges

Comments

Rajan · Accepted Answer · 2020-04-21 06:14:23Z

0

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() }}
/>

answered Apr 21, 2020 at 6:14

Rajan

1,5682 gold badges14 silver badges19 bronze badges

Comments

Neelam Soni · Accepted Answer · 2020-04-21 06:17:42Z

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>
  );
};

Guruparan Giritharan · Accepted Answer · 2020-04-21 06:19:20Z

0

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

answered Apr 21, 2020 at 6:19

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Comments

Nitin Singh · Accepted Answer · 2020-04-25 21:40:50Z

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.

Collectives™ on Stack Overflow

Why doesn't checkbox work in React Native?

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related