Merge branch '244-improve-chart-scroll' into 'master'

Resolve "improve chart scroll"

Closes #244

See merge request bloodyhealth/drip!106

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, FlatList } from 'react-native'
+import { View, FlatList, ActivityIndicator } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import Svg, { G } from 'react-native-svg'
@@ -196,9 +196,11 @@ export default class CycleChart extends Component {
             renderItem={this.renderColumn}
             keyExtractor={item => item}
             initialNumToRender={15}
-            maxToRenderPerBatch={5}
             windowSize={30}
             onLayout={() => this.setState({chartLoaded: true})}
+            onEndReached={() => this.setState({end: true})}
+            ListFooterComponent={<LoadingMoreView end={this.state.end}/>}
+            updateCellsBatchingPeriod={800}
           />
         }
       </View>
@@ -206,6 +208,16 @@ export default class CycleChart extends Component {
   }
 }
 
+function LoadingMoreView(props) {
+  return (
+    <View style={styles.loadingMore}>
+      {!props.end &&
+        <ActivityIndicator size={'large'} color={'white'}/>
+      }
+    </View>
+  )
+}
+
 function getTodayAndPreviousDays(n) {
   const today = new Date()
   today.setHours(0)

components/chart/styles.js

@@ -122,6 +122,11 @@ const styles = {
   symptomRow: {
     alignItems: 'center',
     justifyContent: 'center',
+  },
+  loadingMore: {
+    height: '100%',
+    backgroundColor: 'lightgrey',
+    justifyContent: 'center'
   }
 }