### Start Example App Packager

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Start the Metro server for the example application. This is necessary to run the example app on various platforms.

```sh
yarn example start
```

--------------------------------

### Run Example App on Web

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Build and run the example application in a web browser. Ensure the Metro server is running.

```sh
yarn example web
```

--------------------------------

### Basic TreeView Usage Example

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Demonstrates the fundamental setup for the TreeView component, including data binding, event handlers for selection and expansion, and ref usage for programmatic control. Ensure the parent container has a fixed height.

```tsx
import {
  TreeView,
  type TreeNode,
  type TreeViewRef
} from 'react-native-tree-multi-select';

// Refer to the Properties table below or the example app for the TreeNode type
const myData: TreeNode[] = [...];

export function TreeViewUsageExample(){
  const treeViewRef = React.useRef<TreeViewRef | null>(null);
  
  // It's recommended to use debounce for the search function (refer to the example app)
  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"]);
  }
  
  // Callback functions for check and expand state changes:
  const handleSelectionChange = (
      _checkedIds: string[],
      _indeterminateIds: string[]
  ) => {
      // NOTE: Handle _checkedIds and _indeterminateIds here
  };
  const handleExpanded = (expandedIds: string[]) => {
    // NOTE: Do something with updated expandedIds here
  };

  // Expand collapse calls using ref
  const expandAllPress = () => treeViewRef.current?.expandAll?.();
  const collapseAllPress = () => treeViewRef.current?.collapseAll?.();
  const expandNodes = (idsToExpand: string[]) => treeViewRef.current?.expandNodes?.(
    idsToExpand
  );
  const collapseNodes = (idsToCollapse: string[]) => treeViewRef.current?.collapseNodes?.(
    idsToCollapse
  );

  // 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?.();
  const selectNodes = (idsToExpand: string[]) => treeViewRef.current?.selectNodes?.(
    idsToExpand
  );
  const unselectNodes = (idsToCollapse: string[]) => treeViewRef.current?.unselectNodes?.(
    idsToUnselect
  );
  
  return(
    // ... Remember to keep a fixed height for the parent. Read Flash List docs to know why
    <TreeView
      ref={treeViewRef}
      data={myData}
      onCheck={handleSelectionChange}
      onExpand={handleExpanded}
    />
  );
}
```

--------------------------------

### Install react-native-tree-multi-select

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Commands to install the library and its required peer dependencies.

```bash
# Using yarn
yarn add react-native-tree-multi-select

# Using npm
npm install react-native-tree-multi-select

# Required peer dependency
yarn add @shopify/flash-list

# For non-Expo apps, also install:
yarn add react-native-vector-icons
```

--------------------------------

### Run Example App on iOS

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Build and run the example application on an iOS simulator or device. Ensure the Metro server is running.

```sh
yarn example ios
```

--------------------------------

### Install react-native-tree-multi-select

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Commands to install the package using common package managers.

```sh
yarn add react-native-tree-multi-select
```

```sh
npm install react-native-tree-multi-select
```

--------------------------------

### Run Example App on Android

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Build and run the example application on an Android device or emulator. Ensure the Metro server is running.

```sh
yarn example android
```

--------------------------------

### Install and Use Node.js Version

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Ensure Node.js 22.12.0 or higher is installed and active using nvm. This is a prerequisite for the project's development environment.

```sh
nvm install 22.12.0
nvm use 22.12.0
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Install all project dependencies for all packages within the monorepo. This command should be run after setting up Yarn.

```sh
yarn
```

--------------------------------

### Implement Basic TreeView Component

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Example of rendering a hierarchical tree structure with checkboxes and handling selection and expansion events.

```tsx
import React, { useRef, useCallback } from "react";
import { SafeAreaView, View, Button, StyleSheet } from "react-native";
import {
  TreeView,
  type TreeNode,
  type TreeViewRef
} from "react-native-tree-multi-select";
import debounce from "lodash/debounce";

// Define your tree data structure
const treeData: TreeNode[] = [
  {
    id: "1",
    name: "Documents",
    children: [
      {
        id: "1.1",
        name: "Work",
        children: [
          { id: "1.1.1", name: "Reports" },
          { id: "1.1.2", name: "Presentations" }
        ]
      },
      {
        id: "1.2",
        name: "Personal",
        children: [
          { id: "1.2.1", name: "Photos" },
          { id: "1.2.2", name: "Videos" }
        ]
      }
    ]
  },
  {
    id: "2",
    name: "Downloads",
    children: [
      { id: "2.1", name: "Software" },
      { id: "2.2", name: "Music" }
    ]
  }
];

