react-native-selectable-grid

Customizeable selectable (none, one or more) grid.

Installation

1. Run: npm install react-native-selectable-grid --save or yarn add react-native-selectable-grid

Usage (Example)

import React, { Component } from 'react';
import { View } from 'react-native';
import SelectableGrid from 'react-native-selectable-grid'
 
const fakeData = [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4' }, { label: '5' }];
 
class App extends Component {
  render() {
    return (
      <View>
        <SelectableGrid
          data={fakeData}
        />
      </View>
    );
  }
}

Properties

Prop	Type	Description	Default	Required
data	array	Receives array of data to be displayed	By default receives array of objects with 'label' key	Required
height	number	Height of individual box	By default height will be same as width	Optional
maxPerRow	number	Maximum boxes per row (all boxes in grid will have the same width and height)	2	Optional
maxSelect	number	Number of selectable boxes (0 = non-selectable, 1 = only one is selectable, 2 = only two are selectable, so on and so forth)	1	Optional
unselectedRender	function	Custom component for unselected item	None	Optional
selectedRender	function	Custom component for selected item	None	Optional
unselectedStyle	style	Style for unselected boxes	None	Optional
selectedStyle	style	Style for selected boxes	None	Optional
onSelect	function	Return selected item(s) by index everytime user make selections	null	Optional

Custom Render

You can specify unselectedRender only and without selectedRender. By default, it will only change backgroundColor or any styles you specified in selectedStyle, when you select a box.

E.g:

<SelectableGrid
  data={somedata}
  unselectedRender={data => (
    <View>
      <Text style={{ color: 'red', fontSize: 35 }}>{data.label}</Text>
    </View>
  )}
  selectedRender={data => (
    <View>
      <Text style={{ color: 'blue', fontSize: 35 }}>{data.label}</Text>
    </View>
  )}
/>

Retrieving Selected Data

There are two ways of retrieving selected data.

1. Using onSelect
2. Using ref

To use onSelect to retrieve selected data, see example below:

import SelectableGrid from 'react-native-selectable-grid';
...
<SelectableGrid
  data={fakeData}
  onSelect={selectedData => alert(selectedData)}
/>
...

To use ref to retrieve selected data via selectedData() function, see example below:

import SelectableGrid from 'react-native-selectable-grid';
...
<SelectableGrid
  data={fakeData}
  ref={(ref) => {
    this.sbRef = ref;
  }}
/>
...
<Button onPress={() => alert(this.sbRef.selectedData())}>
  <Text children={'Retrieve data'}>
</Button>

If nothing is selected, both ways returns null.