react-native-checkbox-tree

A simple and elegant checkbox tree for React Native. Implemented using react-native-vector-icons

Getting started

1    npm install react-native-checkbox-tree --save

or

1    yarn add react-native-checkbox-tree

Now we need to install react-native-vector-icons.

1    npm install react-native-vector-icons --save

or

1    yarn add react-native-vector-icons

Source code demo

react-native-template-components A beautiful template for React Native.

Demo

Props

Props	Params	isRequire	Description
data	Array	Yes	Data is a plain array
textField	String	Yes	Extract the lable from the data item
childField	String	Yes	Extract the field children from the data item
onSelect	(item[])=> void	Yes	Selection callback
style	ViewStyle	No	Styling for container view
textStyle	TextStyle	No	Styling for text
iconSize	Number	No	Customize icon size
iconColor	String	No	Customize icon color
autoSelectChilds	Boolean	No	Automatically select childs when selecting an item, default is true
autoSelectParents	Boolean	No	Automatically select parent when all childs are selected, default is true
openIcon	Element	No	Customize open icon. Only using react-native-vector-icons
closeIcon	Element	No	Customize close icon. Only using react-native-vector-icons
checkIcon	Element	No	Customize check icon. Only using react-native-vector-icons
unCheckIcon	Element	No	Customize uncheck icon. Only using react-native-vector-icons
renderItem	(item, isSelect, isOpen, onOpen, onClose, onSelect)=> Element	No	Takes an item from data and renders it into the list

Method

API	Description
clear	Refresh data
setSelectedItem	The input value is the result returned from onSelect

Example 1

1import React, { useEffect, useRef, useState } from 'react';
2import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
3import CheckboxTree from 'react-native-checkbox-tree';
4import AntDesign from 'react-native-vector-icons/AntDesign';
5import Ionicons from 'react-native-vector-icons/Ionicons';
6
7const recursiveData = [
8  {
9    shopReportName: 'Name 1',
10    shopCode: '00001',
11    shopType: '2',
12    shopId: 1,
13    shopName: 'Name 1',
14    childs: [
15      {
16        shopReportName: 'Name 2',
17        shopCode: '00002',
18        shopType: '3',
19        shopId: 2,
20        shopName: 'Name 2',
21        childs: [
22          {
23            shopReportName: 'Name 3',
24            shopCode: '00003',
25            shopType: '4',
26            shopId: 3,
27            shopName: 'Name 3',
28            childs: [
29              {
30                shopReportName: 'Name 4',
31                shopCode: '00004',
32                shopType: '4',
33                shopId: 4,
34                shopName: 'Name 4',
35              },
36              {
37                shopReportName: 'Name 5',
38                shopCode: '00005',
39                shopType: '4',
40                shopId: 5,
41                shopName: 'Name 5',
42                childs: [
43                  {
44                    shopReportName: 'Name 6',
45                    shopCode: '00006',
46                    shopType: '4',
47                    shopId: 7,
48                    shopName: 'Name 6',
49                    childs: [
50                      {
51                        shopReportName: 'Name 7',
52                        shopCode: '00007',
53                        shopType: '4',
54                        shopId: 7,
55                        shopName: 'Name 7',
56                      },
57                    ],
58                  },
59                ],
60              },
61              {
62                shopReportName: 'Name 8',
63                shopCode: '00008',
64                shopType: '4',
65                shopId: 8,
66                shopName: 'Name 8',
67              },
68            ],
69          },
70        ],
71      },
72    ],
73  },
74];
75
76export interface Props {}
77
78const CheckboxTreeScreen: React.FC<Props> = _props => {
79  const [data] = useState<any[]>(recursiveData);
80  const ref: any = useRef();
81
82  useEffect(() => {
83    if (ref && ref.current) {
84      ref.current.setSelectedItem([
85        {
86          shopReportName: 'Name 1',
87          shopCode: '00001',
88          shopType: '2',
89          shopId: 1,
90          shopName: 'Name 1',
91        },
92        {
93          shopReportName: 'Name 2',
94          shopCode: '00002',
95          shopType: '3',
96          shopId: 2,
97          shopName: 'Name 2',
98        },
99      ]);
100    }
101  }, [ref]);
102
103  return (
104    <View style={styles.container}>
105      <CheckboxTree
106        ref={ref}
107        data={data}
108        textField="shopName"
109        childField="childs"
110        textStyle={{ color: 'black' }}
111        iconColor="black"
112        iconSize={26}
113        openIcon={<AntDesign name="arrowdown" size={26} />}
114        closeIcon={<AntDesign name="arrowright" size={26} />}
115        renderItem={({ item, isSelect, isOpen, onOpen, onClose, onSelect }) => (
116          <View style={styles.wrapItem}>
117            {isOpen ? (
118              <TouchableOpacity onPress={onClose}>
119                <AntDesign size={30} name="arrowright" />
120              </TouchableOpacity>
121            ) : (
122              <TouchableOpacity onPress={onOpen}>
123                <AntDesign size={30} name="arrowdown" />
124              </TouchableOpacity>
125            )}
126            <TouchableOpacity onPress={onSelect}>
127              <Ionicons
128                size={26}
129                name={isSelect ? 'checkbox-outline' : 'square-outline'}
130              />
131            </TouchableOpacity>
132            <Text style={styles.name}>{item.shopName}</Text>
133          </View>
134        )}
135        onSelect={item => {
136          console.log(`Selected ${item.length} item`);
137        }}
138      />
139    </View>
140  );
141};
142
143export default CheckboxTreeScreen;
144
145const styles = StyleSheet.create({
146  container: {
147    flex: 1,
148    padding: 20,
149  },
150  wrapItem: {
151    flexDirection: 'row',
152    alignItems: 'center',
153    marginVertical: 8,
154  },
155  icon: {
156    marginHorizontal: 8,
157  },
158  name: {
159    fontSize: 20,
160    marginLeft: 8,
161  },
162});

