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:

``js
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:

`js
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 (
data={family} // defined above
renderNode={({ node, level, isExpanded, hasChildrenNodes }) => {
return (

style={{
marginLeft: 25 * level,
}}
>
{getIndicator(isExpanded, hasChildrenNodes)} {node.name}


)
}}
/>
)
}

export default App
`

This should display:

!First render

And, after a few touches:

!All expanded

Props

$3

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.

$3

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

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

Example:

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

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

style={{
marginLeft: 25 * level,
}}
>
{getIndicator(isExpanded, hasChildrenNodes)} {node.name}


)}
`

$3

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

`js
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!!!

$3

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

`js
onNodeLongPress({ node, level })
`

$3

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

`js
isNodeExpanded(id)
`

$3

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

$3

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

$3

Optional. The opacity of the wrapped node. Defaults 0.2

$3

If nodes should start expanded. Defaults to false

FAQ

$3

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

$3

Yes! Feel free to contribute!

License

MIT