Fix bug: Don't produce closure for every item

components/chart/chart.js

@@ -67,6 +67,8 @@ export default class CycleChart extends Component {
           data={this.state.columns}
           renderItem={this.renderColumn}
           keyExtractor={item => item.dateString}
+          initialNumToRender={15}
+          maxToRenderPerBatch={5}
         >
         </FlatList>
       </View>

components/chart/day-column.js

@@ -17,12 +17,12 @@ import slowlog from 'react-native-slowlog'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
+const getFhmAndLtlInfo = setUpFertilityStatusFunc()
 
 export default class DayColumn extends Component {
   constructor(props) {
     super(props)
-    this.getFhmAndLtlInfo = setUpFertilityStatusFunc()
+    slowlog(this, /.*/)
-    // slowlog(this, /.*/)
   }
   makeDayColumn(data, index) {
     const {
@@ -35,8 +35,7 @@ export default class DayColumn extends Component {
     } = data
     const cycleDayNumber = getCycleDayNumber(dateString)
     const dateLabel = dateString.split('-').slice(1).join('-')
-    // const nfpLineInfo = this.getFhmAndLtlInfo(dateString, temperature)
+    const nfpLineInfo = getFhmAndLtlInfo(dateString, temperature)
-    const nfpLineInfo = {}
 
     return (
       <G onPress={() => this.passDateToDayView(dateString)}>

components/chart/nfp-lines.js

@@ -2,26 +2,26 @@ import { getCycleStatusForDay } from '../../lib/sympto-adapter'
 import { normalizeToScale } from './y-axis'
 
 export default function () {
-  let cycleStatus
+  const cycle = {
-  let cycleStartDate
+    status: null
-  let noMoreCycles = false
+  }
 
   function updateCurrentCycle(dateString) {
-    cycleStatus = getCycleStatusForDay(dateString)
+    cycle.status = getCycleStatusForDay(dateString)
-    if(!cycleStatus) {
+    if(!cycle.status) {
-      noMoreCycles = true
+      cycle.noMoreCycles = true
       return
     }
-    if (cycleStatus.phases.preOvulatory) {
+    if (cycle.status.phases.preOvulatory) {
-      cycleStartDate = cycleStatus.phases.preOvulatory.start.date
+      cycle.startDate = cycle.status.phases.preOvulatory.start.date
     } else {
-      cycleStartDate = cycleStatus.phases.periOvulatory.start.date
+      cycle.startDate = cycle.status.phases.periOvulatory.start.date
     }
   }
 
   function dateIsInPeriOrPostPhase(dateString) {
     return (
-      dateString >= cycleStatus.phases.periOvulatory.start.date
+      dateString >= cycle.status.phases.periOvulatory.start.date
     )
   }
 
@@ -29,15 +29,15 @@ export default function () {
     return (
       // we are only interested in days that have a preceding
       // temp
-      Object.keys(cycleStatus.phases).some(phaseName => {
+      Object.keys(cycle.status.phases).some(phaseName => {
-        return cycleStatus.phases[phaseName].cycleDays.some(day => {
+        return cycle.status.phases[phaseName].cycleDays.some(day => {
           return day.temperature && day.date < dateString
         })
       })
       // and also a following temp, so we don't draw the line
       // longer than necessary
       &&
-      cycleStatus.phases.postOvulatory.cycleDays.some(day => {
+      cycle.status.phases.postOvulatory.cycleDays.some(day => {
         return day.temperature && day.date > dateString
       })
     )
@@ -51,13 +51,13 @@ export default function () {
 
   return function(dateString, temperature) {
     const ret = {}
-    if (!cycleStatus && !noMoreCycles) updateCurrentCycle(dateString)
+    if (!cycle.status && !cycle.noMoreCycles) updateCurrentCycle(dateString)
-    if (noMoreCycles) return ret
+    if (cycle.noMoreCycles) return ret
 
-    if (dateString < cycleStartDate) updateCurrentCycle(dateString)
+    if (dateString < cycle.startDate) updateCurrentCycle(dateString)
-    if (noMoreCycles) return ret
+    if (cycle.noMoreCycles) return ret
 
-    const tempShift = cycleStatus.temperatureShift
+    const tempShift = cycle.status.temperatureShift
 
     if (tempShift) {
       if (tempShift.firstHighMeasurementDay.date === dateString) {