Replace svg with ART in chart

components/chart/chart.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
-import Svg, { G } from 'react-native-svg'
+import { Surface, Group as G } from 'react-native/Libraries/ART/ReactNativeART'
 import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
@@ -151,7 +151,7 @@ export default class CycleChart extends Component {
                   height={this.symptomRowHeight /
                     this.symptomRowSymptoms.length}
                 >
-                  <Svg
+                  <Surface
                     width={styles.yAxis.width * 0.8}
                     height={this.symptomRowHeight /
                       this.symptomRowSymptoms.length * 0.8}
@@ -160,7 +160,7 @@ export default class CycleChart extends Component {
                     <G fill={symptomIcons[symptomName].color}>
                       {symptomIcons[symptomName].icon}
                     </G>
-                  </Svg>
+                  </Surface>
                 </View>
               })}
             </View>
@@ -168,7 +168,7 @@ export default class CycleChart extends Component {
               {makeYAxisLabels(this.columnHeight)}
             </View>
             <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <Svg
+              <Surface
                 width={styles.yAxis.width * 0.7}
                 height={styles.yAxis.width * 0.7}
                 viewBox='325 330 190 190'
@@ -176,7 +176,7 @@ export default class CycleChart extends Component {
                 <G fill="none" stroke="#1E0B7A" strokeWidth="10">
                   <CycleDayIcon/>
                 </G>
-              </Svg>
+              </Surface>
               <AppText style={[
                 styles.column.label.date,
                 styles.yAxisLabels.dateLabel

components/chart/day-column.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {
   Text, View, TouchableOpacity
 } from 'react-native'
-import Svg,{ G, Rect, Line } from 'react-native-svg'
+import { Surface, Group as G, Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 import { LocalDate } from 'js-joda'
 import moment from 'moment'
 import styles from './styles'
@@ -67,12 +67,12 @@ export default class DayColumn extends Component {
     const symptomHeight = this.props.symptomHeight
 
     if(this.fhmAndLtl.drawLtlAt) {
-      const ltlLine = (<Line
+      const ltlLine = (<Shape
-        x1={0}
+        fill = "red"
-        y1={this.fhmAndLtl.drawLtlAt}
+        d={new Path()
-        x2={config.columnWidth}
+          .moveTo(0, this.fhmAndLtl.drawLtlAt)
-        y2={this.fhmAndLtl.drawLtlAt}
+          .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
-        {...styles.nfpLine}
+        }
         key='ltl'
       />)
       columnElements.push(ltlLine)
@@ -80,12 +80,12 @@ export default class DayColumn extends Component {
 
     if (this.fhmAndLtl.drawFhmLine) {
       const x = styles.nfpLine.strokeWidth / 2
-      const fhmLine = (<Line
+      const fhmLine = (<Shape
-        x1={x}
+        fill="red"
-        y1={x}
+        d={new Path()
-        x2={x}
+          .moveTo(x, x)
-        y2={this.props.columnHeight}
+          .lineTo(x, this.props.columnHeight)
-        {...styles.nfpLine}
+        }
         key='fhm'
       />)
       columnElements.push(fhmLine)
@@ -123,11 +123,18 @@ export default class DayColumn extends Component {
       </Text>
     )
 
+    const colWidth = config.columnWidth
+    const colHeight = this.props.chartHeight
     const column = (
       <G>
-        <Rect
+        <Shape
-          height={this.props.chartHeight}
+          stroke={styles.column.stroke.color}
-          {...styles.column.rect}
+          stroke-width={styles.column.stroke.width}
+          d={new Path()
+            .lineTo(0, colHeight)
+            .moveTo(colWidth, colHeight)
+            .lineTo(colWidth, 0)
+          }
         />
         { columnElements }
       </G>
@@ -235,9 +242,9 @@ export default class DayColumn extends Component {
           })}
         </View>
 
-        <Svg width={config.columnWidth} height={this.props.columnHeight}>
+        <Surface width={config.columnWidth} height={this.props.columnHeight}>
           {column}
-        </Svg>
+        </Surface>
 
         <View style={{height: this.props.xAxisHeight}}>
           {cycleDayLabel}

components/chart/dot-and-line.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Circle, Line } from 'react-native-svg'
+import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
 
 import styles from './styles'
 import config from '../../config'
@@ -27,11 +27,15 @@ export default class DotAndLine extends Component {
     }
 
     const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
+    const radius = dotStyle.r
     const dot = (
-      <Circle
+      <Shape
-        cx={config.columnMiddle}
+        d={new Path()
-        cy={y}
+          .moveTo(config.columnMiddle, y - radius)
-        {...dotStyle}
+          .arc(0, radius * 2, radius)
+          .arc(0, radius * -2, radius)
+        }
+        fill={dotStyle.fill}
         key='dot'
       />
     )
@@ -42,12 +46,12 @@ export default class DotAndLine extends Component {
 function makeLine(currY, middleY, x, excludeLine) {
   const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
 
-  return <Line
+  return <Shape
-    x1={config.columnMiddle}
+    stroke={lineStyle.stroke}
-    y1={currY}
+    d={new Path()
-    x2={x}
+      .moveTo(config.columnMiddle, currY)
-    y2={middleY}
+      .lineTo(x, middleY)
-    {...lineStyle}
+    }
     key={x.toString()}
   />
 }

components/chart/styles.js

@@ -3,10 +3,10 @@ import { shadesOfRed, cycleDayColor } from '../../styles/index'
 
 const colorTemperature = '#765285'
 const colorTemperatureLight = '#a67fb5'
-const dotRadius = 5
+export const dotRadius = 5
 const lineWidth = 1.5
 const colorLtl = '#feb47b'
-const gridColor = 'lightgrey'
+const gridColor = '#d3d3d3'
 const gridLineWidth = 0.5
 const numberLabelFontSize = 13
 
@@ -41,13 +41,9 @@ const styles = {
         textAlign: 'center',
       }
     },
-    rect: {
+    stroke: {
-      x:'0',
+      color: gridColor,
-      y:'0',
+      width: gridLineWidth,
-      width: config.columnWidth,
-      stroke: gridColor,
-      strokeWidth: gridLineWidth,
-      fill: 'transparent'
     }
   },
   symptomIcon: {