{"id":30805397,"url":"https://github.com/simformsolutionspvtltd/react-native-tree-selection","last_synced_at":"2025-09-06T00:56:55.693Z","repository":{"id":181209036,"uuid":"604446712","full_name":"SimformSolutionsPvtLtd/react-native-tree-selection","owner":"SimformSolutionsPvtLtd","description":"A high-performance and lightweight tree selection library for React Native🎖","archived":false,"fork":false,"pushed_at":"2024-01-11T20:55:52.000Z","size":13013,"stargazers_count":46,"open_issues_count":7,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-27T08:41:10.628Z","etag":null,"topics":["component","dropdown","library","react-native","select","selection","tree-select","tree-selection","tree-structure","typescript"],"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/SimformSolutionsPvtLtd.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,"governance":null}},"created_at":"2023-02-21T04:27:34.000Z","updated_at":"2025-07-02T14:46:24.000Z","dependencies_parsed_at":"2023-07-14T14:12:23.479Z","dependency_job_id":null,"html_url":"https://github.com/SimformSolutionsPvtLtd/react-native-tree-selection","commit_stats":null,"previous_names":["simformsolutionspvtltd/react-native-tree-selection"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SimformSolutionsPvtLtd/react-native-tree-selection","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-tree-selection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-tree-selection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-tree-selection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-tree-selection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/react-native-tree-selection/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Freact-native-tree-selection/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273842836,"owners_count":25177921,"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","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","dropdown","library","react-native","select","selection","tree-select","tree-selection","tree-structure","typescript"],"created_at":"2025-09-06T00:56:53.175Z","updated_at":"2025-09-06T00:56:55.675Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"TypeScript","readme":"![Tree-Selection](./assets/React-Native-Tree-Selection.gif)\n\n# react-native-tree-selection\n\n[![react-native-tree-selection on npm](https://img.shields.io/npm/v/react-native-tree-selection.svg?style=flat)](https://www.npmjs.com/package/react-native-tree-selection) [![react-native-tree-selection downloads](https://img.shields.io/npm/dm/react-native-tree-selection)](https://www.npmtrends.com/react-native-tree-selection) [![react-native-tree-selection install size](https://packagephobia.com/badge?p=react-native-tree-selection)](https://packagephobia.com/result?p=react-native-tree-selection) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)\n\n---\n\nHierarchical Tree Select Control, a high-performance and lightweight library designed to effortlessly render select components with hierarchical tree data. This versatile control not only facilitates the display of work selection but also empowers users to make their own selection.\n\nIt is simple to use and fully customizable. It works on both android and iOS platforms.\n\n---\n\n## 🎬 Preview\n\n---\n\n| Tree Selection with No Children | Tree Selection with children |\n| ---------------------------------------------------------------------- | ------------------------------------------------------------ |\n| ![Tree Selection with no Children](./assets/TreeSelection-noChild.gif) | ![Tree Selection with children](./assets/Tree-Selection.gif) |\n\n---\n\n## Quick Access\n\n- [Installation](#installation)\n- [Tree-selection Data](#tree-data-format)\n- [Usage and Examples](#usage)\n- [Properties](#properties)\n- [Example Code](#example)\n- [License](#license)\n\n## Getting Started 🔧\n\n# Installation\n\n##### 1. Install library\n\n```bash\nnpm install react-native-tree-selection\n```\n\n###### --- or ---\n\n```bash\nyarn add react-native-tree-selection\n```\n\n##### 2. Install cocoapods in the ios project\n\n```bash\ncd ios \u0026\u0026 pod install\n```\n\n# Tree-selection\n\n### Tree Data Format\n\n```jsx\nconst treeData: TreeDataTypes[] = [\n {\n id: '1',\n title: 'Fruits',\n data: [\n {\n title: 'Apples',\n data: [\n {\n title: 'Red Delicious',\n },\n {\n title: 'Granny Smith',\n },\n {\n title: 'Gala',\n },\n ],\n },\n {\n title: 'Bananas',\n data: [\n {\n title: 'Cavendish',\n },\n {\n title: 'Lady Finger',\n },\n ],\n },\n ],\n },\n];\n```\n\n#### Usage\n\n```jsx\n\u003cTreeSelect\n data={treeData}\n childKey=\"data\"\n titleKey=\"title\"\n onParentPress={onParentPress}\n onChildPress={onChildPress}\n onCheckBoxPress={onCheckBoxPress}\n/\u003e\n```\n\nCheckout TreeSelect Example [here](./example/src/App.tsx)\n\n##### App\n\n```jsx\nimport React from 'react';\nimport { TreeDataTypes, TreeSelect } from 'react-native-tree-selection';\n\nconst App = () =\u003e {\n return (\n \u003cTreeSelect\n data={treeData}\n childKey=\"data\"\n titleKey=\"title\"\n onParentPress={onParentPress}\n onChildPress={onChildPress}\n onCheckBoxPress={onCheckBoxPress}\n /\u003e\n );\n};\n\nexport default App;\n```\n\n# Properties\n\n---\n\n| Prop | Default | Type | Description |\n| :--------------------- | :------ | :-------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **data** | - | [Data](#tree-data-format) | An array of objects representing multiple data items organized in a tree structure. Each object can contain various types of data and can be extended to include additional information. This format allows for flexible data manipulation and integration. |\n| **childKey** | data | string | Specifies the name of the property in each node object that contains the children to display. |\n| **titleKey** | title | string | Specifies the name of the property in each node object that contains the title to display. |\n| onParentPress | - | function | A callback function that is called when a parent node is clicked. |\n| onChildPress | - | function | A callback function that is called when a child node is clicked. |\n| onCheckBoxPress | - | function | A callback function that is called when a checkbox is clicked. |\n| rightIconStyles | - | ImageStyle | Checkbox image style |\n| leftIconStyles | - | ImageStyle | Arrow image style |\n| parentContainerStyles | - | ViewStyle | Style for Parent Container |\n| childContainerStyles | - | TextStyle | Style for Child Container |\n| parentTextStyles | - | TextStyle | Text Styles for Parent |\n| childTextStyles | - | TextStyle | Text Styles for Child |\n| touchableActiveOpacity | 0.7 | activeOpacity | activeOpacity style for Touchable. |\n| flatListProps | - | FlatListProps\u003c[ArrayData](#tree-data-format)\u003e | Provide \u003ca href=\"https://reactnative.dev/docs/flatlist#props\"\u003eFlatList props\u003c/a\u003e. |\n| autoSelectParents | true | Boolean | Parents will gets selected when all the children are selected. |\n| autoSelectChildren | true | Boolean | Children will gets selected when parent is selected. |\n| renderArrowOpen | - | ImagePropType | Change icon for Arrow when parent expands. |\n| renderArrowClosed | - | ImagePropType | Change icon for checkbox when checkbox is selected. |\n| renderSelect | - | ImagePropType | Change icon for checkbox when checkbox is selected. |\n| renderUnSelect | - | ImagePropType | Change icon for checkbox when checkbox is unselected. |\n\n---\n\n# Example\n\nA full working example project is here [Example](./example/src/App.tsx)\n\n```sh\nyarn\nyarn example ios // For ios\nyarn example android // For Android\n```\n\n# TODO\n\n- [ ] Provide dynamic render items\n\n## Find this library useful? ❤️\n\nSupport it by joining [stargazers](https://github.com/SimformSolutionsPvtLtd/react-native-tree-selection/stargazers) for this repository.⭐\n\n## Bugs / Feature requests / Feedbacks\n\nFor bugs, feature requests, and discussion please use [GitHub Issues](https://github.com/SimformSolutionsPvtLtd/react-native-tree-selection/issues/new?labels=bug\u0026late=BUG_REPORT.md\u0026title=%5BBUG%5D%3A), [GitHub New Feature](https://github.com/SimformSolutionsPvtLtd/react-native-tree-selection/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEATURE%5D%3A), [GitHub Feedback](https://github.com/SimformSolutionsPvtLtd/react-native-tree-selection/issues/new?labels=enhancement\u0026late=FEATURE_REQUEST.md\u0026title=%5BFEEDBACK%5D%3A)\n\n## 🤝 How to Contribute\n\nWe'd love to have you improve this library or fix a problem 💪\nCheck out our [Contributing Guide](CONTRIBUTING.md) for ideas on contributing.\n\n## Awesome Mobile Libraries\n\n- Check out our other [available awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries)\n\n## License\n\n- [MIT License](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-tree-selection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-tree-selection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Freact-native-tree-selection/lists"}