Remove ScrollView and make DayColumn component

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Text as ReactNativeText, View, FlatList, ScrollView } from 'react-native'
+import { Text as ReactNativeText, View, FlatList } from 'react-native'
 import range from 'date-range'
 import Svg,{
   G,
@@ -45,21 +45,36 @@ export default class CycleChart extends Component {
     this.props.navigation.navigate('cycleDay', { cycleDay })
   }
 
-  placeHorizontalGrid() {
+  render() {
-    return yAxis.tickPositions.map(tick => {
+    return (
-      return (
+      <View style={{flexDirection: 'row'}}>
-        <Line
+        <View {...styles.yAxis}>{yAxis.labels}</View>
-          x1={0}
+        <FlatList
-          y1={tick}
+          horizontal={true}
-          x2={config.columnWidth}
+          inverted={true}
-          y2={tick}
+          showsHorizontalScrollIndicator={false}
-          {...styles.horizontalGrid}
+          data={this.state.columns}
-          key={tick}
+          renderItem={({ item, index }) => {
-        />
+            const cols = this.state.columns
-      )
+            return (
-    })
+              <DayColumn
+                item={item}
+                index={index}
+                rightNeighbor = { index > 0 ? cols[index - 1] : undefined }
+                leftNeighbor = {index < cols.length - 1 ? cols[index + 1] : undefined }
+              />
+            )
+          }}
+          keyExtractor={item => item.dateString}
+          initialNumToRender={20}
+        >
+        </FlatList>
+      </View>
+    )
   }
+}
 
+class DayColumn extends Component {
   makeDayColumn({ dateString, cycleDay, y }, index) {
     const cycleDayNumber = getCycleDayNumber(dateString)
     const label = styles.column.label
@@ -116,16 +131,15 @@ export default class CycleChart extends Component {
           /> : null}
 
         {y ?
-          this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
+          this.drawDotAndLines(y, cycleDay.temperature.exclude)
           : null}
       </G>
     )
   }
 
-  drawDotAndLines(currY, exclude, index) {
+  drawDotAndLines(currY, exclude) {
     let lineToRight
     let lineToLeft
-    const cols = this.state.columns
 
     function makeLine(otherColY, x, excludeLine) {
       const middleY = ((otherColY - currY) / 2) + currY
@@ -141,18 +155,18 @@ export default class CycleChart extends Component {
       />
     }
 
-    const thereIsADotToTheRight = index > 0 && cols[index - 1].y
+    const thereIsADotToTheRight = this.props.rightNeighbor && this.props.rightNeighbor.y
-    const thereIsADotToTheLeft = index < cols.length - 1 && cols[index + 1].y
+    const thereIsADotToTheLeft = this.props.leftNeighbor && this.props.leftNeighbor.y
 
     if (thereIsADotToTheRight) {
-      const otherDot = cols[index - 1]
+      const neighbor = this.props.rightNeighbor
-      const excludedLine = otherDot.cycleDay.temperature.exclude || exclude
+      const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
-      lineToRight = makeLine(otherDot.y, config.columnWidth, excludedLine)
+      lineToRight = makeLine(neighbor.y, config.columnWidth, excludedLine)
     }
     if (thereIsADotToTheLeft) {
-      const otherDot = cols[index + 1]
+      const neighbor = this.props.leftNeighbor
-      const excludedLine = otherDot.cycleDay.temperature.exclude || exclude
+      const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
-      lineToLeft = makeLine(otherDot.y, 0, excludedLine)
+      lineToLeft = makeLine(neighbor.y, 0, excludedLine)
     }
 
     const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
@@ -167,26 +181,26 @@ export default class CycleChart extends Component {
     </G>)
   }
 
+  placeHorizontalGrid() {
+    return yAxis.tickPositions.map(tick => {
+      return (
+        <Line
+          x1={0}
+          y1={tick}
+          x2={config.columnWidth}
+          y2={tick}
+          {...styles.horizontalGrid}
+          key={tick}
+        />
+      )
+    })
+  }
+
   render() {
     return (
-      <ScrollView contentContainerStyle={{flexDirection: 'row'}}>
+      <Svg width={config.columnWidth} height={config.chartHeight}>
-        <View {...styles.yAxis}>{yAxis.labels}</View>
+        {this.makeDayColumn(this.props.item, this.props.index)}
-        <FlatList
+      </Svg>
-          horizontal={true}
-          inverted={true}
-          showsHorizontalScrollIndicator={false}
-          data={this.state.columns}
-          renderItem={({ item, index }) => {
-            return (
-              <Svg width={config.columnWidth} height={config.chartHeight}>
-                {this.makeDayColumn(item, index)}
-              </Svg>
-            )
-          }}
-          keyExtractor={item => item.dateString}
-        >
-        </FlatList>
-      </ScrollView>
     )
   }
 }