export default function BasicTreeViewExample() {
  const treeViewRef = useRef<TreeViewRef | null>(null);

  // Handle checkbox state changes
  const handleSelectionChange = (
    checkedIds: string[],
    indeterminateIds: string[]
  ) => {
    console.log("Checked nodes:", checkedIds);
    console.log("Indeterminate nodes:", indeterminateIds);
  };

  // Handle expand/collapse state changes
  const handleExpanded = (expandedIds: string[]) => {
    console.log("Expanded nodes:", expandedIds);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.treeContainer}>
        <TreeView
          ref={treeViewRef}
          data={treeData}
          onCheck={handleSelectionChange}
          onExpand={handleExpanded}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  treeContainer: { flex: 1 }
});
```

--------------------------------

### Custom ID Types with Numeric Identifiers

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Utilize generic ID types to support non-string identifiers like numbers for node IDs. This example demonstrates using numeric IDs and interacting with the TreeView via its ref to select and expand nodes.

```tsx
import React, { useRef } from "react";
import { View, Button, StyleSheet } from "react-native";
import { TreeView, type TreeNode, type TreeViewRef } from "react-native-tree-multi-select";

// Define tree with numeric IDs
const treeData: TreeNode<number>[] = [
  {
    id: 1,
    name: "Category 1",
    children: [
      { id: 101, name: "Item 101" },
      { id: 102, name: "Item 102" }
    ]
  },
  {
    id: 2,
    name: "Category 2",
    children: [
      { id: 201, name: "Item 201" },
      { id: 202, name: "Item 202" }
    ]
  }
];

export default function NumericIdExample() {
  // Specify the ID type in the ref
  const treeViewRef = useRef<TreeViewRef<number> | null>(null);

  const handleSelectionChange = (
    checkedIds: number[],
    indeterminateIds: number[]
  ) => {
    console.log("Selected IDs:", checkedIds); // [101, 201]
  };

  const selectSpecificItems = () => {
    treeViewRef.current?.selectNodes([101, 201]);
  };

  const expandCategories = () => {
    treeViewRef.current?.expandNodes([1, 2]);
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonRow}>
        <Button title="Select Items" onPress={selectSpecificItems} />
        <Button title="Expand All" onPress={expandCategories} />
      </View>
      <View style={styles.treeContainer}>
        <TreeView<number>
          ref={treeViewRef}
          data={treeData}
          preselectedIds={[101]}
          preExpandedIds={[1]}
          onCheck={handleSelectionChange}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  buttonRow: { flexDirection: "row", justifyContent: "space-around", padding: 8 },
  treeContainer: { flex: 1 }
});

```

--------------------------------

### Custom Checkbox Component with Emoji Indicators

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Implement a custom checkbox component by passing it to the CheckboxComponent prop of the TreeView. This example uses emojis (✅, 🟡, ⬜) to represent checked, indeterminate, and unchecked states, respectively. Ensure the custom component handles the 'indeterminate' state logic.

```tsx
import React, { memo, useCallback } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ColorValue } from "react-native";
import {
  TreeView,
  type TreeNode,
  type CheckBoxViewProps,
  type CheckboxValueType
} from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "1",
    name: "Option A",
    children: [
      { id: "1.1", name: "Sub-option A1" },
      { id: "1.2", name: "Sub-option A2" }
    ]
  },
  { id: "2", name: "Option B" }
];

// Custom checkbox with emoji indicators
function _CustomCheckboxView(props: CheckBoxViewProps) {
  const { value, onValueChange, text } = props;

  const getColor = useCallback((): ColorValue => {
    if (value === "indeterminate") return "orange";
    return value ? "green" : "gray";
  }, [value]);

  const getEmoji = useCallback(() => {
    if (value === "indeterminate") return "🟡";
    return value ? "✅" : "⬜";
  }, [value]);

  const handlePress = () => {
    if (value === "indeterminate") {
      onValueChange(true);
    } else {
      onValueChange(!value);
    }
  };

  return (
    <TouchableOpacity style={styles.checkboxContainer} onPress={handlePress}>
      <Text style={[styles.emoji, { borderColor: getColor() }]}>
        {getEmoji()}
      </Text>
      <Text style={styles.label}>{text}</Text>
    </TouchableOpacity>
  );
}

// Memoize for performance
const CustomCheckboxView = memo(_CustomCheckboxView, (prev, next)
  =>
  prev.value === next.value && prev.text === next.text
);

export default function CustomCheckboxExample() {
  return (
    <View style={styles.container}>
      <TreeView
        data={treeData}
        CheckboxComponent={CustomCheckboxView}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  checkboxContainer: {
    flexDirection: "row",
    alignItems: "center",
    padding: 8
  },
  emoji: {
    fontSize: 20,
    marginRight: 8,
    borderWidth: 2,
    borderRadius: 4,
    padding: 2
  },
  label: {
    fontSize: 16,
    color: "#333"
  }
});

