react-native-tree-multi-select

react-native-tree-multi-select

Tree view with multi selection using checkbox + search filtering.

Installation

Using yarn

yarn add react-native-tree-multi-select && cd ios && pod install

using npm:

npm install react-native-tree-multi-select && cd ios && pod install

Dependencies required to be installed for this library to work:

1. @shopify/flash-list
2. react-native-paper
3. react-native-vector-icons

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 ids 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