@captain-omega/react-native-tree-view NPM

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

react-native tree expand android ios

prop-types

@infinitebrahmanuniverse/nolb-_cap @everything-registry/sub-chunk-155 @zalastax/nolb-_cap

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago