Performance improvements and added many features

android/gradle.properties

@@ -1,4 +1,4 @@
-TreeMultiSelect_kotlinVersion=1.7.0
+TreeMultiSelect_kotlinVersion=1.8.0
 TreeMultiSelect_minSdkVersion=21
 TreeMultiSelect_targetSdkVersion=31
 TreeMultiSelect_compileSdkVersion=31

example/android/app/build.gradle

@@ -53,7 +53,7 @@ react {
 /**
  * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
  */
-def enableProguardInReleaseBuilds = false
+def enableProguardInReleaseBuilds = true
 
 /**
  * The preferred build flavor of JavaScriptCore (JSC)
@@ -106,8 +106,9 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    implementation(platform("org.jetbrains.kotlin:kotlin-bom:1.8.0"))
 
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
+  debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
     debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
         exclude group:'com.squareup.okhttp3', module:'okhttp'
     }

example/android/build.gradle

@@ -7,7 +7,9 @@ buildscript {
         compileSdkVersion = 33
         targetSdkVersion = 33
 
-        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
+        kotlinVersion = "1.8.0"
+
+      // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
         ndkVersion = "23.1.7779620"
     }
     repositories {

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.2-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/ios/Podfile.lock

@@ -487,6 +487,8 @@ PODS:
     - React-jsi (= 0.72.1)
     - React-logger (= 0.72.1)
     - React-perflogger (= 0.72.1)
+  - RNFlashList (1.4.3):
+    - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
   - SocketRocket (0.6.1)
@@ -558,6 +560,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -658,6 +661,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
   Yoga:
@@ -715,6 +720,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 67707a955b9ecc628cc38bdc721fbc498910f0fd
   React-utils: 0a70ea97d4e2749f336b450c082905be1d389435
   ReactCommon: e593d19c9e271a6da4d0bd7f13b28cfeae5d164b
+  RNFlashList: ade81b4e928ebd585dd492014d40fb8d0e848aab
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 65286bb6a07edce5e4fe8c90774da977ae8fc009

example/package.json

@@ -1,14 +1,17 @@
 {
-  "name": "TreeMultiSelectExample",
+  "name": "tree-multi-select-example",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "ios_ip_14": "react-native run-ios --simulator=\"iPhone 14 Pro\"",
     "start": "react-native start",
     "pods": "pod-install --quiet"
   },
   "dependencies": {
+    "@shopify/flash-list": "^1.4.3",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-native": "0.72.1",
     "react-native-vector-icons": "^9.2.0"
@@ -19,6 +22,7 @@
     "@babel/runtime": "^7.20.0",
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.7",
+    "@types/lodash": "^4.14.195",
     "@types/metro-config": "^0.76.3",
     "babel-plugin-module-resolver": "^5.0.0",
     "metro-react-native-babel-preset": "0.76.5"

example/src/App.tsx

@@ -4,54 +4,41 @@ import {
   Button,
   SafeAreaView,
   StyleSheet,
-  TextInput,
   View
 } from 'react-native';
+import { debounce } from "lodash";
 import {
   TreeView,
-  CustomCheckboxView,
-
-  type CustomCheckBoxViewProps,
-  type CheckboxProps,
   type TreeViewRef
 } from 'react-native-tree-multi-select';
-import { sampleData1 } from './sample/sampleData1';
-
-// Example of HOC wrapped Checkbox to react required prop signature
-function withCheckboxProps(
-  Component: React.ComponentType<CustomCheckBoxViewProps>
-): React.ComponentType<CheckboxProps> {
-  return function WrappedComponent(props: CheckboxProps) {
-    const { value, onValueChange, text } = props;
-
-    // transform CheckboxProps to Props
-    const transformedProps: CustomCheckBoxViewProps = {
-      value: value,
-      onValueChange: () => onValueChange(),
-      text: text,
-      // set other Props properties as you need
-    };
-
-    return <Component {...transformedProps} />;
-  };
-}
+import { sampleData3 } from './sample/sampleData3';
+import SearchInput from './components/SearchInput';
 
 export default function App() {
+  const sampleData = React.useRef(sampleData3);
   const treeViewRef = React.useRef<TreeViewRef | null>(null);
-  const [searchText, setSearchText] = React.useState('');
 
-  const handleSelectionChange = (selectedIds: string[]) => {
-    console.debug('Selected ids:', selectedIds);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSetSearchText = React.useCallback(
+    debounce((text) => treeViewRef.current?.setSearchText(text), 300, {
+      leading: true,
+      trailing: true,
+      maxWait: 900
+    }),
+    []
+  );
+
+  const handleSelectionChange = (checkedIds: string[]) => {
+    console.debug('Selected ids:', checkedIds);
+  };
+  const handleExpanded = (expandedIds: string[]) => {
+    console.debug('expanded ids:', expandedIds);
   };
 
   return (
     <SafeAreaView
       style={styles.mainView}>
-      <TextInput
-        style={styles.textInput}
-        value={searchText}
-        onChangeText={setSearchText}
-        placeholder='Search here' />
+      <SearchInput onChange={debouncedSetSearchText} />
       <View
         style={styles.selectionButtonRow}>
         <Button
@@ -65,48 +52,67 @@ export default function App() {
             treeViewRef.current?.unselectAll?.();
           }} />
       </View>
+      <View
+        style={styles.selectionButtonRow}>
+        <Button
+          title='Select Filtered'
+          onPress={() => {
+            treeViewRef.current?.selectAllFiltered?.();
+          }} />
+        <Button
+          title='Unselect Filtered'
+          onPress={() => {
+            treeViewRef.current?.unselectAllFiltered?.();
+          }} />
+      </View>
+
+      <View
+        style={[styles.selectionButtonRow, styles.selectionButtonBottom]}>
+        <Button
+          title='Expand All'
+          onPress={() => {
+            treeViewRef.current?.expandAll?.();
+          }} />
+        <Button
+          title='Collapse All'
+          onPress={() => {
+            treeViewRef.current?.collapseAll?.();
+          }} />
+      </View>
 
       <View
         style={styles.treeViewParent}>
         <TreeView
           ref={treeViewRef}
-          data={sampleData1}
-          onSelectionChange={handleSelectionChange}
-          CheckboxComponent={withCheckboxProps(CustomCheckboxView)}
-          searchText={searchText}
+          data={sampleData.current}
+          onCheck={handleSelectionChange}
+          onExpand={handleExpanded}
         />
       </View>
     </SafeAreaView>
   );
 }
 
-export const styles = StyleSheet.create({
+const styles = StyleSheet.create({
   mainView: {
     flex: 1,
     alignSelf: "flex-start",
     backgroundColor: "white",
   },
   selectionButtonRow: {
     borderTopWidth: 0.5,
-    borderColor: "grey",
-    paddingTop: 5,
+    borderColor: "lightgrey",
+    paddingVertical: 2,
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingHorizontal: 10,
+    marginHorizontal: 10,
   },
-  textInput: {
-    borderRadius: 10,
-    margin: 10,
-    padding: 10,
-    backgroundColor: "#DDD",
-    height: 40,
-    fontSize: 16
+  selectionButtonBottom: {
+    borderBottomWidth: 0.5,
+    borderColor: "lightgrey"
   },
   treeViewParent: {
     flex: 1,
-    minWidth: "100%",
-    borderTopWidth: 0.5,
-    marginTop: 5,
-    borderColor: "grey",
+    minWidth: "100%"
   }
 });

example/src/components/SearchInput.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { TextInput, StyleSheet } from "react-native";
+
+interface Props {
+  onChange: (value: string) => void;
+}
+
+const SearchInput = React.memo(_SearchInput);
+export default SearchInput;
+
+function _SearchInput(props: Props) {
+  const { onChange } = props;
+
+  const handleChange = (value: string) => {
+    onChange(value);
+  };
+
+  return (
+    <TextInput
+      style={styles.textInput}
+      onChangeText={handleChange}
+      placeholder='Search here'
+      placeholderTextColor={"#888"}
+    />
+  );
+}
+
+
+const styles = StyleSheet.create({
+  textInput: {
+    color: "black",
+    borderRadius: 10,
+    margin: 10,
+    padding: 10,
+    backgroundColor: "#EEE",
+    height: 40,
+    fontSize: 16
+  }
+});