Customizeable selectable (none, one or more) grid.
- Run:
npm install react-native-selectable-grid --save
oryarn add react-native-selectable-grid
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>
);
}
}
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 |
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>
)}
/>
There are two ways of retrieving selected data.
- Using
onSelect
- 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
.