Use flatlist

Author: fjmorant

example/ExampleApp.js

@@ -31,7 +31,7 @@ const data = [
       },
       {
         name: 'Item level 1.2.2',
-        children: generateXNumItems(1000, 'Item level 1.2.2')
+        children: generateXNumItems(2, 'Item level 1.2.2')
       },
     ],
   },
@@ -45,7 +45,7 @@ export default class ExampleApp extends React.Component {
   nestedListView: any
 
   renderNode = (node: Object, level: string) => {
-    const paddingLeft = (level + 1) * 10
+    const paddingLeft = (level + 1) * 30
     return (
       <View style={{flex: 1, padding: 10, paddingLeft, borderWidth: 1, borderColor: 'rgb(0, 0, 0)'}}>
         <Text>{node.name}</Text>

example/nestedListView/NodeView.js

@@ -1,38 +1,46 @@
 /* @flow */
 
 import React from 'react'
-import {TouchableOpacity, View} from 'react-native'
+import {TouchableOpacity, View, FlatList} from 'react-native'
 
-const NodeView = ({
-  getChildren,
-  node,
-  renderNode,
-  renderChildrenNode,
-  onLayout,
-  onNodePressed,
-}: {
-  getChildren: Function,
-  node: any,
-  nodeStyle?: any,
-  onLayout?: Function,
-  onNodePressed: Function,
-  renderNode: Function,
-  renderChildrenNode: Function,
-}) => {
-  const children = getChildren(node)
+export default class NodeView extends React.PureComponent {
 
-  return (
-    <View onLayout={onLayout}>
-      <TouchableOpacity onPress={() => onNodePressed(node)}>
-        {renderNode()}
-      </TouchableOpacity>
-      {node.opened && children
-        ? <View>
-            {children.map(renderChildrenNode)}
-          </View>
-        : null}
-    </View>
-  )
-}
+  componentWillMount = () => {
+    let rootChildren = this.props.getChildren(this.props.node)
+
+    if (rootChildren) {   
+      rootChildren = rootChildren.map((child, index) => {
+        return this.props.generateIds(rootChildren[index])
+      })
+    } 
+    
+    this.setState({data: rootChildren})
+  }
+
+  onNodePressed = (node: any) => {
+    const newState = rootChildren = this.state.data.map((child, index) => {
+      return this.props.searchTree(this.state.data[index], node)
+    })
 
-export default NodeView
+    this.setState({data: newState})
+    this.props.onNodePressed(node)
+  }
+
+  render() {
+    const {getChildren, node, nodeStyle, onLayout, onNodePressed, renderNode, renderChildrenNode} = this.props
+    const children = getChildren(node)
+    
+    return (
+      <View onLayout={onLayout}>
+        <TouchableOpacity onPress={() => onNodePressed(node)}>
+          {renderNode()}
+        </TouchableOpacity>
+        {node.opened && this.state.data
+          ? <FlatList
+          data={this.state.data}      
+          renderItem={({item}) => renderChildrenNode(item)}
+          keyExtractor={(item) => item.id}/> : null}
+      </View>
+    )
+  }
+}

example/nestedListView/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-import {ScrollView} from 'react-native'
+import {ScrollView, FlatList} from 'react-native'
 import NodeView from './NodeView'
 import shortid from 'shortid'
 
@@ -100,13 +100,13 @@ export default class NestedListView extends React.Component {
   }
 
   searchTree = (element: any, otherElement: any) => {
-    const childrenName = this.props.getChildrenName(element)
-
-    if (element.id == otherElement.id) {
+    if (element.id === otherElement.id) {
       element.opened = !element.opened
 
       return element
     } 
+
+    const childrenName = this.props.getChildrenName(element)
 
     if (childrenName) {
       const children = element[childrenName]
@@ -154,45 +154,28 @@ export default class NestedListView extends React.Component {
     this.props.onNodePressed(node)
   }
 
-  onLayoutSelectedNode = (event: any) => {
-    const {x, y} = event.nativeEvent.layout
-
-    this.scrollview.scrollTo({x, y, animated: true})
-  }
-
   onCreateChildren = (item: any, level: number) => {
-    const autoScrollToNodeId = this.props.autoScrollToNodeId
-
     return (
       <NodeView
         getChildren={(node: Object) => node[this.props.getChildrenName(node)]}
         key={item.id}
         node={item}
-        onLayout={
-          autoScrollToNodeId && item.id_video === autoScrollToNodeId
-            ? this.onLayoutSelectedNode
-            : null
-        }
+        searchTree={this.searchTree}
+        generateIds={this.generateIds}
         onNodePressed={() => this.onNodePressed(item)}
-        renderChildrenNode={(childrenNode: Object) =>
-          this.onCreateChildren(childrenNode, level + 1)}
+        renderChildrenNode={(childrenNode: Object) => this.onCreateChildren(childrenNode, level + 1)}
         renderNode={() => this.props.renderNode(item, level)}
       />
     )
   }
 
   render = () => {
-    
     return (
-      <ScrollView
-        ref={ref => {
-          this.scrollview = ref
-        }}
-        style={this.props.style}>
-        {this.state.data
-          ? this.state.data.map((item: Object) => this.onCreateChildren(item, 0))
-          : null}
-      </ScrollView>
+      <FlatList
+        data={this.state.data}      
+        style={this.props.style} 
+        renderItem={({item}) => this.onCreateChildren(item, 0)}
+        keyExtractor={(item) => item.id}/>      
     )
   }
 }