react-native-nested-listview
UI component for React Native that allows to create a listview with N levels of nesting
![CodeFactor](https://camo.githubusercontent.com/4ff5db67bf562b894ea094fceb45c57095d49b624240aa44983fca8c8d4d018f/68747470733a2f2f7777772e636f6465666163746f722e696f2f7265706f7369746f72792f6769746875622f666a6d6f72616e742f72656163742d6e61746976652d6e65737465642d6c697374766965772f6261646765)
- Show
- Usage
- Props
- Examples
- Roadmap
![react-native-nested-listview](https://camo.githubusercontent.com/1fe6a807ff6e186c3a739065b831b7d4c447dfb8b0b28773f63dc333ebfe1b65/68747470733a2f2f692e696d6775722e636f6d2f6e4a766c305a542e676966)
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>
)}
/>
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 |
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 |
You can find examples here.
React Native |
Library |
0.61.4 |
0.8.0 |
- Autoscrolling optionally
- Expand/contract nodes programatically
- Support animations