diff --git a/components/chart/chart.js b/components/chart/chart.js index b4b4453..5f8b029 100644 --- a/components/chart/chart.js +++ b/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={} + updateCellsBatchingPeriod={800} /> } @@ -206,6 +208,16 @@ export default class CycleChart extends Component { } } +function LoadingMoreView(props) { + return ( + + {!props.end && + + } + + ) +} + function getTodayAndPreviousDays(n) { const today = new Date() today.setHours(0) diff --git a/components/chart/styles.js b/components/chart/styles.js index 8cc044f..3b883d8 100644 --- a/components/chart/styles.js +++ b/components/chart/styles.js @@ -122,6 +122,11 @@ const styles = { symptomRow: { alignItems: 'center', justifyContent: 'center', + }, + loadingMore: { + height: '100%', + backgroundColor: 'lightgrey', + justifyContent: 'center' } }