```

--------------------------------

### Custom Row Rendering with CustomNodeRowComponent

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Use CustomNodeRowComponent to override default styling and component props for complete control over how each row is rendered. This example shows how to customize checkboxes, icons, and expand/collapse buttons.

```tsx
import React, { memo } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { TreeView, type TreeNode, type NodeRowProps } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "folder-1",
    name: "Documents",
    children: [
      { id: "file-1", name: "Report.pdf" },
      { id: "file-2", name: "Presentation.pptx" }
    ]
  },
  {
    id: "folder-2",
    name: "Images",
    children: [
      { id: "img-1", name: "Photo.jpg" },
      { id: "img-2", name: "Screenshot.png" }
    ]
  }
];

function _CustomNodeRow(props: NodeRowProps<string>) {
  const { node, level, checkedValue, isExpanded, onCheck, onExpand } = props;
  const hasChildren = node.children && node.children.length > 0;

  // Calculate background based on selection state
  const backgroundColor =
    checkedValue === true ? "#e3f2fd" :
    checkedValue === "indeterminate" ? "#fff3e0" : "#ffffff";

  return (
    <View style={[styles.row, { backgroundColor, marginLeft: level * 24 }]}>
      {/* Checkbox area */}
      <TouchableOpacity style={styles.checkArea} onPress={onCheck}>
        <Text style={styles.checkbox}>
          {checkedValue === true ? "☑️" :
           checkedValue === "indeterminate" ? "➖" : "⬜"}
        </Text>
      </TouchableOpacity>

      {/* Node name */}
      <TouchableOpacity style={styles.nameArea} onPress={onCheck}>
        <Text style={styles.icon}>{hasChildren ? "📁" : "📄"}</Text>
        <Text style={styles.name}>{node.name}</Text>
      </TouchableOpacity>

      {/* Expand/collapse button */}
      {hasChildren && (
        <TouchableOpacity style={styles.expandArea} onPress={onExpand}>
          <Text style={styles.expandIcon}>
            {isExpanded ? "🔽" : "▶️"}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const CustomNodeRow = memo(_CustomNodeRow);

export default function CustomRowExample() {
  return (
    <View style={styles.container}>
      <TreeView
        data={treeData}
        CustomNodeRowComponent={CustomNodeRow}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderBottomWidth: 1,
    borderBottomColor: "#eee"
  },
  checkArea: { marginRight: 8 },
  checkbox: { fontSize: 18 },
  nameArea: { flex: 1, flexDirection: "row", alignItems: "center" },
  icon: { fontSize: 16, marginRight: 8 },
  name: { fontSize: 14, color: "#333" },
  expandArea: { padding: 4 },
  expandIcon: { fontSize: 14 }
});

```

--------------------------------

### Enable and Activate Yarn Version

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Enable Corepack and activate Yarn 4.9.2. This ensures the correct version of Yarn is used for managing the monorepo.

```sh
corepack enable
corepack prepare yarn@4.9.2 --activate
```

--------------------------------

### Run Unit Tests

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Execute all unit tests defined in the project using Jest. This command is part of the pre-commit hooks and should pass before committing.

```sh
yarn test
```

--------------------------------

### Using TreeViewRef for Programmatic Control

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Demonstrates how to attach a ref to the TreeView component and invoke methods for selection, expansion, and mapping retrieval.

```tsx
import React, { useRef } from "react";
import { View, Button, StyleSheet } from "react-native";
import { TreeView, type TreeViewRef, type TreeNode } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "root",
    name: "Root",
    children: [
      { id: "child-1", name: "Child 1" },
      { id: "child-2", name: "Child 2" },
      { id: "child-3", name: "Child 3" }
    ]
  }
];

export default function RefMethodsExample() {
  const treeViewRef = useRef<TreeViewRef | null>(null);

  // Selection methods
  const selectAll = () => treeViewRef.current?.selectAll();
  const unselectAll = () => treeViewRef.current?.unselectAll();
  const selectFiltered = () => treeViewRef.current?.selectAllFiltered();
  const unselectFiltered = () => treeViewRef.current?.unselectAllFiltered();

  // Select/unselect specific nodes
  const selectSpecificNodes = () => {
    treeViewRef.current?.selectNodes(["child-1", "child-2"]);
  };
  const unselectSpecificNodes = () => {
    treeViewRef.current?.unselectNodes(["child-1"]);
  };

  // Expand/collapse methods
  const expandAll = () => treeViewRef.current?.expandAll();
  const collapseAll = () => treeViewRef.current?.collapseAll();

  // Expand/collapse specific nodes
  const expandSpecificNodes = () => {
    treeViewRef.current?.expandNodes(["root"]);
  };
  const collapseSpecificNodes = () => {
    treeViewRef.current?.collapseNodes(["root"]);
  };

  // Get child to parent mapping
  const printParentMap = () => {
    const childToParentMap = treeViewRef.current?.getChildToParentMap();
    console.log("Child to parent map:", childToParentMap);
    // Output: Map { "child-1" => "root", "child-2" => "root", "child-3" => "root" }
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonRow}>
        <Button title="Select All" onPress={selectAll} />
        <Button title="Unselect All" onPress={unselectAll} />
      </View>
      <View style={styles.buttonRow}>
        <Button title="Expand All" onPress={expandAll} />
        <Button title="Collapse All" onPress={collapseAll} />
      </View>
      <View style={styles.buttonRow}>
        <Button title="Select Specific" onPress={selectSpecificNodes} />
        <Button title="Expand Root" onPress={expandSpecificNodes} />
      </View>
      <View style={styles.treeContainer}>
        <TreeView ref={treeViewRef} data={treeData} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  buttonRow: { flexDirection: "row", justifyContent: "space-around", padding: 8 },
  treeContainer: { flex: 1 }
});
```

--------------------------------

### Configure Initial State with preselectedIds and preExpandedIds

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Use preselectedIds to pre-check nodes and preExpandedIds to pre-expand branches when the tree view is first rendered. Ensure the IDs provided match the 'id' property of your tree nodes.

```tsx
import React from "react";
import { View, StyleSheet } from "react-native";
import { TreeView, type TreeNode } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "folder-1",
    name: "Folder 1",
    children: [
      { id: "file-1a", name: "File 1A" },
      { id: "file-1b", name: "File 1B" }
    ]
  },
  {
    id: "folder-2",
    name: "Folder 2",
    children: [
      { id: "file-2a", name: "File 2A" },
      { id: "file-2b", name: "File 2B" }
    ]
  }
];

export default function PreselectedExample() {
  const handleSelectionChange = (checkedIds: string[]) => {
    console.log("Selected:", checkedIds);
    // Initial output: ["file-1a", "file-2a"]
  };

  return (
    <View style={styles.container}>
      <TreeView
        data={treeData}
        preselectedIds={["file-1a", "file-2a"]}
        preExpandedIds={["folder-1", "folder-2"]}
        onCheck={handleSelectionChange}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 }
});
```

--------------------------------

### Typecheck Project Files

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Verify that all TypeScript files in the project adhere to type definitions. This command is part of the pre-commit hooks.

```sh
yarn typecheck
```

--------------------------------

### Publish New Versions to npm

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Publish new versions of the package to npm using release-it. This script handles version bumping, tagging, and release creation.

```sh
yarn release
```

--------------------------------

### Lint Project Files

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Check for code style and potential errors using ESLint. This command is part of the pre-commit hooks.

```sh
yarn lint
```

--------------------------------

### Configure FlashList Props for Performance

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Pass props directly to the underlying FlashList component for fine-tuned list behavior and performance optimization. Use this for large datasets to improve scroll performance.

```tsx
import React from "react";
import { View, StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { TreeView, type TreeNode } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "1",
    name: "Large Dataset",
    children: Array.from({ length: 100 }, (_, i) => ({
      id: `item-${i}`,
      name: `Item ${i}`
    }))
  }
];

export default function FlashListPropsExample() {
  return (
    <View style={styles.container}>
      <TreeView
        data={treeData}
        treeFlashListProps={{
          // Performance tuning
          estimatedItemSize: 50,

          // List behavior
          showsVerticalScrollIndicator: true,
          bounces: true,

          // For nested scroll views, use gesture handler's ScrollView
          renderScrollComponent: ScrollView,

          // Content container styling
          contentContainerStyle: { paddingBottom: 20 },

          // Callbacks
          onEndReached: () => console.log("End of list reached"),
          onEndReachedThreshold: 0.5
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 }
});
```

--------------------------------

### Control Selection Propagation with selectionPropagation

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

The selectionPropagation prop controls how selecting a node affects its children and parent nodes. Configure 'toChildren' and 'toParents' to manage this behavior.

```tsx
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { TreeView, type TreeNode, type SelectionPropagation } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "parent",
    name: "Parent Node",
    children: [
      { id: "child-1", name: "Child 1" },
      { id: "child-2", name: "Child 2" },
      { id: "child-3", name: "Child 3" }
    ]
  }
];

// Default behavior: selection propagates both ways
function DefaultPropagation() {
  return (
    <TreeView
      data={treeData}
      selectionPropagation={{ toChildren: true, toParents: true }}
    />
  );
}

// Only propagate to children (selecting parent selects all children)
function OnlyToChildrenPropagation() {
  return (
    <TreeView
      data={treeData}
      selectionPropagation={{ toChildren: true, toParents: false }}
    />
  );
}

