Needless Patchouli Manufacture

    ntq-react-native-tree-view
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    react-native-nested-listview

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

    platforms CircleCI codecov npm github release CodeFactor

    Table of contents

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

    Show

    react-native-nested-listview react-native-nested-listview

    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

    Install

    npm i ntq-react-native-tree-view

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    20

    Last publish

    Collaborators

    • cuongdm01892