react-native-tree-view

React Native component for hierarchical data representation. Has expandable row, which useful for displaying large amounts of information in vertical space.

Show Cases

Getting Started

• Installation
• Basic Usage
• Properties
  • Basic props of TreeView
  • Cells definition
• Run example

Installation

Install main package:

$ npm i --save @captain-omega/react-native-tree-view

Install related icons package react-native-vector-icons:

$ npm i --save react-native-vector-icons

Add settings for your platform, see more here

IOS

react-native link react-native-vector-icons

Android

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Basic Usage

• Install @captain-omega/react-native-tree-view package to project

• Import module to file

import TreeView from '@captain-omega/react-native-tree-view';

• Then, use component like this:

<TreeView  
  cells={level1}
  data={data}  
  renderExpand={(item) => (
    <TreeView
      hideHeaders
      cells={level2}
      data={item.children}
      hideArrow
    />
  )}
/>

You can watch more examples in example directory

Properties

Basic props of TreeView

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | cells | - | array | An array of objects that each describe a cell. See the cells property definition here. | | contentStyle | {} | style | See default style in source. | | data | - | array | The array of table rows. | | headerStyle | {} | style | See default style in source. | | hideArrow | false | bool | Hide column with arrows if this parameter is true. | | hideHeaders | false | bool | Hide component headers. | | isExpandable | null | function | Function that return true if row is expandable and false if it doesn't. | | open | false | bool | Open all expandable rows by default. | | onPress | null | function | Handle row press event. | | renderExpand | null | function | Render function for expandable content. If this parameter is null, then row not expandable. |

Cells definition

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | cellStyle | {} | style | Set row cell style. | | headerCellStyle | {} | style | Set header cell style. | | renderHeaderCell | - | function | Render header cell content. | | renderRowCell | - | function | Render row cell content. | | width | 30 | number | Width of column. |

Run example

To run example call this commands in terminal:

$ cd example
$ npm i
$ react-native run-android
$ react-native run-ios

Notice!

If your npm not support symlinks, then call this code from repository root directory:

$ mkdir example/node_modules/@captain-omega
$ cp -alf $PWD example/node_modules/@captain-omega
$ rm -R example/node_modules/@captain-omega/react-native-tree-view/example
$ cd example
$ react-native run-android
$ react-native run-ios