Produce horizontal grid once, not for every column

components/chart/chart.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
-import { yAxis, normalizeToScale } from './y-axis'
+import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
 import DayColumn from './day-column'
 import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
 import styles from './styles'
@@ -43,7 +43,8 @@ export default class CycleChart extends Component {
     return (
       <View style={{ flexDirection: 'row' }}>
         {yAxisView}
-        <FlatList
+        {horizontalGrid}
+        {<FlatList
           horizontal={true}
           inverted={true}
           showsHorizontalScrollIndicator={false}
@@ -53,7 +54,7 @@ export default class CycleChart extends Component {
           initialNumToRender={15}
           maxToRenderPerBatch={5}
         >
-        </FlatList>
+        </FlatList>}
       </View>
     )
   }

components/chart/day-column.js

@@ -8,7 +8,6 @@ import config from './config'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import setUpFertilityStatusFunc from './nfp-lines'
-import { horizontalGrid } from './y-axis'
 
 const getCycleDayNumber = cycleModule().getCycleDayNumber
 const label = styles.column.label
@@ -69,7 +68,7 @@ export default class DayColumn extends Component {
       columnElements.push(mucusIcon)
     }
 
-    columnElements.push(cycleDayLabel, dateLabel, horizontalGrid)
+    columnElements.push(cycleDayLabel, dateLabel)
 
     if(nfpLineInfo.drawFhmLine) {
       const fhmLine = (<View

components/chart/styles.js

@@ -42,8 +42,7 @@ const styles = {
       height: config.chartHeight,
       borderStyle: 'solid',
       borderColor: 'grey',
-      borderWidth: 1,
-      backgroundColor: 'transparent'
+      borderWidth: 0.5
     }
   },
   bleedingIcon: {
@@ -67,6 +66,9 @@ const styles = {
   yAxis: {
     height: config.chartHeight,
     width: config.columnWidth,
+    borderRightWidth: 0.5,
+    borderColor: 'lightgrey',
+    borderStyle: 'solid'
   },
   yAxisLabel: {
     position: 'absolute',
@@ -76,10 +78,12 @@ const styles = {
     fontWeight: 'bold'
   },
   horizontalGrid: {
+    position:'absolute',
     borderColor: 'lightgrey',
-    borderWidth: 1,
-    width: config.columnWidth,
-    borderStyle: 'solid'
+    borderWidth: 0.5,
+    width: '100%',
+    borderStyle: 'solid',
+    left: config.columnWidth
   },
   nfpLine: {
     borderColor: '#00b159',

components/chart/y-axis.js

@@ -37,8 +37,6 @@ export const yAxis = makeYAxis()
 export const horizontalGrid = yAxis.tickPositions.map(tick => {
   return (
     <View
-      position='absolute'
-      width='100%'
       top={tick}
       {...styles.horizontalGrid}
       key={tick}