How to Implement checkbox in react-native which supports both ios and android in Flatlist

You can try using <CheckBox /> component of NativeBase and it should work on both platforms.

Example:

     <CheckBox 
        checked={this.state.checked}
        onPress={()=>this.setState({ checked: !this.state.checked})}
      />

If you are looking for a way to render a boolean value purely within React Native, you could try a switch, like so:

<Switch value={item.selected} onValueChange={selected => this.setState({selected })/>

A switch renders like this:

Otherwise, if you are looking for a checkbox, you could try the React Native Elements library. Like so:

import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

const CheckBox = (props) => {
  const {name, value, isChecked} = props;
  return (
    <View>
      <TouchableHighlight
        onPress={() => {
          props.function(value);
        }}
        underlayColor="transparent"
        style={styles.checkBoxRowAlign}>
        {isChecked ? (
          <View>
            <View>
              <FastImage
                source={require('../assets/images/checkbox_Tick.png')}
              />
            </View>
          </View>
        ) : (
          <View>
            <View/>
          </View>
        )}
      </TouchableHighlight>
      <Text>{name}</Text>
    </View>
  );
};

export default CheckBox;

This is like a custom checkbox,if we add the above code in ur app and if u want to use it anywhere you just need to import the file and use it like

    import CheckBox from '../../CheckBox';
        <CheckBox isChecked={isChecked} name={item.name} value={item.value} function={this.onclickCheckBox} />


 onclickCheckBox(value) {
   your logic.........
  }

Step1: While forming the list to be mapped to your FlatList, map the list and add a boolean flag to maintain the state of Checkbox selection.

Step2: Set the value of Checkbox as the flag stored in your item rendered from the FlatList and onValueChange pass the index and change the flag value of the respective index of the array.

Step3: Map the array rendered in FlatList and push each item to the new array/temporary array initialised and set the temporary array to your actual array. This resolves the issue in Android and in the same render the checkbox works absolutely fine.

Step1:

const [responseList, setResponseList] = useState([])

   response.data= response.data.map(item => {
        item.isSelect = false;
        return item;
      });
      setResponseList(response.data)

Step2:

 <FlatList style={styles.flatView}
      data={responseList}
      renderItem={({ item, index }) => (
              <View style={styles.checkboxContainerList}>
                <CheckBox
                  boxType='square'
                  value={item.isSelect}
                  onValueChange={() => {
                    setData(index)
                  }}
                  tintColor={'grey'}
                  onCheckColor={colorTheme}
                  onFillColor='white'
                  onTintColor={colorTheme}
                  tintColors={{ true: colorTheme }}
                  style={styles.checkboxView}
                />

              </View>
        )}

      keyExtractor={(item, index) => index.toString()}

    />

Step3:

function setData(index) {
var isSelected = responseList[index].isSelect
responseList[index].isSelect = !isSelected

let doc = []
responseList.map(item => {
  doc.push(item)
})
setResponseList(doc)
  }

For more detailed description and complete code https://github.com/ritzblogs/reactnative-FlatListCheckbox