react-native-animated-tree-view

A React Native animated tree view component

Table of contents

1. Show
2. Usage
3. Props

Show

Installation

yarn add react-native-animated-tree-view

Usage

Firstly, you have to define your data. Example:

const data = [
  {
    name: "Cheese",
    value: "cheese-value"
  },
  {
    name: "Cheese",
    value: "cheese-value",
    items: [
      {
        name: "Spicy",
        value: "spicy-value"
      },
      {
        name: "Cheese",
        value: "cheese-value",
        items: [
          {
            name: "Spicy",
            value: "spicy-value"
          },
          {
            name: "Spicy",
            value: "spicy-value"
          }
        ]
      }
    ]
  }
];

It is required that each node on the tree have its own value key which name should be "value". The tree nodes are defined in the items key. They are an array of objects, following the same structure as the parent.

After defining data, mount the component. Example:

import TreeView from "react-native-animated-tree-view";
 
export default App = () => {
  return <TreeView data={data} />;
};

Props

ListView

Prop	Description	Type	Default
data	Array of nested items	Array	Required
onClick	Return clicked item	Function	Not Require
displayNodeName	Takes a node to render a display text	String	name
childrenNodeName	Node to determine in a node where are the children, by default it will try to find them in items	String	items
leftImage	Left side image		Not Require
rightImage	Right side image		Not Require

Style Props

Prop	Description	Type
containerStyle	Container Style	Object
listContainerStyle	List Container Style	Object
listItemStyle	List Item Style	Object
textStyle	List Item Text Style	Object
leftImageStyle	Left side image style	Object
rightImageWrapperStyle	Right side image wrapper style	Object
rightImageStyle	Right side image style	Object