Back to FlatList and try loading screen

components/chart/chart.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
+import { View, FlatList, Dimensions } from 'react-native'
-import { RecyclerListView, DataProvider, LayoutProvider } from "recyclerlistview"
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { yAxis, normalizeToScale } from './y-axis'
@@ -11,19 +10,6 @@ import config from './config'
 
 const yAxisView = <View {...styles.yAxis}>{yAxis.labels}</View>
 
-const dataProvider = new DataProvider((a,b) => {
-  return Object.keys(a).some(key => a[key] != b[key])
-})
-
-const layoutProvider = new LayoutProvider(
-  () => DayColumn,
-  (_, item) => {
-    item.height = config.chartHeight
-    item.width = config.columnWidth
-    return item
-  }
-)
-
 function getInfoForNeighborColumns(index, cols) {
   const ret = {}
   const right = index > 0 ? cols[index - 1] : undefined
@@ -39,25 +25,24 @@ function getInfoForNeighborColumns(index, cols) {
   return ret
 }
 
-function rowRenderer (_, item, index) {
-  return (
-    <DayColumn
-      item={item}
-      index={index}
-      navigate={this.props.navigation.navigate}
-      {...getInfoForNeighborColumns(index, this.columns)}
-    />
-  )
-}
-
 export default class CycleChart extends Component {
   constructor(props) {
     super(props)
-    this.columns = makeColumnInfo(config.xAxisRangeInDays)
     this.state = {
-      dataProvider: dataProvider.cloneWithRows(this.columns)
+      columns: makeColumnInfo(config.xAxisRangeInDays),
+      loading: true
+    }
+    this.renderColumn = ({item, index}) => {
+      if (index === 15 + 1 && this.state.loading) this.setState({loading: false})
+      return (
+        <DayColumn
+          item={item}
+          index={index}
+          navigate={this.props.navigation.navigate}
+          {...getInfoForNeighborColumns(index, this.state.columns)}
+        />
+      )
     }
-    this.rowRenderer = rowRenderer.bind(this)
 
     this.reCalculateChartInfo = (function(Chart) {
       return function() {
@@ -74,24 +59,34 @@ export default class CycleChart extends Component {
 
 
   render() {
+    const {height, width} = Dimensions.get('window')
     return (
-      <View style={{flexDirection: 'row'}}>
+      <View>
-        { yAxisView }
+        {this.state.loading &&
-        <RecyclerListView
+        <View
-          layoutProvider={layoutProvider}
+          width={width}
-          dataProvider={this.state.dataProvider}
+          height={height}
-          rowRenderer={this.rowRenderer}
+          backgroundColor='lightblue'
-          isHorizontal={true}
+        />}
-          initialNumToRender={15}
+        <View style={{ flexDirection: 'row' }}>
-        >
+          {yAxisView}
-        </RecyclerListView>
+          <FlatList
+            horizontal={true}
+            inverted={true}
+            showsHorizontalScrollIndicator={false}
+            data={this.state.columns}
+            renderItem={this.renderColumn}
+            keyExtractor={item => item.dateString}
+          >
+          </FlatList>
+        </View>
       </View>
     )
   }
 }
 
 function makeColumnInfo(n) {
-  const xAxisDates = getPreviousDays(n).reverse().map(jsDate => {
+  const xAxisDates = getPreviousDays(n).map(jsDate => {
     return LocalDate.of(
       jsDate.getFullYear(),
       jsDate.getMonth() + 1,

components/chart/config.js

@@ -2,10 +2,10 @@ const config = {
   chartHeight: 350,
   columnWidth: 30,
   temperatureScale: {
-    low: 33,
+    low: 35,
     high: 40
   },
-  xAxisRangeInDays: 40
+  xAxisRangeInDays: 50
 }
 
 const margin = 3

components/chart/day-column.js

@@ -13,10 +13,17 @@ import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import setUpFertilityStatusFunc from './nfp-lines'
 import { horizontalGrid } from './y-axis'
+import slowlog from 'react-native-slowlog'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
+const label = styles.column.label
 
 export default class DayColumn extends Component {
+  constructor(props) {
+    super(props)
+    this.getFhmAndLtlInfo = setUpFertilityStatusFunc()
+    // slowlog(this, /.*/)
+  }
   makeDayColumn(data, index) {
     const {
       dateString,
@@ -27,10 +34,9 @@ export default class DayColumn extends Component {
       mucus
     } = data
     const cycleDayNumber = getCycleDayNumber(dateString)
-    const label = styles.column.label
     const dateLabel = dateString.split('-').slice(1).join('-')
-    const getFhmAndLtlInfo = setUpFertilityStatusFunc()
+    // const nfpLineInfo = this.getFhmAndLtlInfo(dateString, temperature)
-    const nfpLineInfo = getFhmAndLtlInfo(dateString, cycleDay)
+    const nfpLineInfo = {}
 
     return (
       <G onPress={() => this.passDateToDayView(dateString)}>
@@ -53,7 +59,7 @@ export default class DayColumn extends Component {
           {dateLabel}
         </Text>
 
-        {cycleDay && cycleDay.bleeding ?
+        {bleeding ?
           <Path {...styles.bleedingIcon}
             d="M15 3
               Q16.5 6.8 25 18
@@ -71,17 +77,18 @@ export default class DayColumn extends Component {
           /> : null}
 
         {y ?
-          this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
+          this.drawDotAndLines(y, temperatureExclude, index)
           : null
         }
-        {cycleDay && cycleDay.mucus ?
+
+        {mucus ?
           <Circle
             {...styles.mucusIcon}
-            fill={styles.mucusIconShades[cycleDay.mucus.value]}
+            fill={styles.mucusIconShades[mucus]}
           /> : null}
 
         {y ?
-          this.drawDotAndLines(y, cycleDay.temperature.exclude)
+          this.drawDotAndLines(y, temperatureExclude)
           : null}
       </G>
     )
@@ -105,18 +112,13 @@ export default class DayColumn extends Component {
       />
     }
 
-    const thereIsADotToTheRight = this.props.rightNeighbor && this.props.rightNeighbor.y
+    if (this.props.rightY) {
-    const thereIsADotToTheLeft = this.props.leftNeighbor && this.props.leftNeighbor.y
+      const excludedLine = this.props.rightTemperatureExclude || exclude
-
+      lineToRight = makeLine(this.props.rightY, config.columnWidth, excludedLine)
-    if (thereIsADotToTheRight) {
-      const neighbor = this.props.rightNeighbor
-      const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
-      lineToRight = makeLine(neighbor.y, config.columnWidth, excludedLine)
     }
-    if (thereIsADotToTheLeft) {
+    if (this.props.leftY) {
-      const neighbor = this.props.leftNeighbor
+      const excludedLine = this.props.leftTemperatureExclude || exclude
-      const excludedLine = neighbor.cycleDay.temperature.exclude || exclude
+      lineToLeft = makeLine(this.props.leftY, 0, excludedLine)
-      lineToLeft = makeLine(neighbor.y, 0, excludedLine)
     }
 
     const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
@@ -131,19 +133,16 @@ export default class DayColumn extends Component {
     </G>)
   }
 
-
   passDateToDayView(dateString) {
     const cycleDay = getOrCreateCycleDay(dateString)
     this.props.navigate('cycleDay', { cycleDay })
   }
 
-  shouldComponentUpdate() {
+  shouldComponentUpdate(newProps) {
-    // for now, until we've solved the mysterious re-rendering
+    return Object.keys(newProps).some(key => newProps[key] != this.props[key])
-    return false
   }
 
   render() {
-    console.log(this.props.index)
     return (
       <Svg width={config.columnWidth} height={config.chartHeight}>
         {this.makeDayColumn(this.props.item, this.props.index)}

package-lock.json

@@ -6444,6 +6444,11 @@
       "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.2.tgz",
       "integrity": "sha512-BdlllHsC/gYJtxPJ2tshDWN8CzmlGg1G9uB+Lu4FRGvGkwhvMtJ/uNShMbvxu134xosH/feri6HQgLGlIT202Q=="
     },
+    "react-native-slowlog": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-slowlog/-/react-native-slowlog-1.0.2.tgz",
+      "integrity": "sha1-VSCXnj751Sc0ldQx/zvjTwLjXIk="
+    },
     "react-native-svg": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.5.1.tgz",

package.json

@@ -27,10 +27,10 @@
     "react-native-modal-datetime-picker-nevo": "^4.11.0",
     "react-native-share": "^1.1.0",
     "react-native-simple-radio-button": "^2.7.1",
+    "react-native-slowlog": "^1.0.2",
     "react-native-svg": "^6.3.1",
     "react-navigation": "^2.0.4",
     "realm": "^2.7.1",
-    "recyclerlistview": "^1.3.4",
     "uuid": "^3.2.1"
   },
   "devDependencies": {