react-native-tree-multi-select 1.7.0 → 1.8.0

package/src/components/NodeList.tsx

@@ -26,11 +26,12 @@ import { CheckboxView } from "./CheckboxView";
 import { CustomExpandCollapseIcon } from "./CustomExpandCollapseIcon";
 import { defaultIndentationMultiplier } from "../constants/treeView.constants";
 import { useShallow } from 'zustand/react/shallow';
+import { typedMemo } from "../utils/typedMemo";
 
-const NodeList = React.memo(_NodeList);
+const NodeList = typedMemo(_NodeList);
 export default NodeList;
 
-function _NodeList(props: NodeListProps) {
+function _NodeList<ID>(props: NodeListProps<ID>) {
     const {
         storeId,
 
@@ -50,7 +51,7 @@ function _NodeList(props: NodeListProps) {
         updateInnerMostChildrenIds,
         searchKeys,
         searchText
-    } = useTreeViewStore(storeId)(useShallow(
+    } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             expanded: state.expanded,
             initialTreeViewData: state.initialTreeViewData,
@@ -61,31 +62,31 @@ function _NodeList(props: NodeListProps) {
     ));
 
     // First we filter the tree as per the search term and keys
-    const filteredTree = React.useMemo(() => getFilteredTreeData(
+    const filteredTree = React.useMemo(() => getFilteredTreeData<ID>(
         initialTreeViewData,
         searchText.trim().toLowerCase(),
         searchKeys
     ), [initialTreeViewData, searchText, searchKeys]);
 
     // Then we flatten the tree to make it "render-compatible" in a "flat" list
-    const flattenedFilteredNodes = React.useMemo(() => getFlattenedTreeData(
+    const flattenedFilteredNodes = React.useMemo(() => getFlattenedTreeData<ID>(
         filteredTree,
         expanded,
     ), [filteredTree, expanded]);
 
     // And update the innermost children id -> required to un/select filtered tree
     React.useEffect(() => {
-        const updatedInnerMostChildrenIds = getInnerMostChildrenIdsInTree(
+        const updatedInnerMostChildrenIds = getInnerMostChildrenIdsInTree<ID>(
             filteredTree
         );
         updateInnerMostChildrenIds(updatedInnerMostChildrenIds);
     }, [filteredTree, updateInnerMostChildrenIds]);
 
     const nodeRenderer = React.useCallback((
-        { item }: { item: __FlattenedTreeNode__; }
+        { item }: { item: __FlattenedTreeNode__<ID>; }
     ) => {
         return (
-            <Node
+            <Node<ID>
                 storeId={storeId}
 
                 node={item}
@@ -144,8 +145,8 @@ function getValue(
     }
 }
 
-const Node = React.memo(_Node);
-function _Node(props: NodeProps) {
+const Node = typedMemo(_Node);
+function _Node<ID>(props: NodeProps<ID>) {
     const {
         storeId,
 
@@ -164,7 +165,7 @@ function _Node(props: NodeProps) {
     const {
         isExpanded,
         value,
-    } = useTreeViewStore(storeId)(useShallow(
+    } = useTreeViewStore<ID>(storeId)(useShallow(
         state => ({
             isExpanded: state.expanded.has(node.id),
             value: getValue(

package/src/helpers/expandCollapse.helper.ts

@@ -8,8 +8,8 @@ import { getTreeViewStore } from "../store/treeView.store";
  *
  * @param id - The ID of the tree node to toggle.
  */
-export function handleToggleExpand(storeId: string, id: string) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function handleToggleExpand<ID>(storeId: string, id: ID) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const {
         expanded,
         updateExpanded,
@@ -72,14 +72,14 @@ export function collapseAll(storeId: string) {
  * its ancestors up to the root.
  * @param ids - Ids of nodes to expand.
  */
-export function expandNodes(storeId: string, ids: string[]) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function expandNodes<ID>(storeId: string, ids: ID[]) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { expanded, updateExpanded, childToParentMap } = treeViewStore.getState();
     const newExpanded = new Set(expanded);
-    const processedIds = new Set<string>();
+    const processedIds = new Set<ID>();
 
     ids.forEach((id) => {
-        let currentId: string | undefined = id;
+        let currentId: ID | undefined = id;
         while (currentId && !processedIds.has(currentId)) {
             newExpanded.add(currentId);
             processedIds.add(currentId);
@@ -95,13 +95,13 @@ export function expandNodes(storeId: string, ids: string[]) {
  * its descendants.
  * @param ids - Ids of nodes to collapse.
  */
-export function collapseNodes(storeId: string, ids: string[]) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function collapseNodes<ID>(storeId: string, ids: ID[]) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const { expanded, updateExpanded, nodeMap } = treeViewStore.getState();
     const newExpanded = new Set(expanded);
 
     // Use an iterative approach to remove all descendants from the expanded set
-    const deleteChildrenFromExpanded = (nodeId: string) => {
+    const deleteChildrenFromExpanded = (nodeId: ID) => {
         const stack = [nodeId];
 
         while (stack.length > 0) {

package/src/helpers/flattenTree.helper.ts

@@ -1,7 +1,7 @@
 import { TreeNode, __FlattenedTreeNode__ } from "../types/treeView.types";
 
 /**
- * Flatten the tree and attach a "level" key to object to indicate it's depth. This 
+ * Flatten the tree and attach a "level" key to object to indicate it's depth. This
  * returns the flattened tree data of expanded ids only. We do not prune the tree off the
  * children after the flattening as it would be unnecessary computation.
  *
@@ -10,12 +10,12 @@ import { TreeNode, __FlattenedTreeNode__ } from "../types/treeView.types";
  * @param __level__ - (optional) for internal recursive use only
  * @returns Flattened tree data with expanded ids only
  */
-export function getFlattenedTreeData(
-    nodes: TreeNode[],
-    expandedIds: Set<string>,
-): __FlattenedTreeNode__[] {
-    const flattened: __FlattenedTreeNode__[] = [];
-    const stack: { node: TreeNode; level: number; }[] = [];
+export function getFlattenedTreeData<ID>(
+    nodes: TreeNode<ID>[],
+    expandedIds: Set<ID>,
+): __FlattenedTreeNode__<ID>[] {
+    const flattened: __FlattenedTreeNode__<ID>[] = [];
+    const stack: { node: TreeNode<ID>; level: number; }[] = [];
 
     // Initialize stack with the root nodes and level 0
     for (let i = nodes.length - 1; i >= 0; i--) {

package/src/helpers/search.helper.ts

@@ -3,22 +3,22 @@ import { TreeNode } from "../types/treeView.types";
 /**
  * Get filtered tree data based on the search term and the search keys
  * If any of the parent contains the search term, the tree will also contain
- * it's children. 
- * 
+ * it's children.
+ *
  * If only one of the innermost children contains the search term then it's siblings
  * won't be included in the search. But all it's ancestor nodes will be included
- *  
+ *
  * @param nodes Input tree data
  * @param trimmedSearchTerm search term
  * @param searchKeys search key
  * @returns filtered tree data
  */
-export function getFilteredTreeData(
-    nodes: TreeNode[],
+export function getFilteredTreeData<ID>(
+    nodes: TreeNode<ID>[],
     trimmedSearchTerm: string,
     searchKeys: string[]
-): TreeNode[] {
-    let filtered: TreeNode[] = [];
+): TreeNode<ID>[] {
+    let filtered: TreeNode<ID>[] = [];
 
     for (let node of nodes) {
         const isSearchTermInNode = doesNodeContainSearchTerm(
@@ -32,7 +32,7 @@ export function getFilteredTreeData(
             filtered.push(node);
         } else if (node.children) {
             // If node does not match, check its children and include them if they match
-            const childMatches = getFilteredTreeData(
+            const childMatches = getFilteredTreeData<ID>(
                 node.children,
                 trimmedSearchTerm,
                 searchKeys
@@ -51,7 +51,7 @@ export function getFilteredTreeData(
 /**
  * Checks if a given tree node contains a specific search term in any of its specified keys.
  *
- * This function will check each of the specified keys in the tree node, convert the key's value to a string, 
+ * This function will check each of the specified keys in the tree node, convert the key's value to a string,
  * and check if it includes the search term.
  *
  * @param node - The tree node to search through.
@@ -59,8 +59,8 @@ export function getFilteredTreeData(
  * @param searchKeys - The keys in the tree node to search in.
  * @returns True if the search term is found in any of the specified keys, false otherwise.
  */
-function doesNodeContainSearchTerm(
-    node: TreeNode,
+function doesNodeContainSearchTerm<ID>(
+    node: TreeNode<ID>,
     searchTerm: string,
     searchKeys: string[]
 ): boolean {
@@ -69,7 +69,7 @@ function doesNodeContainSearchTerm(
         // Get the value of the key in the tree node
         const nodeValue = node[key];
         // Check if the string representation of the key's value includes the search term
-        // If the value is undefined or null, `nodeValue?.toString()` will return undefined, 
+        // If the value is undefined or null, `nodeValue?.toString()` will return undefined,
         // and the call to `toLowerCase().includes(searchTerm)` will return false.
         return (nodeValue?.toString().toLowerCase().includes(searchTerm));
     });

package/src/helpers/selectAll.helper.ts

@@ -4,7 +4,7 @@ import { toggleCheckboxes } from "./toggleCheckbox.helper";
 
 /**
  * Selects all nodes that are currently visible due to the applied filter.
- * 
+ *
  * If there is no search text, then it selects all nodes; otherwise, it selects all visible nodes.
  */
 export function selectAllFiltered(storeId: string) {
@@ -22,7 +22,7 @@ export function selectAllFiltered(storeId: string) {
 
 /**
  * Unselects all nodes that are currently visible due to the applied filter.
- * 
+ *
  * If there is no search text, then it unselects all nodes; otherwise, it unselects all visible nodes.
  */
 export function unselectAllFiltered(storeId: string) {
@@ -40,7 +40,7 @@ export function unselectAllFiltered(storeId: string) {
 
 /**
  * Selects all nodes in the tree.
- * 
+ *
  * This function selects all nodes by adding all node ids to the checked set and clearing the indeterminate set.
  */
 export function selectAll(storeId: string) {
@@ -61,7 +61,7 @@ export function selectAll(storeId: string) {
 
 /**
  * Unselects all nodes in the tree.
- * 
+ *
  * This function unselects all nodes by clearing both the checked and indeterminate sets.
  */
 export function unselectAll(storeId: string) {
@@ -75,16 +75,16 @@ export function unselectAll(storeId: string) {
 
 /**
  * Get the ids of the innermost children in the tree
- * 
+ *
  * @param filteredTreeNodes - The filtered tree data
  * @returns - array of ids of the inner most children only
  */
-export function getInnerMostChildrenIdsInTree(
-    filteredTreeNodes: TreeNode[]
-): string[] {
-    const allLeafIds: string[] = [];
+export function getInnerMostChildrenIdsInTree<ID>(
+    filteredTreeNodes: TreeNode<ID>[]
+): ID[] {
+    const allLeafIds: ID[] = [];
 
-    const getLeafNodes = (_nodes: TreeNode[]) => {
+    const getLeafNodes = (_nodes: TreeNode<ID>[]) => {
         for (let node of _nodes) {
             if (node.children) {
                 getLeafNodes(node.children);
@@ -97,4 +97,4 @@ export function getInnerMostChildrenIdsInTree(
     getLeafNodes(filteredTreeNodes);
 
     return allLeafIds;
-}
+}

package/src/helpers/toggleCheckbox.helper.ts

@@ -7,12 +7,12 @@ import { getTreeViewStore } from "../store/treeView.store";
  * @param {boolean} [forceCheck] - Optional. If provided, will force the check state of the nodes to be this value.
  * If not provided, the check state will be toggled based on the current state.
  */
-export function toggleCheckboxes(
+export function toggleCheckboxes<ID>(
     storeId: string,
-    ids: string[],
+    ids: ID[],
     forceCheck?: boolean
 ) {
-    const treeViewStore = getTreeViewStore(storeId);
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const {
         checked,
         updateChecked,
@@ -32,10 +32,10 @@ export function toggleCheckboxes(
     const tempIndeterminate = new Set(indeterminate);
 
     // Keep track of nodes that have been toggled or affected.
-    const affectedNodes = new Set<string>();
+    const affectedNodes = new Set<ID>();
 
     // Memoization maps for node depths.
-    const nodeDepths = new Map<string, number>();
+    const nodeDepths = new Map<ID, number>();
 
     // Step 1: Toggle the clicked nodes and their children without updating parents yet.
     ids.forEach((id) => {
@@ -66,11 +66,11 @@ export function toggleCheckboxes(
     });
 
     // Step 2: Collect all affected parent nodes.
-    const nodesToUpdate = new Set<string>();
+    const nodesToUpdate = new Set<ID>();
 
     if (toParents) {
         affectedNodes.forEach((id) => {
-            let currentNodeId: string | undefined = id;
+            let currentNodeId: ID | undefined = id;
             while (currentNodeId) {
                 const parentNodeId = childToParentMap.get(currentNodeId);
                 if (parentNodeId) {
@@ -100,7 +100,7 @@ export function toggleCheckboxes(
      * @param rootId - The ID of the root node to start updating from.
      * @param childrenChecked - The desired checked state for children.
      */
-    function updateChildrenIteratively(rootId: string, childrenChecked: boolean) {
+    function updateChildrenIteratively(rootId: ID, childrenChecked: boolean) {
         const stack = [rootId];
 
         while (stack.length > 0) {
@@ -130,13 +130,13 @@ export function toggleCheckboxes(
      * @param nodeId - The ID of the node to get the depth for.
      * @returns The depth of the node.
      */
-    function getNodeDepth(nodeId: string): number {
+    function getNodeDepth(nodeId: ID): number {
         if (nodeDepths.has(nodeId)) {
             return nodeDepths.get(nodeId)!;
         }
 
         let depth = 0;
-        let currentNodeId: string | undefined = nodeId;
+        let currentNodeId: ID | undefined = nodeId;
         while (currentNodeId) {
             const parentNodeId = childToParentMap.get(currentNodeId);
             if (parentNodeId) {
@@ -155,7 +155,7 @@ export function toggleCheckboxes(
      * Function to update the state of a node based on its children's states.
      * @param nodeId - The ID of the node to update.
      */
-    function updateNodeState(nodeId: string) {
+    function updateNodeState(nodeId: ID) {
         const node = nodeMap.get(nodeId);
         if (!node || !node.children || node.children.length === 0) {
             // Leaf nodes are already updated.

package/src/helpers/treeNode.helper.ts

@@ -6,21 +6,21 @@ import {
 /**
  * Initialize the maps for tracking tree nodes and their parent-child relationships.
  *
- * This function is intended to be called once, during component initialization, 
+ * This function is intended to be called once, during component initialization,
  * with the initial tree data and any preselected node IDs.
  *
  * @param initialData - An array of TreeNode objects that represent the initial tree structure.
  * @param preselectedIds - An optional array of TreeNode IDs that should be preselected.
  */
-export function initializeNodeMaps(storeId: string, initialData: TreeNode[]) {
-    const treeViewStore = getTreeViewStore(storeId);
+export function initializeNodeMaps<ID>(storeId: string, initialData: TreeNode<ID>[]) {
+    const treeViewStore = getTreeViewStore<ID>(storeId);
     const {
         updateNodeMap,
         updateChildToParentMap
     } = treeViewStore.getState();
 
-    const tempNodeMap: Map<string, TreeNode> = new Map();
-    const tempChildToParentMap: Map<string, string> = new Map();
+    const tempNodeMap: Map<ID, TreeNode<ID>> = new Map();
+    const tempChildToParentMap: Map<ID, ID> = new Map();
 
     /**
      * Recursively processes nodes, adding them to the nodeMap and childToParentMap.
@@ -29,8 +29,8 @@ export function initializeNodeMaps(storeId: string, initialData: TreeNode[]) {
      * @param parentId - The ID of the parent node, if applicable.
      */
     const processNodes = (
-        nodes: TreeNode[],
-        parentId: string | null = null
+        nodes: TreeNode<ID>[],
+        parentId: ID | null = null
     ) => {
         nodes.forEach((node) => {
             // Each node is added to the nodeMap with its ID as the key
@@ -47,4 +47,4 @@ export function initializeNodeMaps(storeId: string, initialData: TreeNode[]) {
 
     updateNodeMap(tempNodeMap);
     updateChildToParentMap(tempChildToParentMap);
-}
+}

package/src/store/treeView.store.ts

@@ -1,30 +1,30 @@
 import type { SelectionPropagation, TreeNode } from "src/types/treeView.types";
 import { create, StoreApi, UseBoundStore } from 'zustand';
 
-export type TreeViewState = {
+export type TreeViewState<ID> = {
     // Store ids of checked tree nodes
-    checked: Set<string>;
-    updateChecked: (checked: Set<string>) => void;
+    checked: Set<ID>;
+    updateChecked: (checked: Set<ID>) => void;
 
     // Store ids of indeterminate state nodes
-    indeterminate: Set<string>;
-    updateIndeterminate: (indeterminate: Set<string>) => void;
+    indeterminate: Set<ID>;
+    updateIndeterminate: (indeterminate: Set<ID>) => void;
 
     // Store ids of expanded parent nodes
-    expanded: Set<string>;
-    updateExpanded: (expanded: Set<string>) => void;
+    expanded: Set<ID>;
+    updateExpanded: (expanded: Set<ID>) => void;
 
     // Store initial tree view data exactly as passed by the consumer
-    initialTreeViewData: TreeNode[];
-    updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => void;
+    initialTreeViewData: TreeNode<ID>[];
+    updateInitialTreeViewData: (initialTreeViewData: TreeNode<ID>[]) => void;
 
     // Map to store the id to the tree node map
-    nodeMap: Map<string, TreeNode>;
-    updateNodeMap: (nodeMap: Map<string, TreeNode>) => void;
+    nodeMap: Map<ID, TreeNode<ID>>;
+    updateNodeMap: (nodeMap: Map<ID, TreeNode<ID>>) => void;
 
     // Map to store child id to parent id map
-    childToParentMap: Map<string, string>;
-    updateChildToParentMap: (childToParentMap: Map<string, string>) => void;
+    childToParentMap: Map<ID, ID>;
+    updateChildToParentMap: (childToParentMap: Map<ID, ID>) => void;
 
     // Search text state
     searchText: string;
@@ -35,8 +35,8 @@ export type TreeViewState = {
     updateSearchKeys: (searchKeys: string[]) => void;
 
     // To store inner most children ids - required to un/select all filtered-only nodes
-    innerMostChildrenIds: string[];
-    updateInnerMostChildrenIds: (innerMostChildrenIds: string[]) => void;
+    innerMostChildrenIds: ID[];
+    updateInnerMostChildrenIds: (innerMostChildrenIds: ID[]) => void;
 
     selectionPropagation: SelectionPropagation;
     setSelectionPropagation: (
@@ -48,30 +48,32 @@ export type TreeViewState = {
 };
 
 // Map to store individual tree view stores by id
-const treeViewStores = new Map<string, UseBoundStore<StoreApi<TreeViewState>>>();
+const treeViewStores = new Map<string, UseBoundStore<StoreApi<TreeViewState<unknown>>>>();
+// a function that returns a strongly typed version of `treeViewStores`
+const typedStore: <ID>() => Map<string, UseBoundStore<StoreApi<TreeViewState<ID>>>> = <ID>() => treeViewStores as Map<string, UseBoundStore<StoreApi<TreeViewState<ID>>>>;
 
-export function getTreeViewStore(id: string): UseBoundStore<StoreApi<TreeViewState>> {
-    if (!treeViewStores.has(id)) {
-        const store = create<TreeViewState>((set) => ({
+export function getTreeViewStore<ID>(id: string): UseBoundStore<StoreApi<TreeViewState<ID>>> {
+    if (!typedStore<ID>().has(id)) {
+        const store = create<TreeViewState<ID>>((set) => ({
             checked: new Set(),
-            updateChecked: (checked: Set<string>) => set({ checked }),
+            updateChecked: (checked: Set<ID>) => set({ checked }),
 
             indeterminate: new Set(),
-            updateIndeterminate: (indeterminate: Set<string>) => set({ indeterminate }),
+            updateIndeterminate: (indeterminate: Set<ID>) => set({ indeterminate }),
 
-            expanded: new Set<string>(),
-            updateExpanded: (expanded: Set<string>) => set({ expanded }),
+            expanded: new Set<ID>(),
+            updateExpanded: (expanded: Set<ID>) => set({ expanded }),
 
             initialTreeViewData: [],
-            updateInitialTreeViewData: (initialTreeViewData: TreeNode[]) => set({
+            updateInitialTreeViewData: (initialTreeViewData: TreeNode<ID>[]) => set({
                 initialTreeViewData
             }),
 
-            nodeMap: new Map<string, TreeNode>(),
-            updateNodeMap: (nodeMap: Map<string, TreeNode>) => set({ nodeMap }),
+            nodeMap: new Map<ID, TreeNode<ID>>(),
+            updateNodeMap: (nodeMap: Map<ID, TreeNode<ID>>) => set({ nodeMap }),
 
-            childToParentMap: new Map<string, string>(),
-            updateChildToParentMap: (childToParentMap: Map<string, string>) => set({
+            childToParentMap: new Map<ID, ID>(),
+            updateChildToParentMap: (childToParentMap: Map<ID, ID>) => set({
                 childToParentMap
             }),
 
@@ -82,7 +84,7 @@ export function getTreeViewStore(id: string): UseBoundStore<StoreApi<TreeViewSta
             updateSearchKeys: (searchKeys: string[]) => set({ searchKeys }),
 
             innerMostChildrenIds: [],
-            updateInnerMostChildrenIds: (innerMostChildrenIds: string[]) => set({
+            updateInnerMostChildrenIds: (innerMostChildrenIds: ID[]) => set({
                 innerMostChildrenIds
             }),
 
@@ -99,10 +101,10 @@ export function getTreeViewStore(id: string): UseBoundStore<StoreApi<TreeViewSta
                 set({
                     checked: new Set(),
                     indeterminate: new Set(),
-                    expanded: new Set<string>(),
+                    expanded: new Set<ID>(),
                     initialTreeViewData: [],
-                    nodeMap: new Map<string, TreeNode>(),
-                    childToParentMap: new Map<string, string>(),
+                    nodeMap: new Map<ID, TreeNode<ID>>(),
+                    childToParentMap: new Map<ID, ID>(),
                     searchText: "",
                     searchKeys: [""],
                     innerMostChildrenIds: [],
@@ -110,11 +112,11 @@ export function getTreeViewStore(id: string): UseBoundStore<StoreApi<TreeViewSta
                 }),
         }));
 
-        treeViewStores.set(id, store);
+        typedStore<ID>().set(id, store);
     }
-    return treeViewStores.get(id)!;
+    return typedStore<ID>().get(id)!;
 }
 
-export function useTreeViewStore(id: string) {
-    return getTreeViewStore(id);
-}
+export function useTreeViewStore<ID = string>(id: string) {
+    return getTreeViewStore<ID>(id);
+}

package/src/types/treeView.types.ts

@@ -15,14 +15,14 @@ export interface ExpandIconProps {
     isExpanded: boolean;
 }
 
-export interface TreeNode {
-    id: string;
+export interface TreeNode<ID = string> {
+    id: ID;
     name: string;
-    children?: TreeNode[];
+    children?: TreeNode<ID>[];
     [key: string]: any;
 }
 
-export interface __FlattenedTreeNode__ extends TreeNode {
+export interface __FlattenedTreeNode__<ID = string> extends TreeNode<ID> {
     level?: number;
 }
 
@@ -33,8 +33,8 @@ export type TreeFlatListProps<ItemT = any> = Omit<
     | "renderItem"
 >;
 
-export interface NodeRowProps {
-    node: TreeNode;
+export interface NodeRowProps<ID = string> {
+    node: TreeNode<ID>;
     level: number;
 
     checkedValue: CheckboxValueType;
@@ -44,7 +44,7 @@ export interface NodeRowProps {
     onExpand: () => void;
 }
 
-export interface TreeItemCustomizations {
+export interface TreeItemCustomizations<ID> {
     checkBoxViewStyleProps?: BuiltInCheckBoxViewStyleProps;
 
     indentationMultiplier?: number;
@@ -53,29 +53,29 @@ export interface TreeItemCustomizations {
     ExpandCollapseIconComponent?: React.ComponentType<ExpandIconProps>;
     ExpandCollapseTouchableComponent?: React.ComponentType<TouchableOpacityProps>;
 
-    CustomNodeRowComponent?: React.ComponentType<NodeRowProps>;
+    CustomNodeRowComponent?: React.ComponentType<NodeRowProps<ID>>;
 }
 
-export interface NodeProps extends TreeItemCustomizations {
-    node: __FlattenedTreeNode__;
+export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
+    node: __FlattenedTreeNode__<ID>;
     level: number;
     storeId: string;
 }
 
-export interface NodeListProps extends TreeItemCustomizations {
+export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
     treeFlashListProps?: TreeFlatListProps;
     storeId: string;
 }
 
-export interface TreeViewProps extends Omit<NodeListProps, "storeId"> {
-    data: TreeNode[];
+export interface TreeViewProps<ID = string> extends Omit<NodeListProps<ID>, "storeId"> {
+    data: TreeNode<ID>[];
 
-    onCheck?: (checkedIds: string[], indeterminateIds: string[]) => void;
-    onExpand?: (expandedIds: string[]) => void;
+    onCheck?: (checkedIds: ID[], indeterminateIds: ID[]) => void;
+    onExpand?: (expandedIds: ID[]) => void;
 
-    preselectedIds?: string[];
+    preselectedIds?: ID[];
 
-    preExpandedIds?: string[];
+    preExpandedIds?: ID[];
 
     selectionPropagation?: SelectionPropagation;
 }
@@ -103,7 +103,7 @@ export type BuiltInCheckBoxViewProps =
     CheckBoxViewProps
     & BuiltInCheckBoxViewStyleProps;
 
-export interface TreeViewRef {
+export interface TreeViewRef<ID = string> {
     selectAll: () => void;
     unselectAll: () => void;
 
@@ -113,11 +113,11 @@ export interface TreeViewRef {
     expandAll: () => void;
     collapseAll: () => void;
 
-    expandNodes: (ids: string[]) => void;
-    collapseNodes: (ids: string[]) => void;
+    expandNodes: (ids: ID[]) => void;
+    collapseNodes: (ids: ID[]) => void;
 
-    selectNodes: (ids: string[]) => void;
-    unselectNodes: (ids: string[]) => void;
+    selectNodes: (ids: ID[]) => void;
+    unselectNodes: (ids: ID[]) => void;
 
     setSearchText: (searchText: string, searchKeys?: string[]) => void;
 }
@@ -125,4 +125,4 @@ export interface TreeViewRef {
 export interface SelectionPropagation {
     toChildren?: boolean;
     toParents?: boolean;
-}
+}

package/src/utils/typedMemo.ts

@@ -0,0 +1,4 @@
+import React from "react";
+
+/** wrapper for React.memo that works with generic components. */
+export const typedMemo: <T>(c: T) => T = React.memo;