react-native-nested-listview
UI component for React Native that allows to create a listview with N levels of nesting
Table of contents
Show
Usage
yarn add react-native-nested-listview
const data = title: 'Node 1' items: title: 'Node 1.1' title: 'Node 1.2' <NestedListView data=data getChildrenName= 'items' onNodePressed= renderNode= <NestedRow level=level style=stylesrow > <Text>nodetitle</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