0.14.2 • Published 1 year ago

react-native-nested-listview v0.14.2

Weekly downloads
241
License
MIT
Repository
github
Last release
1 year ago

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, isLastLevel) => (
    <NestedRow
      level={level}
      style={styles.row}
    >
      <Text>{node.title}</Text>
    </NestedRow>
  )}
/>

Props

NestedListView

PropDescriptionTypeDefault
dataArray of nested itemsArrayRequired
renderNodeTakes a node from data and renders it into the NestedlistView. The function receives {node, level, isLastLevel} (see Usage) and must return a React element.FunctionRequired
getChildrenNameFunction to determine in a node where are the children, by default NestedListView will try to find them in itemsFunctionitems
onNodePressedFunction called when a node is pressed by a userFunctionNot required
extraDataA marker property for telling the list to re-renderBooleanNot required
keepOpenedStateProp for keeping the opened state of each node when data passed to the list changesBooleanNot required
initialNumToRenderProp for setting the initial amount of items to render.numberNot required

NestedRow

PropDescriptionTypeDefault
heightHeight of the rownumber50
childrenContent of the NestedRowComponentRequired
levelLevel where a given node isnumberRequired
styleNestedRow container styleStyleNot required

Examples

You can find examples here and also an Expo project here

Version AppReact NativeLibrary
1.0.00.70.10.14.0

Roadmap

I have moved the roadmap of this library to this trello board so that it can be easier to add more things and like that it doesn't create issues in GitHub if I need to create a ticket

Roadmap Trello Board

Development

In other to start watch mode and develop the library with the examples project (described above), you need to have installed the following npm packages:

  • npm -g json
  • npm -g wml

And have the library and examples project in the same root folder, example:

  • root
    • react-native-nested-listview
    • react-native-nested-listview-examples

After the previous steps you can then run the following command:

yarn start-watch

and then you can start the examples app as usual:

yarn ios or yarn android

When you finish with watch mode remember to stop it to get back to normal like this:

yarn stop-watch

Invite me a coffee

If you want to invite me for a coffee after enjoying this library or just for fun.

ko-fi

Thanks

0.14.2

1 year ago

0.13.0

2 years ago

0.14.0

1 year ago

0.13.1

1 year ago

0.14.1

1 year ago

0.12.0

2 years ago

0.12.1

2 years ago

0.11.4

2 years ago

0.11.5

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.11.2

2 years ago

0.11.3

2 years ago

0.10.0

3 years ago

0.9.2

3 years ago

0.9.1

3 years ago

0.9.0

4 years ago

0.8.0

4 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

6 years ago

0.5.0

6 years ago

0.4.3

6 years ago

0.4.2

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.0

6 years ago

0.2.0

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

7 years ago