# ntq-react-native-tree-view > Tree view for React native Latest version **1.0.0** (published 2020-06-01) · MIT license · 0 weekly downloads ## Install ```sh npm install ntq-react-native-tree-view pnpm add ntq-react-native-tree-view yarn add ntq-react-native-tree-view bun add ntq-react-native-tree-view ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2020-06-01 | | First published | 2020-06-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 18.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | NTQ - Hung NB | | Maintainers | cuongdm01892 | | Keywords | react, native, list, nested | ## Links - npm: https://www.npmjs.com/package/ntq-react-native-tree-view - Repository: https://github.com/hungntq/react-native-tree-view - Homepage: https://github.com/hungntq/react-native-tree-view#readme - Issues: https://github.com/hungntq/react-native-tree-view/issues - npm.io page: https://npm.io/package/ntq-react-native-tree-view ## Dependencies (4) - [shortid](https://npm.io/package/shortid.md) 2.2.15 - [object-hash](https://npm.io/package/object-hash.md) 2.0.1 - [use-global-hook](https://npm.io/package/use-global-hook.md) 0.1.12 - [react-fast-compare](https://npm.io/package/react-fast-compare.md) 2.0.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2020-06-01 ## README # react-native-nested-listview UI component for React Native that allows to create a listview with N levels of nesting ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square) [![CircleCI](https://circleci.com/gh/fjmorant/react-native-nested-listview.svg?style=shield)](https://circleci.com/gh/fjmorant/react-native-nested-listview) [![codecov](https://codecov.io/gh/fjmorant/react-native-nested-listview/branch/master/graph/badge.svg)](https://codecov.io/gh/fjmorant/react-native-nested-listview) [![npm](https://img.shields.io/npm/v/react-native-nested-listview.svg?style=flat-square)](https://www.npmjs.com/package/react-native-nested-listview) [![github release](https://img.shields.io/github/release/fjmorant/react-native-nested-listview.svg?style=flat-square)](https://github.com/fjmorant/react-native-nested-listview/releases) [![CodeFactor](https://www.codefactor.io/repository/github/fjmorant/react-native-nested-listview/badge)](https://www.codefactor.io/repository/github/fjmorant/react-native-nested-listview) ## Table of contents 1. [Show](#show) 1. [Usage](#usage) 1. [Props](#props) 1. [Examples](#examples) 1. [Roadmap](#roadmap) ## Show ![react-native-nested-listview](https://i.imgur.com/Y3VFTry.gif) ![react-native-nested-listview](https://i.imgur.com/nJvl0ZT.gif) ## Usage ``` yarn add react-native-nested-listview ``` ```javascript import NestedListView, {NestedRow} from 'react-native-nested-listview' const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}]}] 'items'} onNodePressed={(node) => alert('Selected node')} renderNode={(node, level) => ( {node.title} )} /> ``` ## Props ### NestedListView | Prop | Description | Type | Default | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------ | | **`data`** | Array of nested items | Array | **Required** | | **`renderNode`** | Takes a node from data and renders it into the NestedlistView. The function receives `{node, level}` (see [Usage](#usage)) and must return a React element. | Function | **Required** | | **`key`** | Get key from node. The function receives `(node)` and must return a unique key. | Function | Not required | | **`getChildrenName`** | Function to determine in a node where are the children, by default NestedListView will try to find them in **items** | Function | **items** | | **`onNodePressed`** | Function called when a node is pressed by a user | Function | Not required | | **`extraData`** | A marker property for telling the list to re-render | Boolean | Not required | | **`keepOpenedState`** | Prop for keeping the opened state of each node when data passed to the list changes | Boolean | Not required | ### NestedRow | Prop | Description | Type | Default | | -------------- | --------------------------- | --------- | ------------ | | **`height`** | Height of the row | number | 50 | | **`children`** | Content of the NestedRow | Component | **Required** | | **`level`** | Level where a given node is | number | **Required** | | **`style`** | NestedRow container style | Style | Not required | ## Examples You can find examples [here](https://github.com/fjmorant/react-native-nested-listview-examples). | React Native | Library | | ------------ | ------- | | 0.61.4 | 0.8.0 | ## Roadmap - Autoscrolling optionally - Expand/contract nodes programatically - Support animations --- _Source: https://npm.io/package/ntq-react-native-tree-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._