Move Surface element to TemperatureColumn component

components/chart/day-column.js

@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
 import { TouchableOpacity } from 'react-native'
-import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { connect } from 'react-redux'
 
 import { setDate } from '../../slices/date'
 
 import { LocalDate } from 'js-joda'
-import config from '../../config'
 import { getCycleDay } from '../../db'
 
 import SymptomCell from './symptom-cell'
@@ -158,14 +156,12 @@ class DayColumn extends Component {
         }
         )}
 
-        <Surface width={config.columnWidth} height={columnHeight}>
+        <TemperatureColumn
-          <TemperatureColumn
+          horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
-            horizontalLinePosition={this.fhmAndLtl.drawLtlAt}
+          isVerticalLine={this.fhmAndLtl.drawFhmLine}
-            isVerticalLine={this.fhmAndLtl.drawFhmLine}
+          data={this.data && this.data.temperature}
-            data={this.data && this.data.temperature}
+          columnHeight={columnHeight}
-            columnHeight={columnHeight}
+        />
-          />
-        </Surface>
 
         <CycleDayLabel
           height={xAxisHeight}

components/chart/temperature-column.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Group, Path } from 'react-native/Libraries/ART/ReactNativeART'
+import { Surface , Path } from 'react-native/Libraries/ART/ReactNativeART'
 
 import ChartLine from './chart-line'
 import DotAndLine from './dot-and-line'
@@ -19,7 +19,7 @@ const TemperatureColumn = ({
   const x = styles.nfpLine.strokeWidth / 2
 
   return (
-    <Group>
+    <Surface width={config.columnWidth} height={columnHeight}>
 
       <ChartLine
         path={new Path().lineTo(0, columnHeight)}
@@ -49,7 +49,8 @@ const TemperatureColumn = ({
         leftTemperatureExclude={data.leftTemperatureExclude}
         key='dotandline'
       />}
-    </Group>
+
+    </Surface>
   )
 }