Example 2

1  import React from 'react';
2  import { StyleSheet, View } from 'react-native';
3  import CheckboxTree from 'react-native-checkbox-tree';
4  import AntDesign from 'react-native-vector-icons/AntDesign';
5
6  const recursiveData = [
7    {
8      shopReportName: 'Name 1',
9      shopCode: '00001',
10      shopType: '2',
11      shopId: 1,
12      shopName: 'Name 1',
13      childs: [
14        {
15          shopReportName: 'Name 2',
16          shopCode: '00002',
17          shopType: '3',
18          shopId: 2,
19          shopName: 'Name 2',
20          childs: [
21            {
22              shopReportName: 'Name 3',
23              shopCode: '00003',
24              shopType: '4',
25              shopId: 3,
26              shopName: 'Name 3',
27              childs: [
28                {
29                  shopReportName: 'Name 4',
30                  shopCode: '00004',
31                  shopType: '4',
32                  shopId: 4,
33                  shopName: 'Name 4',
34                },
35                {
36                  shopReportName: 'Name 5',
37                  shopCode: '00005',
38                  shopType: '4',
39                  shopId: 5,
40                  shopName: 'Name 5',
41                  childs: [
42                    {
43                      shopReportName: 'Name 6',
44                      shopCode: '00006',
45                      shopType: '4',
46                      shopId: 7,
47                      shopName: 'Name 6',
48                      childs: [
49                        {
50                          shopReportName: 'Name 7',
51                          shopCode: '00007',
52                          shopType: '4',
53                          shopId: 7,
54                          shopName: 'Name 7',
55                        },
56                      ],
57                    },
58                  ],
59                },
60                {
61                  shopReportName: 'Name 8',
62                  shopCode: '00008',
63                  shopType: '4',
64                  shopId: 8,
65                  shopName: 'Name 8',
66                },
67              ],
68            },
69          ],
70        },
71      ],
72    },
73  ];
74
75  const CheckboxTreenScreen = _props => {
76    return (
77      <View style={styles.container}>
78        <CheckboxTree
79          data={recursiveData}
80          textField="shopName"
81          childField="childs"
82          textStyle={{ color: 'black' }}
83          iconColor="black"
84          iconSize={26}
85          openIcon={<AntDesign name="arrowdown" size={26} />}
86          closeIcon={<AntDesign name="arrowright" size={26} />}
87          checkIcon={<View />}
88          unCheckIcon={<View />}
89          renderItem={item => (
90            <View style={styles.wrapItem}>
91              <AntDesign
92                style={styles.iconItem}
93                name="folderopen"
94                size={20}
95              />
96              <Text style={styles.text}>{item.shopName}</Text>
97            </View>
98          )}
99          onSelect={item => {
100            console.log(`Selected ${item.length} item`);
101          }}
102        />
103      </View>
104    );
105  };
106
107  export default CheckboxTreenScreen;
108
109  const styles = StyleSheet.create({
110    container: {
111      flex: 1,
112      paddingVertical: 40,
113    },
114    wrapItem: {
115      flexDirection: 'row',
116      marginVertical: 8
117    },
118    text: {
119      fontSize: 18
120    },
121    iconItem:{
122      marginHorizontal: 8
123    }
124  });