Tree Components Adapted for React Native

[Imaginativeone]

Perhaps you could create a tree for React Native. Something like this:

// ReactNativeTreeComponent.js
import React, { useState, useRef } from 'react';
import { TreeNode } from './Tree';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet
} from 'react-native';

export default function TreeNodeComponent({
  model,
  defaultLeafNodeName = 'Leaf Node',
  defaultTreeNodeName = 'Tree Node',
  defaultAddTreeNodeTitle = 'Add Tree Node',
  defaultAddLeafNodeTitle = 'Add Leaf Node',
  defaultExpanded = true,
  onChangeName,
  onDelete,
  onAdd,
  onClick,
}) {
  const [expanded, setExpanded] = useState(defaultExpanded);
  const [editable, setEditable] = useState(false);

  const nodeInputRef = useRef(null);

  const isFolder = Array.isArray(model.children) && model.children.length > 0;

  const handleUpdateName = (text) => {
    const oldName = model.name;
    model.changeName(text);
    if (onChangeName) onChangeName({ id: model.id, oldName, newName: text, node: model });
  };

  const handleSetUneditable = () => {
    setEditable(false);
    const oldName = model.name;
    if (onChangeName) {
      onChangeName({ id: model.id, oldName, newName: model.name, eventType: 'blur' });
    }
  };

  const handleAddChild = (isLeaf) => {
    const name = isLeaf ? defaultLeafNodeName : defaultTreeNodeName;
    const newNode = new TreeNode({ name, isLeaf });
    model.addChildren(newNode);
    setExpanded(true);
    if (onAdd) onAdd(newNode);
  };

  return (
    <View style={styles.container}>
      {model.name !== 'root' && (
        <View style={styles.nodeContainer}>
          <TouchableOpacity
            style={styles.nodeMain}
            onPress={() => {
              if (onClick) onClick({ toggle: () => setExpanded((prev) => !prev), ...model });
            }}
          >
            {isFolder && (
              <Text style={styles.caret}>{expanded ? '▼' : '▶'}</Text>
            )}
            <Text style={styles.icon}>{model.isLeaf ? '📄' : '📁'}</Text>
            {!editable ? (
              <Text style={styles.nodeContent}>{model.name}</Text>
            ) : (
              <TextInput
                ref={nodeInputRef}
                style={styles.input}
                defaultValue={model.name}
                onBlur={handleSetUneditable}
                onChangeText={handleUpdateName}
                autoFocus
              />
            )}
          </TouchableOpacity>

          <View style={styles.operations}>
            {!model.isLeaf && !model.addTreeNodeDisabled && (
              <TouchableOpacity onPress={() => handleAddChild(false)}>
                <Text title={defaultAddTreeNodeTitle}>➕📁</Text>
              </TouchableOpacity>
            )}
            {!model.isLeaf && !model.addLeafNodeDisabled && (
              <TouchableOpacity onPress={() => handleAddChild(true)}>
                <Text title={defaultAddLeafNodeTitle}>➕📄</Text>
              </TouchableOpacity>
            )}
            {!model.editNodeDisabled && (
              <TouchableOpacity onPress={() => setEditable(true)}>
                <Text>✏️</Text>
              </TouchableOpacity>
            )}
            {!model.delNodeDisabled && (
              <TouchableOpacity onPress={() => onDelete && onDelete(model)}>
                <Text>🗑️</Text>
              </TouchableOpacity>
            )}
          </View>
        </View>
      )}

      {isFolder && expanded && (
        <View style={styles.childrenContainer}>
          {model.children.map((child) => (
            <TreeNodeComponent
              key={child.id}
              model={child}
              defaultLeafNodeName={defaultLeafNodeName}
              defaultTreeNodeName={defaultTreeNodeName}
              defaultAddTreeNodeTitle={defaultAddTreeNodeTitle}
              defaultAddLeafNodeTitle={defaultAddLeafNodeTitle}
              defaultExpanded={defaultExpanded}
              onChangeName={onChangeName}
              onDelete={onDelete}
              onAdd={onAdd}
              onClick={onClick}
            />
          ))}
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingLeft: 10,
  },
  nodeContainer: {
    marginVertical: 4,
  },
  nodeMain: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  caret: {
    marginRight: 5,
  },
  icon: {
    marginRight: 5,
  },
  nodeContent: {
    fontSize: 16,
  },
  input: {
    fontSize: 16,
    borderBottomWidth: 1,
    borderColor: '#000',
    minWidth: 100,
  },
  operations: {
    flexDirection: 'row',
    marginTop: 4,
    gap: 8,
  },
  childrenContainer: {
    paddingLeft: 20,
  },
});

[divyanshudhruv]

Looks nice