How to Multi-Select Items(CHECKBOX) in a FlatList using hooks in - React Native

You’ve likely listened approximately a Flatlist component on the off chance that you're working in Respond local and dealing with records of different client information and points of interest either from the API or frame fields. Basically, Flatlist could be a center component planned for efficient display of vertically looking over records of changing information. It could be a component which came into presence in Respond local after the 0.43 form. It supplanted the ListView component and improved the capacity of engineers to bargain with records more effectively.    

What is Flatlist? And how can we use it for displaying dynamic or static lists?

FlatList could be a straightforward component presented to remove the impediments of the ListView component. The fundamental props required to handle a Flatlist are information and renderItem. For effortlessness, information is fair a plain cluster, while renderItem renders this information cluster and gives the designer the metadata like file etc.

Points to ponder

1. data prop takes data from {dataSource} and provides us with an array of objects.
2. ItemSeparatorComponent helps in separating the list items when displayed in a list.
3. The renderItem method is the most important part of a FlatList. It renders the array data in a manner that it can be developed as per data & design requirements.
4. As we are dealing with an array here, keyExtractor prop provides requires a unique key to handle the list item separately as required.
5. There is one more essential prop called extraData which I will describe later in this article.

Example:-

CheckBox:

import React from 'react';

import CheckBox from 'react-native-check-box';

import {color, moderateScale} from '../theme';

const checkBox = ({

  isChecked = false,

  onPressCheck = () => {},

  checkBoxColor = color.Green,

  checkedCheckBoxColor = color.Green,

  onChange,

}) => {

  return (

    <>

      <CheckBox

        onClick={() => onPressCheck()}

        isChecked={isChecked}

        checkBoxColor={checkBoxColor}

        checkedCheckBoxColor={checkedCheckBoxColor}

        onChange={onChange}

        style={{

          width: moderateScale(30),

          height: moderateScale(30),

          alignItems: 'center',

          justifyContent: 'center',

        }}

      />

    </>

  );

};

export default checkBox;

import React from 'react';

import {

  StyleSheet,

  View,

  FlatList,

  Text,

  TouchableOpacity,

  Image,

} from 'react-native';

import {CARD_DATA} from './src/data/datalist';

import CheckBox from './src/component/checkBox';

const Store = () => {

  const [dataSource, setDataSource] = React.useState([]);

  const [isChecked, setIsChecked] = React.useState();

  const selectItem = data => {

    data.item.isSelect = !data.item.isSelect;

    data.item.selectedClass = data.item.isSelect

      ? styles.selected

      : styles.list;

    setDataSource({

      dataSource: dataSource,

    });

  };

  const renderItem = data => (

    <TouchableOpacity

      style={[styles.list, data.item.selectedClass]}

      onPress={() => selectItem(data)}>

      <CheckBox

        onPressCheck={() => selectItem(data)}

        isChecked={

          (data.item.selectedClass = data.item.isSelect

            ? !isChecked

            : isChecked)

        }

      />

      <Text style={styles.lightText}>

        {' '}

        {data.item.title.charAt(0).toUpperCase() +

          data.item.title.slice(1)}{' '}

      </Text>

    </TouchableOpacity>

  );

  return (

    <View style={styles.container}>

      <FlatList data={CARD_DATA} renderItem={item => renderItem(item)} />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#192338',

    paddingVertical: 50,

    position: 'relative',

  },

  title: {

    fontSize: 20,

    color: '#fff',

    textAlign: 'center',

    marginBottom: 10,

  },

  loader: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#fff',

  },

  lightText: {

    color: '#f7f7f7',

    width: 200,

    paddingLeft: 15,

    fontSize: 12,

  },

  line: {

    height: 0.5,

    width: '100%',

    backgroundColor: 'rgba(255,255,255,0.5)',

  },

  list: {

    paddingVertical: 5,

    margin: 3,

    flexDirection: 'row',

    backgroundColor: '#192338',

    justifyContent: 'flex-start',

    alignItems: 'center',

    zIndex: -1,

  },

  number: {fontSize: 14, color: '#000'},

  selected: {backgroundColor: '#FA7B5F'},

});

export default Store;