Select single checkbox from listview in React-native

Question

I want to select only one checkbox, not multiple.

If i select two checkboxes one by one the previously selected checkbox should be unselected.

In my below code i can select multiple checkboxes.

  import React ,{Component} from "react";
  import CircleCheckBox, {LABEL_POSITION} from "react-native-circle-checkbox";

  class Select_Delivery_Option extends React.Component {

    constructor(props) {
      super(props);
      const ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      });
      this.state = {
        check_data:[],
        dataSource: ds.cloneWithRows([]),
        checked:false,
        isLoading:false,
      };
    }

    //I had call The componentDidMount for json Data here and bind it in Data source;
    render() {
      return ();
    }

    _renderRow(rowData: string, sectionID: number, rowID: number) {
      return (
        <View style={{ flex:1,flexDirection:'column',backgroundColor:'#FFF'}}>
          <View style={{ flex:1,flexDirection:'row',backgroundColor:'#FFF'}}>
            <View style={{flexDirection:'column',margin:10}}>
              {rowData.adbHomeAddress}
              <CircleCheckBox
                checked={rowData.checked}
                onToggle={()=>this._onPressRow(rowID, rowData,rowData.checked)}
                labelPosition={LABEL_POSITION.LEFT}
                label={rowData.Address1 +" ,\n "+ rowData.Address2 +",\n"+rowData.ctiName+", "+rowData.staName+", "+rowData.ctrName+","+rowData.adbZip+"."}
                innerColor="#C72128"
                outerColor="#C72128"
                styleLabel={{color:'#000',marginLeft:10}}
              />
            </View>
          </View>
        </View>
      );
    }

    _onPressRow = (rowID,rowData,checked) => {
      const {check_data,filter} = this.state;
      console.log('rowdata',rowData);
      console.log('rowid',rowID);
      console.log('checked',checked);
      rowData.checked = !rowData.checked;
      var dataClone = this.state.check_data;
      dataClone[rowID] = rowData;
      this.setState({check_data: dataClone });
    }
}

Link to the CircleCheckBox component used: https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox

Try using Radio Group if you want to select one checkbox at a time ! — Firdous nath
– Firdous nath, Commented Jan 24, 2019 at 7:57

Rajan · Accepted Answer · 2020-07-28 12:59:10Z

I had the same requirement and wasted hours looking for solution. Eventually, I was able to resolve the problem on my own.

Posting my answer below, l have used hooks in the example, let me know if someone wants a class-based solution.

    const checkboxComponent = () => {

      const [checkboxValue, setCheckboxValue] = React.useState([
       { label: 'Customer', value: 'customer', checked: false },
       { label: 'Merchant', value: 'merchant', checked: false },
       { label: 'None', value: 'none', checked: false },
     ])
 
     const checkboxHandler = (value, index) => {
       const newValue = checkboxValue.map((checkbox, i) => {
        if (i !== index)
          return {
            ...checkbox,
            checked: false,
          }
        if (i === index) {
          const item = {
            ...checkbox,
            checked: !checkbox.checked,
          }
          return item
        }
       return checkbox
     })
     setCheckboxValue(newValue)
     }    

    return (
       <View>
        {checkboxValue.map((checkbox, i) => (
            <View style={styles.checkboxContainer} key={i}>
              <CheckBox
                value={checkbox.checked}
                onValueChange={(value) => checkboxHandler(value, i)}
              />
              <Text style={styles.label}>{checkbox.label}</Text>
            </View>
          ))}

       </View>
     )
    }
     export default checkboxComponent

Nitish · Accepted Answer · 2019-01-24 07:05:56Z

0

I suggest you to use FlatList instead of ListView it's more advance and easy to use component.

For your issue please create a state checkedItem: -1 and directly assign id of your item you check last then just add a check to your CircleCheckBox item. something like below code.

<CircleCheckBox
                checked={rowData.id === this.state.checkedItem}
                onToggle={(rowID)=> this.setState({ checkedItem: rowID})}
                labelPosition={LABEL_POSITION.LEFT}
                label={rowData.Address1 +" ,\n "+ rowData.Address2 +",\n"+rowData.ctiName+", "+rowData.staName+", "+rowData.ctrName+","+rowData.adbZip+"."}
                innerColor="#C72128"
                outerColor="#C72128"
                styleLabel={{color:'#000',marginLeft:10}}
              />

Let me know if any query.

answered Jan 24, 2019 at 7:05

Nitish

1,0619 silver badges17 bronze badges

5 Comments

Shaikh wasimhaque Over a year ago

It is not Working for me, I can select multiple checkboxes one by one But I want to select one checkbox only remaining chekboxes should unselected.

Nitish Over a year ago

What's the issue now? Are you getting correct rowID in onToggle method when you check/uncheck the checkbox. Just verify by replace onToggle={(rowID)=> this.setState({ checkedItem: rowID})} to onToggle={(rowID)=> console.warn("RowID ", rowID)} line. If yes please share your new code.

Shaikh wasimhaque Over a year ago

The Code which I share earlier from the method _onPressRow() I can select checkbox one by one through it , but it select multiple checkboxes one by one. I want to select one checkbox only. when I select another checkbox the previously selected all checkboxes must be unselected either it one or multiple. Thanks for support.

Nitish Over a year ago

Sorry, I think you are not getting me. you just again and again explaining your issue.

Shaikh wasimhaque Over a year ago

In _onPressRow() method I get rowId, Rowdata & checked status= true/false,

Collectives™ on Stack Overflow

Select single checkbox from listview in React-native

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related