Fully customizable Multi Grid Card Selection component for React Native on both iOS and Android
Add the dependency:
npm i react-native-multi-grid-selection
"@freakycoder/react-native-bounceable": ">= 0.2.4"
import MultiGridSingleSelect from "react-native-multi-grid-selection";
<MultiGridSingleSelect
data={multiGridData}
onSelect={(selectedData: any) => console.log("Selected Data: ", selectedData)}
/>
You MUST follow this data structure to use the react-native-multi-grid-selection
const testData: Array<IMultiSelectionDataType> = [
{
cardId: 0,
title: "What is your favorite NBA Team?",
data: [
{ id: 0, name: "Los Angeles Lakers" },
{ id: 1, name: "Golden State Warriors" },
{ id: 2, name: "Chicago Bulls" },
{ id: 3, name: "Boston Celtics" },
{ id: 4, name: "Cleveland" },
{ id: 5, name: "Miami Heat" },
],
},
{
cardId: 1,
title: "Who is the GOAT?",
data: [
{ id: 0, name: "Micheal Jordan" },
{ id: 1, name: "Wilt Chamberlain" },
{ id: 2, name: "Lebron James" },
{ id: 3, name: "Magic Johnson" },
{ id: 4, name: "Shaquille O'Neal" },
{ id: 5, name: "Kobe Bryant" },
],
},
{
cardId: 2,
title: "Which team will win NBA in 2021?",
data: [
{ id: 0, name: "Grizzlies" },
{ id: 1, name: "Wizards" },
{ id: 2, name: "Mavericks" },
{ id: 3, name: "Spurs" },
{ id: 4, name: "Hornets" },
{ id: 5, name: "Pistons" },
],
},
];
interface IMultiSelectionDataType {
cardId: number;
title: string;
data: Array<ISelectionDataType>;
}
export interface ICardSelectionDataType {
cardId: number;
title: string;
selectedData: ISelectionDataType;
}
export interface ISelectionDataType {
id: number;
name: string;
data?: any;
}
You can checkout the example project 🥰
Simply run
npm i
react-native run-ios/android
should work of the example project.
Property | Type | Default | Description |
---|---|---|---|
data | string | undefined | set the data for creating multi grid card system |
onSelect | function | undefined | set your own logic for the selection functionality when it is selected |
Property | Type | Default | Description |
---|---|---|---|
listStyle | ViewStyle | default | set or override the style object for the list style |
cardStyle | ViewStyle | default | set or override the style object for the card style |
headerStyle | ViewStyle | default | set or override the style object for the card header style |
headerTextStyle | TextStyle | default | set or override the style object for the card header's text title style |
buttonStyle | ViewStyle | default | set or override the style object for each button style |
buttonContainerStyle | ViewStyle | default | set or override the style object for each button style |
buttonTextStyle | TextStyle | default | set or override the style object for the card button text title style |
activeColor | color | "#307ff2" | change the active color of the buttons |
FreakyCoder, [email protected]
React Native Multi Grid Selection is available under the MIT license. See the LICENSE file for more info.