react-native-nested-listview

UI component for React Native that allows to create a listview with N levels of nesting

Table of contents

1. Show
2. Usage
3. Props
4. Examples
5. Roadmap

Show

Usage

yarn add react-native-nested-listview

import NestedListView, {NestedRow} from 'react-native-nested-listview'

const data = [{title: 'Node 1', items: [{title: 'Node 1.1'}, {title: 'Node 1.2'}]}]

<NestedListView
  data={data}
  getChildrenName={(node) => 'items'}
  onNodePressed={(node) => alert('Selected node')}
  renderNode={(node, level) => (
    <NestedRow
      level={level}
      style={styles.row}
    >
      <Text>{node.title}</Text>
    </NestedRow>
  )}
/>

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) 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.

| React Native | Library | | ------------ | ------- | | 0.61.4 | 0.8.0 |

Roadmap

• Autoscrolling optionally
• Expand/contract nodes programatically
• Support animations