// Only propagate to parents (selecting all children checks parent)
function OnlyToParentsPropagation() {
  return (
    <TreeView
      data={treeData}
      selectionPropagation={{ toChildren: false, toParents: true }}
    />
  );
}

// No propagation (independent selection, useful for radio-button-like behavior)
function NoPropagation() {
  return (
    <TreeView
      data={treeData}
      selectionPropagation={{ toChildren: false, toParents: false }}
    />
  );
}

export default function SelectionPropagationExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>No Propagation Mode</Text>
      <View style={styles.treeContainer}>
        <NoPropagation />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  title: { fontSize: 16, fontWeight: "bold", padding: 10 },
  treeContainer: { flex: 1 }
});
```

--------------------------------

### SelectionPropagation Interface

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Configures how selection changes propagate through the tree structure.

```APIDOC
## SelectionPropagation Interface

### Description
Defines the behavior for propagating selection changes to parent and child nodes.

### Properties

- **`toChildren`** (boolean) - Optional - Whether selection should propagate to child nodes. Defaults to `true`.
- **`toParents`** (boolean) - Optional - Whether selection should propagate to parent nodes. Defaults to `true`.
```

--------------------------------

### Configure Yarn for Monorepo

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Set up Yarn 4.9.2 for the monorepo by configuring the node linker and hoisting limits. This command generates the .yarnrc.yml file.

```sh
yarn set version 4.9.2
yarn config set nodeLinker node-modules
yarn config set nmHoistingLimits workspaces
```

--------------------------------

### Implement Search and Filter Nodes

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Use the setSearchText ref method to filter tree nodes based on user input. Debouncing is recommended for performance. This method can search on default fields or specified ones.

```tsx
import React, { useRef, useCallback } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import { TreeView, type TreeViewRef, type TreeNode } from "react-native-tree-multi-select";
import debounce from "lodash/debounce";

const treeData: TreeNode[] = [
  {
    id: "1",
    name: "Fruits",
    category: "food",
    children: [
      { id: "1.1", name: "Apple", category: "red-fruit" },
      { id: "1.2", name: "Banana", category: "yellow-fruit" },
      { id: "1.3", name: "Orange", category: "citrus" }
    ]
  },
  {
    id: "2",
    name: "Vegetables",
    category: "food",
    children: [
      { id: "2.1", name: "Carrot", category: "root" },
      { id: "2.2", name: "Broccoli", category: "green" }
    ]
  }
];

export default function SearchExample() {
  const treeViewRef = useRef<TreeViewRef | null>(null);

  // Debounced search for better performance
  const debouncedSearch = useCallback(
    debounce((text: string) => {
      // Search on "name" field by default
      treeViewRef.current?.setSearchText(text);
    }, 375, {
      leading: true,
      trailing: true,
      maxWait: 750
    }),
    []
  );

  // Search on multiple fields
  const searchOnMultipleFields = (text: string) => {
    // Search on both "name" and "category" fields
    treeViewRef.current?.setSearchText(text, ["name", "category"]);
  };

  // Clear search
  const clearSearch = () => {
    treeViewRef.current?.setSearchText("");
  };

  // Select only filtered (visible) nodes
  const selectFilteredNodes = () => {
    treeViewRef.current?.selectAllFiltered();
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.searchInput}
        placeholder="Search nodes..."
        onChangeText={debouncedSearch}
      />
      <View style={styles.buttonRow}>
        <Button title="Clear Search" onPress={clearSearch} />
        <Button title="Select Filtered" onPress={selectFilteredNodes} />
      </View>
      <View style={styles.treeContainer}>
        <TreeView ref={treeViewRef} data={treeData} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  searchInput: {
    height: 40,
    borderWidth: 1,
    borderColor: "#ccc",
    margin: 10,
    paddingHorizontal: 10
  },
  buttonRow: { flexDirection: "row", justifyContent: "space-around", padding: 8 },
  treeContainer: { flex: 1 }
});

```

--------------------------------

### TreeViewRef - Programmatic Control Methods

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

The TreeViewRef provides methods to programmatically control selection, expansion, and search functionality. Access these methods via a ref attached to the TreeView component.

```APIDOC
## TreeViewRef - Programmatic Control Methods

The `TreeViewRef` provides methods to programmatically control selection, expansion, and search functionality. Access these methods via a ref attached to the `TreeView` component.

### Methods

#### Selection Methods

- **`selectAll()`**: Selects all nodes in the tree.
- **`unselectAll()`**: Deselects all nodes in the tree.
- **`selectAllFiltered()`**: Selects all currently filtered nodes.
- **`unselectAllFiltered()`**: Deselects all currently filtered nodes.
- **`selectNodes(nodeIds: string[])`**: Selects a specific list of nodes by their IDs.
- **`unselectNodes(nodeIds: string[])`**: Deselects a specific list of nodes by their IDs.

#### Expansion Methods

- **`expandAll()`**: Expands all nodes in the tree.
- **`collapseAll()`**: Collapses all nodes in the tree.
- **`expandNodes(nodeIds: string[])`**: Expands a specific list of nodes by their IDs.
- **`collapseNodes(nodeIds: string[])`**: Collapses a specific list of nodes by their IDs.

#### Mapping Methods

- **`getChildToParentMap(): Map<string, string>`**: Returns a map where keys are child node IDs and values are their parent node IDs.
```

--------------------------------

### TreeViewRef Methods

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

The TreeViewRef interface provides methods to programmatically interact with the tree view component, such as selecting nodes, expanding/collapsing, and searching.

```APIDOC
## TreeViewRef Methods

### Description
Methods available on the `TreeViewRef` for programmatic control of the tree view.

### Methods

- **`selectAll()`**: Selects all nodes in the tree.
- **`unselectAll()`**: Unselects all nodes in the tree.
- **`selectAllFiltered()`**: Selects all currently filtered nodes.
- **`unselectAllFiltered()`**: Unselects all currently filtered nodes.
- **`expandAll()`**: Expands all nodes in the tree.
- **`collapseAll()`**: Collapses all nodes in the tree.
- **`expandNodes(ids: ID[])`**: Expands the nodes specified by their IDs.
- **`collapseNodes(ids: ID[])`**: Collapses the nodes specified by their IDs.
- **`selectNodes(ids: ID[])`**: Selects the nodes specified by their IDs.
- **`unSelectNodes(ids: ID[])`**: Unselects the nodes specified by their IDs.
- **`setSearchText(searchText: string, searchKeys?: string[])`**: Sets the search text and optionally the keys to search within. Defaults to searching the 'name' key.
- **`scrollToNodeID(params: ScrollToNodeParams<ID>)`**: Scrolls the tree view to the node with the specified ID.
- **`getChildToParentMap()`**: Returns a map of child node IDs to their parent node IDs.
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/CONTRIBUTING.md

Automatically fix code formatting and linting errors according to ESLint and Prettier configurations. This command can be run before committing.

```sh
yarn lint --fix
```

--------------------------------

### ExpandIconProps

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Properties for the expand icon component.

```APIDOC
## ExpandIconProps

### Parameters
#### Request Body
- **isExpanded** (boolean) - Required - Indicates if the icon is expanded
```

--------------------------------

### Render Multiple TreeView Instances

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Use `useRef` to manage multiple TreeView instances independently. Each instance can have its own data and event handlers.

```tsx
import React, { useRef } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { TreeView, type TreeViewRef, type TreeNode } from "react-native-tree-multi-select";

const categoriesData: TreeNode[] = [
  {
    id: "cat-1",
    name: "Electronics",
    children: [
      { id: "cat-1-1", name: "Phones" },
      { id: "cat-1-2", name: "Laptops" }
    ]
  }
];

const tagsData: TreeNode[] = [
  {
    id: "tag-1",
    name: "Priority",
    children: [
      { id: "tag-1-1", name: "High" },
      { id: "tag-1-2", name: "Medium" },
      { id: "tag-1-3", name: "Low" }
    ]
  }
];

export default function MultipleTreeViewsExample() {
  const categoriesRef = useRef<TreeViewRef | null>(null);
  const tagsRef = useRef<TreeViewRef | null>(null);

  const handleCategoriesChange = (checkedIds: string[]) => {
    console.log("Categories selected:", checkedIds);
  };

  const handleTagsChange = (checkedIds: string[]) => {
    console.log("Tags selected:", checkedIds);
  };

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Text style={styles.title}>Categories</Text>
        <Button
          title="Expand All Categories"
          onPress={() => categoriesRef.current?.expandAll()}
        />
        <View style={styles.treeContainer}>
          <TreeView
            ref={categoriesRef}
            data={categoriesData}
            onCheck={handleCategoriesChange}
          />
        </View>
      </View>

      <View style={styles.section}>
        <Text style={styles.title}>Tags</Text>
        <Button
          title="Select All Tags"
          onPress={() => tagsRef.current?.selectAll()}
        />
        <View style={styles.treeContainer}>
          <TreeView
            ref={tagsRef}
            data={tagsData}
            onCheck={handleTagsChange}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  section: { flex: 1, padding: 10 },
  title: { fontSize: 18, fontWeight: "bold", marginBottom: 8 },
  treeContainer: { flex: 1, borderWidth: 1, borderColor: "#ddd", borderRadius: 8 }
});

```

--------------------------------

### TreeViewProps

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Defines the configuration properties for the TreeView component, including data, callbacks, and styling options.

