Package Exports
- react-native-tree-multi-select
- react-native-tree-multi-select/lib/commonjs/index.js
- react-native-tree-multi-select/lib/module/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-tree-multi-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-tree-multi-select
Tree view with multi selection using checkbox + search filtering.
Demo

Installation
Using yarn
yarn add react-native-tree-multi-select
using npm:
npm install react-native-tree-multi-select
Dependencies required to be installed for this library to work:
Make sure to follow the native-related installation for these dependencies.
Usage
import {
TreeView,
type TreeNode,
type TreeViewRef
} from 'react-native-tree-multi-select';
const myData: TreeNode[] = [...];
export function MyAppScreen(){
const treeViewRef = React.useRef<TreeViewRef | null>(null);
// Recommended to use debounce for search function
function triggerSearch(text: string){
// Pass search text to the tree along with the keys on which search is to be done(optional)
treeViewRef.current?.setSearchText(text, ["name"]);
}
const handleSelectionChange = (checkedIds: string[]) => {
// NOTE: Do something with updated checkedIds here
};
const handleExpanded = (expandedIds: string[]) => {
// NOTE: Do something with updated expandedIds here
};
// Multi-selection function calls using ref
const onSelectAllPress = () => treeViewRef.current?.selectAll?.();
const onUnselectAllPress = () => treeViewRef.current?.unselectAll?.();
const onSelectAllFilteredPress = () => treeViewRef.current?.selectAllFiltered?.();
const onUnselectAllFilteredPress = () => treeViewRef.current?.unselectAllFiltered?.();
return(
// ...
<TreeView
ref={treeViewRef}
data={myData}
onCheck={handleSelectionChange}
onExpand={handleExpanded}
/>
);
}
Properties
Property | Type | Required | Description |
---|---|---|---|
data |
TreeNode[] |
Yes | An array of TreeNode objects |
onCheck |
(checkedIds: string[]) => void |
No | Callback when a checkbox is checked |
onExpand |
(expandedIds: string[]) => void |
No | Callback when a node is expanded |
preselectedIds |
string[] |
No | An array of id s that should be preselected |
treeFlashListProps |
TreeFlatListProps |
No | Props for the flash list |
checkBoxViewStyleProps |
CheckBoxViewStyleProps |
No | Props for the checkbox view |
CheckboxComponent |
ComponentType<CheckBoxViewProps> |
No | A custom checkbox component |
ExpandCollapseIconComponent |
ComponentType<ExpandIconProps> |
No | A custom expand/collapse icon component |
ExpandCollapseTouchableComponent |
ComponentType<TouchableOpacityProps> |
No | A custom expand/collapse touchable component |
TreeViewRef
Property | Type | Description |
---|---|---|
selectAll |
() => void |
Selects all nodes |
unselectAll |
() => void |
Unselects all nodes |
selectAllFiltered |
() => void |
Selects all filtered nodes |
unselectAllFiltered |
() => void |
Unselects all filtered nodes |
expandAll |
() => void |
Expands all nodes |
collapseAll |
() => void |
Collapses all nodes |
setSearchText |
(searchText: string, searchKeys?: string[]) => void |
Set the search text and optionally the search keys. Default search key is "name" Recommended to call this inside a debounced function if you find any performance issue otherwise. |
TreeNode
Property | Type | Required | Description |
---|---|---|---|
id |
string |
Yes | Unique identifier for the node |
name |
string |
Yes | The display name of the node |
children |
TreeNode[] |
No | An array of child TreeNode objects |
[key: string] |
any |
No | Any additional properties for the node (May be useful to perform search on) |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Support the project
Made with create-react-native-library