Change Readme file

Author: fjmorant

README.md

@@ -1,2 +1,53 @@
 # react-native-nested-listview
-Nested Listview for React native
+Nested listview component for React native that it allows to create a listview that has N levels of nesting
+
+
+## Table of contents
+
+1. [Usage](#usage)
+1. [Props](#props)
+1. [Example](#example)
+1. [Roadmap](#roadmap)
+
+
+## Usage
+
+```
+yarn add react-native-nested-listview
+```
+
+```javascript
+import NestedListview 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) => <Text>{node.name}</Text>}
+/>
+```
+
+## Props
+
+### Required
+
+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](#usage)) and must return a React element. | Function | **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
+
+## Example
+You can find the following example in the [`/example` folder](https://github.com/fjmorant/react-native-nested-listview/tree/master/example).
+
+![react-native-nested-listview](https://imgur.com/OqvopyK.gif)
+
+## Roadmap
+
+ - Autoscrolling optionally
+ - Expand/contract nodes programatically
+ - Support animations
+ - Add more examples of usage

example/ExampleApp.js

@@ -56,14 +56,13 @@ const colorLevels = {
 }
 
 const styles = StyleSheet.create({
-  container: {flex: 1, backgroundColor: 'rgb(255, 255, 255)', padding: 10},
+  container: {flex: 1, backgroundColor: 'rgb(255, 255, 255)', padding: 15},
   node: {
     flex: 1,
     padding: 10,
     borderWidth: 1,
     borderColor: 'rgb(0, 0, 0)',
   },
-  nestedListView: {padding: 10, flex: 1},
 })
 export default class ExampleApp extends React.Component<Props, State> {
   nestedListView: any
@@ -98,11 +97,7 @@ export default class ExampleApp extends React.Component<Props, State> {
           data={data}
           getChildrenName={this.getChildrenName}
           onNodePressed={this.onNodePressed}
-          ref={ref => {
-            this.nestedListView = ref
-          }}
           renderNode={this.renderNode}
-          style={styles.nestedListView}
         />
       </View>
     )

index.js

@@ -19,7 +19,7 @@ export default class NestedListView extends React.PureComponent<Props, State> {
       id: shortid.generate(),
       items: this.props.data
         ? this.props.data.map((child: Node, index: number) =>
-            this.generateIds(this.props.data[index])
+            this.generateIds(this.props.data[index]),
           )
         : [],
       name: 'root',
@@ -35,30 +35,21 @@ export default class NestedListView extends React.PureComponent<Props, State> {
       return
     }
 
-    const childrenName: string = this.props.getChildrenName(node)
+    const childrenName: string = this.props.getChildrenName(node) || 'items'
+    const children = node[childrenName]
 
-    if (childrenName) {
-      const children = node[childrenName]
-
-      if (children) {
-        node[childrenName] = children.map((child, index) =>
-          this.generateIds(children[index])
-        )
-      }
+    if (children) {
+      node[childrenName] = children.map((child, index) =>
+        this.generateIds(children[index]),
+      )
     }
 
     node.id = shortid.generate()
 
     return node
   }
 
-  getChildrenName = (node: Node) => {
-    if (node.name === 'root') {
-      return 'items'
-    }
-
-    return this.props.getChildrenName(node)
-  }
+  getChildrenName = (node: Node) => this.props.getChildrenName(node)
 
   render = () => {
     if (!this.props.getChildrenName) {

package.json

@@ -11,7 +11,9 @@
     "url": "git+https://github.com/fjmorant/react-native-nested-listview.git"
   },
   "dependencies": {
-    "shortid": "^2.2.8",
+    "shortid": "^2.2.8"
+  },
+  "peerDependencies": {
     "react": "16.0.0-alpha.12",
     "react-native": "0.48.3"
   },