```APIDOC
## TreeViewProps

### Description
The `TreeViewProps` interface defines the properties for the tree view component.

### Parameters
#### Properties
- **data** (TreeNode<ID>[]) - Required - An array of TreeNode objects
- **onCheck** ((checkedIds: ID[], indeterminateIds: ID[]) => void) - Optional - Callback when a checkbox state changes
- **onExpand** ((expandedIds: ID[]) => void) - Optional - Callback when a node is expanded
- **preselectedIds** (ID[]) - Optional - An array of ids that should be pre-selected
- **preExpandedIds** (ID[]) - Optional - An array of ids that should be pre-expanded
- **selectionPropagation** (SelectionPropagation) - Optional - Control Selection Propagation Behavior
- **initialScrollNodeID** (ID) - Optional - Set node ID to scroll to initially on tree view render
- **indentationMultiplier** (number) - Optional - Indentation (marginStart) per level (defaults to 15)
- **treeFlashListProps** (TreeFlatListProps) - Optional - Props for the flash list
- **checkBoxViewStyleProps** (BuiltInCheckBoxViewStyleProps) - Optional - Props for the checkbox view
- **CheckboxComponent** (ComponentType<CheckBoxViewProps>) - Optional - A custom checkbox component
- **ExpandCollapseIconComponent** (ComponentType<ExpandIconProps>) - Optional - A custom expand/collapse icon component
- **ExpandCollapseTouchableComponent** (ComponentType<TouchableOpacityProps>) - Optional - A custom expand/collapse touchable component
- **CustomNodeRowComponent** (React.ComponentType<NodeRowProps<ID>>) - Optional - Custom row item component
```

--------------------------------

### setSearchText - Search and Filter Nodes

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Filters the tree view based on a search string and optional fields, automatically expanding nodes to show matches.

```APIDOC
## setSearchText

### Description
Filters the tree view based on the provided search text. It automatically expands nodes to reveal matching results.

### Parameters
- **text** (string) - Required - The search string to filter nodes.
- **fields** (string[]) - Optional - An array of node property names to search against (e.g., ["name", "category"]). Defaults to ["name"].
```

--------------------------------

### CheckBoxViewProps

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Properties for the checkbox view component.

```APIDOC
## CheckBoxViewProps

### Parameters
#### Request Body
- **value** (CheckboxValueType) - Required - The current value of the checkbox
- **onValueChange** ((value: boolean) => void) - Required - Function to be called when the checkbox is pressed
- **text** (string) - Required - The display text besides the checkbox
```

--------------------------------

### NodeRowProps

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Properties for rendering a node row in the tree.

```APIDOC
## NodeRowProps

### Parameters
#### Request Body
- **node** (TreeNode) - Required - The node to be rendered
- **level** (number) - Required - The depth of the node in the tree
- **checkedValue** (CheckboxValueType) - Required - The current value of the checkbox
- **isExpanded** (boolean) - Required - Whether the node is expanded or not
- **onCheck** (() => void) - Required - Function to be called when the checkbox is pressed
- **onExpand** (() => void) - Required - Function to be called when the expand button is pressed
```

--------------------------------

### TreeNode

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Defines the structure of individual items within the tree view.

```APIDOC
## TreeNode

### Description
The `TreeNode` interface defines the properties for individual item of the tree view.

### Parameters
#### Properties
- **id** (ID) - Required - Unique identifier for the node
- **name** (string) - Required - The display name of the node
- **children** (TreeNode<ID>[]) - Optional - An array of child TreeNode objects
- **[key: string]** (any) - Optional - Any additional properties for the node
```

--------------------------------

### BuiltInCheckBoxViewStyleProps Interface

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Allows customization of the default checkbox component's styling within the tree view.

```APIDOC
## BuiltInCheckBoxViewStyleProps Interface

### Description
Customization options for the default checkbox component used in the tree view. These styles are overridden if a `CustomNodeRowComponent` is provided.

### Properties

- **`outermostParentViewStyle`** (StyleProp<ViewStyle>) - Optional - Style for the outermost parent view of the checkbox.
- **`checkboxParentViewStyle`** (StyleProp<ViewStyle>) - Optional - Style for the parent view containing the checkbox.
- **`textTouchableStyle`** (StyleProp<ViewStyle>) - Optional - Style for the touchable area around the text.
- **`checkboxProps`** (CheckboxProps) - Optional - Props to be passed directly to the underlying checkbox component.
- **`textProps`** (TextProps) - Optional - Props to be passed directly to the text component displaying the node label.
```

--------------------------------

### Style Built-in Checkboxes with checkBoxViewStyleProps

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Customize the appearance of the built-in checkbox component using checkBoxViewStyleProps without creating a custom component. This allows for direct styling of various checkbox elements.

