Expand particular node in treeview

[SelvaraniAlagumuthu]

Hi, I am using this tree-view its working fine. Here i need particular node only expand in this tree. How can achieve this using this library?.

[SelvaraniAlagumuthu]

Hi, Could you please provide the example of isNodeExpanded . How to use this in Treeview?..

[vijayamadhavi3187]

Hi, I am using this tree-view its working fine. Here i need particular node only expand in this tree. How can achieve this using this library?.

[tylern206]

I am having the same problem. Is there a solution to set the expanded state of a node base on its id?

[cc-bojan]

Hi, Could you please provide the example of isNodeExpanded . How to use this in Treeview?..

Hi @SelvaraniAlagumuthu, You could use it like this:

import React, { useState } from 'react';
import { ScrollView, Text, View } from 'react-native';
import TreeView from 'react-native-final-tree-view';

const family = [
  {
    id: 1,
    name: 'Grandpa',
    age: 78,
    children: [
      {
        id: 2,
        name: 'Me',
        age: 30,
        children: [
          {
            id: 3,
            name: 'Erick',
            age: 10,
            children: [],
          },
          {
            id: 4,
            name: 'Rose',
            age: 12,
            children: [],
          },
        ],
      },
    ],
  },
];

function getIndicator(isExpanded, hasChildrenNodes) {
  if (!hasChildrenNodes) {
    return '-';
  } else if (isExpanded) {
    return '\\/';
  } else {
    return '>';
  }
}

const App = () => {
  const [parent, setParent] = useState(null);
  const [child, setChild] = useState(null);

  const handleNodePress = ({ id, children }, level) => {
    // check if selected node is parent-level directory
    if (children.length) {
      // set expanded nodes (parent and child) here
      if (level === 0) {
        setParent(parent !== id ? id : null); // use ternary expression to toggle parent node
      } else {
        setChild(child !== id ? id : null); // use ternary expression to toggle child node
      }
    } else {
      // handle child item press here
    }
  };

  return (
    <ScrollView>
      <TreeView
        data={family}
        onNodePress={({ node, level }) => handleNodePress(node, level)}
        isNodeExpanded={id => id === parent || id === child}
        renderNode={({ node, level, isExpanded, hasChildrenNodes }) => {
          return (
            <View>
              <Text
                style={{
                  marginLeft: 25 * level,
                }}>
                {getIndicator(isExpanded, hasChildrenNodes)} {node.name}
              </Text>
            </View>
          );
        }}
      />
    </ScrollView>
  );
}

And if you want to get particular node expanded while moving through navigation history, just make sure you maintain parent and child values accordingly.

[elmcapp]

Could you create easier ways to handle this in feature update