{"id":21768304,"url":"https://github.com/hoaphantn7604/react-native-checkbox-tree","last_synced_at":"2025-04-13T15:41:30.247Z","repository":{"id":42492766,"uuid":"379101131","full_name":"hoaphantn7604/react-native-checkbox-tree","owner":"hoaphantn7604","description":"A simple and elegant checkbox tree for React Native.","archived":false,"fork":false,"pushed_at":"2022-06-14T04:26:18.000Z","size":601,"stargazers_count":26,"open_issues_count":5,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T06:34:45.124Z","etag":null,"topics":["checkbox-tree","components","elements","react-native","tree-view"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoaphantn7604.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-22T00:51:58.000Z","updated_at":"2025-03-05T03:11:36.000Z","dependencies_parsed_at":"2022-09-09T21:20:44.586Z","dependency_job_id":null,"html_url":"https://github.com/hoaphantn7604/react-native-checkbox-tree","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-checkbox-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-checkbox-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-checkbox-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoaphantn7604%2Freact-native-checkbox-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoaphantn7604","download_url":"https://codeload.github.com/hoaphantn7604/react-native-checkbox-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670435,"owners_count":21142904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox-tree","components","elements","react-native","tree-view"],"created_at":"2024-11-26T13:35:27.054Z","updated_at":"2025-04-13T15:41:30.228Z","avatar_url":"https://github.com/hoaphantn7604.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-checkbox-tree\nA simple and elegant checkbox tree for React Native. Implemented using [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n\n## Getting started\n```js\n    npm install react-native-checkbox-tree --save\n```\nor\n```js\n    yarn add react-native-checkbox-tree\n```\n\nNow we need to install [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\n```js\n    npm install react-native-vector-icons --save\n```\nor\n```js\n    yarn add react-native-vector-icons\n```\n\n#### Source code demo\n[react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.\n\n### Demo\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/checkboxtree/demo1.gif)\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/checkboxtree/demo2.gif)\n\n#### Props\n\n| Props              | Params               | isRequire | Description                                                               |\n| ------------------ | -------------------- | --------- | ------------------------------------------------------------------------- |\n| data               | Array                | Yes       | Data is a plain array                                                     |\n| textField          | String               | Yes       | Extract the lable from the data item                                      |\n| childField         | String               | Yes       | Extract the field children from the data item                             |\n| onSelect           | (item[])=\u003e void      | Yes       | Selection callback                                                        |\n| style              | ViewStyle            | No        | Styling for container view                                                |\n| textStyle          | TextStyle            | No        | Styling for text                                                          |\n| iconSize           | Number               | No        | Customize icon size                                                       |\n| iconColor          | String               | No        | Customize icon color                                                      |\n| autoSelectChilds   | Boolean              | No        | Automatically select childs when selecting an item, default is true       |\n| autoSelectParents  | Boolean              | No        | Automatically select parent when all childs are selected, default is true |\n| openIcon           | Element              | No        | Customize open icon. Only using react-native-vector-icons                 |\n| closeIcon          | Element              | No        | Customize close icon. Only using react-native-vector-icons                |\n| checkIcon          | Element              | No        | Customize check icon. Only using react-native-vector-icons                |\n| unCheckIcon        | Element              | No        | Customize uncheck icon. Only using react-native-vector-icons              |\n| renderItem         | (item, isSelect, isOpen, onOpen, onClose, onSelect)=\u003e Element | No | Takes an item from data and renders it into the list |\n\n#### Method\n| API                | Description                                           |\n| ------------------ | ----------------------------------------------------- |\n| clear              | Refresh data                                          |\n| setSelectedItem    | The input value is the result returned from onSelect  |\n\n#### Example 1\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/checkboxtree/example1.png)\n```javascript\nimport React, { useEffect, useRef, useState } from 'react';\nimport { StyleSheet, Text, TouchableOpacity, View } from 'react-native';\nimport CheckboxTree from 'react-native-checkbox-tree';\nimport AntDesign from 'react-native-vector-icons/AntDesign';\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\nconst recursiveData = [\n  {\n    shopReportName: 'Name 1',\n    shopCode: '00001',\n    shopType: '2',\n    shopId: 1,\n    shopName: 'Name 1',\n    childs: [\n      {\n        shopReportName: 'Name 2',\n        shopCode: '00002',\n        shopType: '3',\n        shopId: 2,\n        shopName: 'Name 2',\n        childs: [\n          {\n            shopReportName: 'Name 3',\n            shopCode: '00003',\n            shopType: '4',\n            shopId: 3,\n            shopName: 'Name 3',\n            childs: [\n              {\n                shopReportName: 'Name 4',\n                shopCode: '00004',\n                shopType: '4',\n                shopId: 4,\n                shopName: 'Name 4',\n              },\n              {\n                shopReportName: 'Name 5',\n                shopCode: '00005',\n                shopType: '4',\n                shopId: 5,\n                shopName: 'Name 5',\n                childs: [\n                  {\n                    shopReportName: 'Name 6',\n                    shopCode: '00006',\n                    shopType: '4',\n                    shopId: 7,\n                    shopName: 'Name 6',\n                    childs: [\n                      {\n                        shopReportName: 'Name 7',\n                        shopCode: '00007',\n                        shopType: '4',\n                        shopId: 7,\n                        shopName: 'Name 7',\n                      },\n                    ],\n                  },\n                ],\n              },\n              {\n                shopReportName: 'Name 8',\n                shopCode: '00008',\n                shopType: '4',\n                shopId: 8,\n                shopName: 'Name 8',\n              },\n            ],\n          },\n        ],\n      },\n    ],\n  },\n];\n\nexport interface Props {}\n\nconst CheckboxTreeScreen: React.FC\u003cProps\u003e = _props =\u003e {\n  const [data] = useState\u003cany[]\u003e(recursiveData);\n  const ref: any = useRef();\n\n  useEffect(() =\u003e {\n    if (ref \u0026\u0026 ref.current) {\n      ref.current.setSelectedItem([\n        {\n          shopReportName: 'Name 1',\n          shopCode: '00001',\n          shopType: '2',\n          shopId: 1,\n          shopName: 'Name 1',\n        },\n        {\n          shopReportName: 'Name 2',\n          shopCode: '00002',\n          shopType: '3',\n          shopId: 2,\n          shopName: 'Name 2',\n        },\n      ]);\n    }\n  }, [ref]);\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cCheckboxTree\n        ref={ref}\n        data={data}\n        textField=\"shopName\"\n        childField=\"childs\"\n        textStyle={{ color: 'black' }}\n        iconColor=\"black\"\n        iconSize={26}\n        openIcon={\u003cAntDesign name=\"arrowdown\" size={26} /\u003e}\n        closeIcon={\u003cAntDesign name=\"arrowright\" size={26} /\u003e}\n        renderItem={({ item, isSelect, isOpen, onOpen, onClose, onSelect }) =\u003e (\n          \u003cView style={styles.wrapItem}\u003e\n            {isOpen ? (\n              \u003cTouchableOpacity onPress={onClose}\u003e\n                \u003cAntDesign size={30} name=\"arrowright\" /\u003e\n              \u003c/TouchableOpacity\u003e\n            ) : (\n              \u003cTouchableOpacity onPress={onOpen}\u003e\n                \u003cAntDesign size={30} name=\"arrowdown\" /\u003e\n              \u003c/TouchableOpacity\u003e\n            )}\n            \u003cTouchableOpacity onPress={onSelect}\u003e\n              \u003cIonicons\n                size={26}\n                name={isSelect ? 'checkbox-outline' : 'square-outline'}\n              /\u003e\n            \u003c/TouchableOpacity\u003e\n            \u003cText style={styles.name}\u003e{item.shopName}\u003c/Text\u003e\n          \u003c/View\u003e\n        )}\n        onSelect={item =\u003e {\n          console.log(`Selected ${item.length} item`);\n        }}\n      /\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default CheckboxTreeScreen;\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    padding: 20,\n  },\n  wrapItem: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    marginVertical: 8,\n  },\n  icon: {\n    marginHorizontal: 8,\n  },\n  name: {\n    fontSize: 20,\n    marginLeft: 8,\n  },\n});\n```\n\n#### Example 2\n![](https://github.com/hoaphantn7604/file-upload/blob/master/document/checkboxtree/example2.png)\n```javascript\n  import React from 'react';\n  import { StyleSheet, View } from 'react-native';\n  import CheckboxTree from 'react-native-checkbox-tree';\n  import AntDesign from 'react-native-vector-icons/AntDesign';\n\n  const recursiveData = [\n    {\n      shopReportName: 'Name 1',\n      shopCode: '00001',\n      shopType: '2',\n      shopId: 1,\n      shopName: 'Name 1',\n      childs: [\n        {\n          shopReportName: 'Name 2',\n          shopCode: '00002',\n          shopType: '3',\n          shopId: 2,\n          shopName: 'Name 2',\n          childs: [\n            {\n              shopReportName: 'Name 3',\n              shopCode: '00003',\n              shopType: '4',\n              shopId: 3,\n              shopName: 'Name 3',\n              childs: [\n                {\n                  shopReportName: 'Name 4',\n                  shopCode: '00004',\n                  shopType: '4',\n                  shopId: 4,\n                  shopName: 'Name 4',\n                },\n                {\n                  shopReportName: 'Name 5',\n                  shopCode: '00005',\n                  shopType: '4',\n                  shopId: 5,\n                  shopName: 'Name 5',\n                  childs: [\n                    {\n                      shopReportName: 'Name 6',\n                      shopCode: '00006',\n                      shopType: '4',\n                      shopId: 7,\n                      shopName: 'Name 6',\n                      childs: [\n                        {\n                          shopReportName: 'Name 7',\n                          shopCode: '00007',\n                          shopType: '4',\n                          shopId: 7,\n                          shopName: 'Name 7',\n                        },\n                      ],\n                    },\n                  ],\n                },\n                {\n                  shopReportName: 'Name 8',\n                  shopCode: '00008',\n                  shopType: '4',\n                  shopId: 8,\n                  shopName: 'Name 8',\n                },\n              ],\n            },\n          ],\n        },\n      ],\n    },\n  ];\n\n  const CheckboxTreenScreen = _props =\u003e {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cCheckboxTree\n          data={recursiveData}\n          textField=\"shopName\"\n          childField=\"childs\"\n          textStyle={{ color: 'black' }}\n          iconColor=\"black\"\n          iconSize={26}\n          openIcon={\u003cAntDesign name=\"arrowdown\" size={26} /\u003e}\n          closeIcon={\u003cAntDesign name=\"arrowright\" size={26} /\u003e}\n          checkIcon={\u003cView /\u003e}\n          unCheckIcon={\u003cView /\u003e}\n          renderItem={item =\u003e (\n            \u003cView style={styles.wrapItem}\u003e\n              \u003cAntDesign\n                style={styles.iconItem}\n                name=\"folderopen\"\n                size={20}\n              /\u003e\n              \u003cText style={styles.text}\u003e{item.shopName}\u003c/Text\u003e\n            \u003c/View\u003e\n          )}\n          onSelect={item =\u003e {\n            console.log(`Selected ${item.length} item`);\n          }}\n        /\u003e\n      \u003c/View\u003e\n    );\n  };\n\n  export default CheckboxTreenScreen;\n\n  const styles = StyleSheet.create({\n    container: {\n      flex: 1,\n      paddingVertical: 40,\n    },\n    wrapItem: {\n      flexDirection: 'row',\n      marginVertical: 8\n    },\n    text: {\n      fontSize: 18\n    },\n    iconItem:{\n      marginHorizontal: 8\n    }\n  });\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-checkbox-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoaphantn7604%2Freact-native-checkbox-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoaphantn7604%2Freact-native-checkbox-tree/lists"}