```tsx
import React from "react";
import { View, StyleSheet } from "react-native";
import { TreeView, type TreeNode } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "1",
    name: "Styled Node 1",
    children: [
      { id: "1.1", name: "Child 1" },
      { id: "1.2", name: "Child 2" }
    ]
  },
  { id: "2", name: "Styled Node 2" }
];

export default function CheckboxStylingExample() {
  return (
    <View style={styles.container}>
      <TreeView
        data={treeData}
        indentationMultiplier={20}  // Increase indent per level (default: 15)
        checkBoxViewStyleProps={{
          // Style the outer container
          outermostParentViewStyle: {
            backgroundColor: "#f5f5f5",
            borderRadius: 8,
            marginVertical: 2,
            paddingVertical: 4
          },
          // Style the checkbox wrapper
          checkboxParentViewStyle: {
            marginStart: 10,
            transform: [{ scale: 1.0 }]
          },
          // Style the text touchable area
          textTouchableStyle: {
            flex: 1,
            paddingVertical: 8
          },
          // Checkbox component props
          checkboxProps: {
            color: "#2196F3",
            uncheckedColor: "#9E9E9E"
          },
          // Text component props
          textProps: {
            style: {
              fontSize: 16,
              color: "#333",
              fontWeight: "500"
            },
            numberOfLines: 2,
            ellipsizeMode: "tail"
          }
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 10 }
});
```

--------------------------------

### ScrollToNodeParams Interface

Source: https://github.com/jairajjangle/react-native-tree-multi-select/blob/main/README.md

Defines the parameters for the `scrollToNodeID` method, allowing fine-grained control over scrolling behavior.

```APIDOC
## ScrollToNodeParams Interface

### Description
Parameters for controlling the scrolling behavior when navigating to a specific node.

### Parameters

- **`nodeId`** (ID) - Required - The ID of the node to scroll to.
- **`expandScrolledNode`** (boolean) - Optional - Whether to expand the scrolled node to reveal its children. Defaults to `false`.
- **`animated`** (boolean) - Optional - Controls whether the scrolling animation is enabled.
- **`viewOffset`** (number) - Optional - A fixed pixel offset for the scrolled node's position.
- **`viewPosition`** (number) - Optional - Determines the vertical position of the scrolled node within the view (0: top, 1: bottom, 0.5: center).
```

--------------------------------

### Programmatically Scroll to Node

Source: https://context7.com/jairajjangle/react-native-tree-multi-select/llms.txt

Use the scrollToNodeID ref method to scroll the tree view to a specific node. Options include animation, positioning, and automatic expansion of the target node. An initial scroll can be set with initialScrollNodeID.

```tsx
import React, { useRef } from "react";
import { View, Button, StyleSheet } from "react-native";
import { TreeView, type TreeViewRef, type TreeNode } from "react-native-tree-multi-select";

const treeData: TreeNode[] = [
  {
    id: "section-1",
    name: "Section 1",
    children: Array.from({ length: 20 }, (_, i) => ({
      id: `item-1-${i}`,
      name: `Item 1.${i}`
    }))
  },
  {
    id: "section-2",
    name: "Section 2",
    children: Array.from({ length: 20 }, (_, i) => ({
      id: `item-2-${i}`,
      name: `Item 2.${i}`
    }))
  }
];

export default function ScrollToNodeExample() {
  const treeViewRef = useRef<TreeViewRef | null>(null);

  // Basic scroll to node
  const scrollToItem = () => {
    treeViewRef.current?.scrollToNodeID({
      nodeId: "item-2-15",
      animated: true
    });
  };

  // Scroll and expand the target node to show its children
  const scrollAndExpand = () => {
    treeViewRef.current?.scrollToNodeID({
      nodeId: "section-2",
      animated: true,
      expandScrolledNode: true
    });
  };

  // Scroll with custom positioning
  const scrollWithPosition = () => {
    treeViewRef.current?.scrollToNodeID({
      nodeId: "item-1-10",
      animated: true,
      viewPosition: 0.5,  // 0=top, 0.5=center, 1=bottom
      viewOffset: 20      // Additional offset in pixels
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonRow}>
        <Button title="Scroll to Item 2.15" onPress={scrollToItem} />
        <Button title="Scroll & Expand" onPress={scrollAndExpand} />
      </View>
      <Button title="Scroll to Center" onPress={scrollWithPosition} />
      <View style={styles.treeContainer}>
        <TreeView
          ref={treeViewRef}
          data={treeData}
          initialScrollNodeID="item-1-5"  // Scroll to this node on initial render
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  buttonRow: { flexDirection: "row", justifyContent: "space-around", padding: 8 },
  treeContainer: { flex: 1 }
});

```