How to create a multi-select on React-Native-Super-Grid

Question

I am new in React Native and I have been trying to implement a multi-select on a Flatlist. I recently found the react-native-super-grid component and I have been trying to customize it so I maybe able to do a multi-select and no luck thus far.

Am I on the right track, or is there a component that does a grid and multi-select?

Thank you, :'(

import React, { Component } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { FlatGrid } from 'react-native-super-grid'

export default class GridFlatlist extends Component {
    render() {
        const items = [
            { name: 'Pick n Pay', code: '#1abc9c' }, { name: 'EMERALD', code: '#2ecc71' },
            { name: 'PETER RIVER', code: '#3498db' }, { name: 'AMETHYST', code: '#9b59b6' },
            { name: 'WET ASPHALT', code: '#34495e' }, { name: 'GREEN SEA', code: '#16a085' },
            { name: 'NEPHRITIS', code: '#27ae60' }, { name: 'BELIZE HOLE', code: '#2980b9' },
            { name: 'WISTERIA', code: '#8e44ad' }, { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
            { name: 'SUN FLOWER', code: '#f1c40f' }, { name: 'CARROT', code: '#e67e22' },
            { name: 'ALIZARIN', code: '#e74c3c' }, { name: 'CLOUDS', code: '#ecf0f1' },
            { name: 'CONCRETE', code: '#95a5a6' }, { name: 'ORANGE', code: '#f39c12' },
            { name: 'PUMPKIN', code: '#d35400' }, { name: 'POMEGRANATE', code: '#c0392b' },
            { name: 'SILVER', code: '#bdc3c7' },
        ];
        return (
            <FlatGrid
                itemDimension={110}
                items={items}
                style={styles.gridView}
                renderItem={({ item, index }) => (
                    <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                        <Text style={styles.itemName}>{item.name}</Text>
                        <Text style={styles.itemCode}>{item.code}</Text>
                    </View>
                )} />
        )
    }
}

const styles = StyleSheet.create({
    gridView: {
        marginTop: 20,
        flex: 1,
    },
    itemContainer: {
        justifyContent: 'flex-end',
        padding: 10,
        height: 110,
    },
    itemName: {
        fontSize: 16,
        color: '#fff',
        fontWeight: '600',
    },
    itemCode: {
        fontWeight: '600',
        fontSize: 12,
        color: '#fff',
    },
})

Answer 1

You can use a flatlist to create a multi select very simply. Only thing is react native doesnt have a checkbox that works in both Android and IOS. The below example is for Android and you can use the Checkbox from react native elements to support both platforms.

Here's the code for the solution.

const CheckList = props => {
 const [data, setData] = useState([]);

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

  const OnCheckChange = id => {
    const arr = [...data];
    const item = arr.find(item => item.id === id);
    item.isChecked = !item.isChecked;
    setData(arr);
    // can use a callback to update parent from here
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => {
        return (
          <View style={{ flexDirection: "row" }}>
            <CheckBox
              value={item.isChecked}
              onValueChange={() => OnCheckChange(item.id)}
            />
            <Text>{item.name}</Text>
          </View>
        );
      }}
    />
  );
};

const items = [
  { id: 1, name: "Pick n Pay", code: "#1abc9c" },
  { id: 2, name: "EMERALD", code: "#2ecc71" },
  { id: 3, name: "PETER RIVER", code: "#3498db" },
  { id: 4, name: "AMETHYST", code: "#9b59b6" },
  { id: 5, name: "WET ASPHALT", code: "#34495e" },
  { id: 6, name: "GREEN SEA", code: "#16a085" },
  { id: 7, name: "NEPHRITIS", code: "#27ae60" },
  { id: 8, name: "BELIZE HOLE", code: "#2980b9" }
];

class App extends Component {
  render() {
    return (
      <View style={styles.app}>
        <CheckList data={items} />
        <Button onPress={() => {}} title="Example button" />
      </View>
    );
  }
}