react-native-final-tree-view

A React Native Tree View component!

Installation

yarn add react-native-final-tree-view

Usage

Firstly, you have to define your data. Example:

const family = [
  {
    id: 'Grandparent',
    name: 'Grandpa',
    age: 78,
    children: [
      {
        id: 'Me',
        name: 'Me',
        age: 30,
        children: [
          {
            id: 'Erick',
            name: 'Erick',
            age: 10,
          },
          {
            id: 'Rose',
            name: 'Rose',
            age: 12,
          },
        ],
      },
    ],
  },
]

It is required that each node on the tree have its own id key. Obviously, it should be unique. The tree nodes are defined in the children key. They are an array of objects, following the same structure as the parent.

After defining your data, mount the component. Example:

import React from 'react'
import { Text, View } from 'react-native'

import TreeView from 'react-native-final-tree-view'

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

function App() {
  return (
    <TreeView
      data={family} // defined above
      renderNode={({ node, level, isExpanded, hasChildrenNodes }) => {
        return (
          <View>
            <Text
              style={{
                marginLeft: 25 * level,
              }}
            >
              {getIndicator(isExpanded, hasChildrenNodes)} {node.name}
            </Text>
          </View>
        )
      }}
    />
  )
}

export default App

This should display:

And, after a few touches:

Props

data

Required. The tree data to render. It's an array of objects. Each object should have, at least, the id of the node and the children of it. This structure can be changed via the props idKey and childrenKey, respectively.

renderNode

Required. A function that must return the JSX to render the item. Signature:

renderNode({ node, level, isExpanded, hasChildrenNodes })

Example:

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

renderNode={({ node, level, isExpanded, hasChildrenNodes }) => (
  <View>
    <Text
      style={{
        marginLeft: 25 * level,
      }}
    >
      {getIndicator(isExpanded, hasChildrenNodes)} {node.name}
    </Text>
  </View>
)}

onNodePress

Optional. A callback fired when a node is pressed. Signature:

onNodePress({ node, level })

It accepts a promise if you want. If you DON'T want the specific node to expand or collapse, return false at the end of this event!!!

onNodeLongPress

Optional. A callback fired when a node is long pressed. Signature:

onNodeLongPress({ node, level })

isNodeExpanded

Optional. Used for custom handling of expanded nodes. Signature:

isNodeExpanded(id)

idKey

Optional. The id key to refer to. Defaults to id

childrenKey

Optional. The children key to look for. Defaults to children

activeOpacityNode

Optional. The opacity of the wrapped node. Defaults 0.2

initialExpanded

If nodes should start expanded. Defaults to false

FAQ

If I modify the data prop does it reflect the changes without collapsing the nodes?

No. Once you modify the data, the whole tree goes back to initialExpanded

Are PRs open?

Yes! Feel free to contribute!

License

MIT