A simple and elegant checkbox tree for React Native. Implemented using react-native-vector-icons
npm install react-native-checkbox-tree --saveor
yarn add react-native-checkbox-treeNow we need to install react-native-vector-icons.
npm install react-native-vector-icons --saveor
yarn add react-native-vector-iconsreact-native-template-components A beautiful template for React Native.
| 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 |
| API | Description |
|---|---|
| clear | Refresh data |
| setSelectedItem | The input value is the result returned from onSelect |
import React, { useEffect, useRef, useState } from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import CheckboxTree from 'react-native-checkbox-tree'; import AntDesign from 'react-native-vector-icons/AntDesign'; import Ionicons from 'react-native-vector-icons/Ionicons'; const recursiveData = [ { shopReportName: 'Name 1', shopCode: '00001', shopType: '2', shopId: 1, shopName: 'Name 1', childs: [ { shopReportName: 'Name 2', shopCode: '00002', shopType: '3', shopId: 2, shopName: 'Name 2', childs: [ { shopReportName: 'Name 3', shopCode: '00003', shopType: '4', shopId: 3, shopName: 'Name 3', childs: [ { shopReportName: 'Name 4', shopCode: '00004', shopType: '4', shopId: 4, shopName: 'Name 4', }, { shopReportName: 'Name 5', shopCode: '00005', shopType: '4', shopId: 5, shopName: 'Name 5', childs: [ { shopReportName: 'Name 6', shopCode: '00006', shopType: '4', shopId: 7, shopName: 'Name 6', childs: [ { shopReportName: 'Name 7', shopCode: '00007', shopType: '4', shopId: 7, shopName: 'Name 7', }, ], }, ], }, { shopReportName: 'Name 8', shopCode: '00008', shopType: '4', shopId: 8, shopName: 'Name 8', }, ], }, ], }, ], }, ]; export interface Props {} const CheckboxTreeScreen: React.FC<Props> = _props => { const [data] = useState<any[]>(recursiveData); const ref: any = useRef(); useEffect(() => { if (ref && ref.current) { ref.current.setSelectedItem([ { shopReportName: 'Name 1', shopCode: '00001', shopType: '2', shopId: 1, shopName: 'Name 1', }, { shopReportName: 'Name 2', shopCode: '00002', shopType: '3', shopId: 2, shopName: 'Name 2', }, ]); } }, [ref]); return ( <View style={styles.container}> <CheckboxTree ref={ref} data={data} textField="shopName" childField="childs" textStyle={{ color: 'black' }} iconColor="black" iconSize={26} openIcon={<AntDesign name="arrowdown" size={26} />} closeIcon={<AntDesign name="arrowright" size={26} />} renderItem={({ item, isSelect, isOpen, onOpen, onClose, onSelect }) => ( <View style={styles.wrapItem}> {isOpen ? ( <TouchableOpacity onPress={onClose}> <AntDesign size={30} name="arrowright" /> </TouchableOpacity> ) : ( <TouchableOpacity onPress={onOpen}> <AntDesign size={30} name="arrowdown" /> </TouchableOpacity> )} <TouchableOpacity onPress={onSelect}> <Ionicons size={26} name={isSelect ? 'checkbox-outline' : 'square-outline'} /> </TouchableOpacity> <Text style={styles.name}>{item.shopName}</Text> </View> )} onSelect={item => { console.log(`Selected ${item.length} item`); }} /> </View> ); }; export default CheckboxTreeScreen; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, wrapItem: { flexDirection: 'row', alignItems: 'center', marginVertical: 8, }, icon: { marginHorizontal: 8, }, name: { fontSize: 20, marginLeft: 8, }, });
import React from 'react'; import { StyleSheet, View } from 'react-native'; import CheckboxTree from 'react-native-checkbox-tree'; import AntDesign from 'react-native-vector-icons/AntDesign'; const recursiveData = [ { shopReportName: 'Name 1', shopCode: '00001', shopType: '2', shopId: 1, shopName: 'Name 1', childs: [ { shopReportName: 'Name 2', shopCode: '00002', shopType: '3', shopId: 2, shopName: 'Name 2', childs: [ { shopReportName: 'Name 3', shopCode: '00003', shopType: '4', shopId: 3, shopName: 'Name 3', childs: [ { shopReportName: 'Name 4', shopCode: '00004', shopType: '4', shopId: 4, shopName: 'Name 4', }, { shopReportName: 'Name 5', shopCode: '00005', shopType: '4', shopId: 5, shopName: 'Name 5', childs: [ { shopReportName: 'Name 6', shopCode: '00006', shopType: '4', shopId: 7, shopName: 'Name 6', childs: [ { shopReportName: 'Name 7', shopCode: '00007', shopType: '4', shopId: 7, shopName: 'Name 7', }, ], }, ], }, { shopReportName: 'Name 8', shopCode: '00008', shopType: '4', shopId: 8, shopName: 'Name 8', }, ], }, ], }, ], }, ]; const CheckboxTreenScreen = _props => { return ( <View style={styles.container}> <CheckboxTree data={recursiveData} textField="shopName" childField="childs" textStyle={{ color: 'black' }} iconColor="black" iconSize={26} openIcon={<AntDesign name="arrowdown" size={26} />} closeIcon={<AntDesign name="arrowright" size={26} />} checkIcon={<View />} unCheckIcon={<View />} renderItem={item => ( <View style={styles.wrapItem}> <AntDesign style={styles.iconItem} name="folderopen" size={20} /> <Text style={styles.text}>{item.shopName}</Text> </View> )} onSelect={item => { console.log(`Selected ${item.length} item`); }} /> </View> ); }; export default CheckboxTreenScreen; const styles = StyleSheet.create({ container: { flex: 1, paddingVertical: 40, }, wrapItem: { flexDirection: 'row', marginVertical: 8 }, text: { fontSize: 18 }, iconItem:{ marginHorizontal: 8 } });