React Native CheckBox in FlatList:

Question

I am using import CheckBox from '@react-native-community/checkbox';.

I am only able to 'select' each 'item' once and cannot toggle it (change or re-toggle).

import CheckBox from '@react-native-community/checkbox';

function newrenderItemdata({item, index}) {
  const json = JSON.parse(item.product_details);
  return (
    <View>
      <Text style={[styles.dropdowntxt, {margin: width / 35}]}>
        <View>
          <CheckBox
            tintColors={'red'}
            disabled={false}
            onValueChange={() => newChange()}
            value={toggleCheckBox}
          />
        </View>
        {json.productname}
      </Text>
    </View>
  );
}

return (
  <View>
    <FlatList
      data={data2}
      renderItem={newrenderItemdata}
      contentContainerStyle={{marginTop: 10}}
    />
  </View>
);

Answer 1

Because you are using same value for every checkbox

in your data you have manage one key isChecked = false

eg

const mydata = [{
  isChecked: false,
  name: 'React',
},
{
  isChecked: false,
  name: 'False',
}]

and your newChange method should be as below

const newChange = (item, index) => {
  const temp = data; // Instead of data your main data
  temp[index].isChecked = !item.isChecked
  setData(temp); // you main data state
}

And you onValueChange={() => newChange()} should be as

onValueChange={() => newChange(item, index)}

you have to pass item and index

Full code

import * as React from 'react';
import {Text, View, StyleSheet, FlatList, TouchableOpacity} from 'react-native';

export default function App() {
  const [data, setData] = React.useState([
    {
      isChecked: false,
      name: 'React',
    },
    {
      isChecked: false,
      name: 'Native',
    },
  ]);
  const [, setRefresh] = React.useState();

  React.useEffect(() => {}, [data]);

  const handleCheckBoxValue =(item, index) => {
    const temp = data;
    temp[index].isChecked = !item.isChecked;
    setData(temp);
    setRefresh(Math.random());
    //Some time Flatlist data is not update
    //to force update we are just updating state
    //for force rerender to get updated view
  };

  const renderItem = ({item, index}) => {
    return (
      <View
        style={{
          height: 100,
          width: '90%',
          marginLeft: '5%',
          borderColor: 'black',
          borderWidth: 1,
          flexDirection: 'row',
        }}>
        <TouchableOpacity
          onPress={() => handleCheckBoxValue(item, index)}
          style={{
            height: 50,
            width: 50,
            borderWidth: 1,
            borderColor: 'black',
            backgroundColor: item.isChecked == true ? 'red' : null,
          }}
        />
        <Text>{item.name}</Text>
      </View>
    );
  };
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, index) => String(index)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

In above example Replace TouchableOpacity with your CheckBox Component

Hope this helps you !!