Merge branch '246-bug-svg-errors' into 'master'

Resolve "bug: svg errors"

Closes #246

See merge request bloodyhealth/drip!111

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 } from 'react-native/Libraries/ART/ReactNativeART'
 import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
@@ -12,16 +12,20 @@ import { scaleObservable } from '../../local-storage'
 import config from '../../config'
 import AppText from '../app-text'
 import { shared as labels } from '../labels'
-import BleedingIcon from '../../assets/bleeding'
-import CervixIcon from '../../assets/cervix'
-import DesireIcon from '../../assets/desire'
-import MucusIcon from '../../assets/mucus'
-import NoteIcon from '../../assets/note'
-import PainIcon from '../../assets/pain'
-import SexIcon from '../../assets/sex'
+import DripIcon from '../../assets/drip-icons'
 import CycleDayIcon from '../../assets/home-circle'
 import nothingChanged from '../../db/db-unchanged'
 
+const symptomIcons = {
+  bleeding: <DripIcon size={16} name='drip-icon-bleeding' color={styles.iconShades.bleeding[3]}/>,
+  mucus: <DripIcon size={16} name='drip-icon-mucus' color={styles.iconShades.mucus[4]}/>,
+  cervix: <DripIcon size={16} name='drip-icon-cervix' color={styles.iconShades.cervix[3]}/>,
+  desire: <DripIcon size={16} name='drip-icon-desire' color={styles.iconShades.desire[2]}/>,
+  sex: <DripIcon size={16} name='drip-icon-sex' color={styles.iconShades.sex[2]}/>,
+  pain: <DripIcon size={16} name='drip-icon-pain' color={styles.iconShades.pain[0]}/>,
+  note: <DripIcon size={16} name='drip-icon-note' color={styles.iconShades.note[0]}/>
+}
+
 export default class CycleChart extends Component {
   constructor(props) {
     super(props)
@@ -151,16 +155,7 @@ export default class CycleChart extends Component {
                   height={this.symptomRowHeight /
                     this.symptomRowSymptoms.length}
                 >
-                  <Svg
-                    width={styles.yAxis.width * 0.8}
-                    height={this.symptomRowHeight /
-                      this.symptomRowSymptoms.length * 0.8}
-                    viewBox={symptomIcons[symptomName].viewBox}
-                  >
-                    <G fill={symptomIcons[symptomName].color}>
-                      {symptomIcons[symptomName].icon}
-                    </G>
-                  </Svg>
+                  {symptomIcons[symptomName]}
                 </View>
               })}
             </View>
@@ -168,15 +163,15 @@ export default class CycleChart extends Component {
               {makeYAxisLabels(this.columnHeight)}
             </View>
             <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
-              <Svg
-                width={styles.yAxis.width * 0.7}
-                height={styles.yAxis.width * 0.7}
-                viewBox='325 330 190 190'
+              <Surface
+                width={styles.yAxis.width * 0.8}
+                height={styles.yAxis.width * 0.8}
               >
-                <G fill="none" stroke="#1E0B7A" strokeWidth="10">
-                  <CycleDayIcon/>
-                </G>
-              </Svg>
+                <CycleDayIcon
+                  strokeWidth={10}
+                  scale={0.12}
+                />
+              </Surface>
               <AppText style={[
                 styles.column.label.date,
                 styles.yAxisLabels.dateLabel
@@ -232,41 +227,3 @@ function getTodayAndPreviousDays(n) {
 
   return range(earlierDate, today).reverse()
 }
-
-const symptomIcons = {
-  'bleeding': {
-    'viewBox': '10 10 320 400',
-    'color': styles.iconShades.bleeding[3],
-    'icon': <BleedingIcon strokeWidth={'5'}/>
-  },
-  'mucus': {
-    'viewBox': '10 10 320 400',
-    'color': styles.iconShades.mucus[4],
-    'icon': <MucusIcon/>
-  },
-  'cervix': {
-    'viewBox': '10 10 320 440',
-    'color': styles.iconShades.cervix[3],
-    'icon': <CervixIcon/>
-  },
-  'desire': {
-    'viewBox': '10 10 320 380',
-    'color': styles.iconShades.desire[2],
-    'icon': <DesireIcon/>
-  },
-  'sex': {
-    'viewBox': '10 10 320 400',
-    'color': styles.iconShades.sex[2],
-    'icon': <SexIcon/>
-  },
-  'pain': {
-    'viewBox': '10 10 300 400',
-    'color': styles.iconShades.pain[0],
-    'icon': <PainIcon/>
-  },
-  'note': {
-    'viewBox': '10 10 270 400',
-    'color': styles.iconShades.note[0],
-    'icon': <NoteIcon/>
-  },
-}

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,13 @@ export default class DayColumn extends Component {
     const symptomHeight = this.props.symptomHeight
 
     if(this.fhmAndLtl.drawLtlAt) {
-      const ltlLine = (<Line
-        x1={0}
-        y1={this.fhmAndLtl.drawLtlAt}
-        x2={config.columnWidth}
-        y2={this.fhmAndLtl.drawLtlAt}
-        {...styles.nfpLine}
+      const ltlLine = (<Shape
+        stroke={styles.nfpLine.stroke}
+        strokeWidth={styles.nfpLine.strokeWidth}
+        d={new Path()
+          .moveTo(0, this.fhmAndLtl.drawLtlAt)
+          .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
+        }
         key='ltl'
       />)
       columnElements.push(ltlLine)
@@ -80,12 +81,14 @@ export default class DayColumn extends Component {
 
     if (this.fhmAndLtl.drawFhmLine) {
       const x = styles.nfpLine.strokeWidth / 2
-      const fhmLine = (<Line
-        x1={x}
-        y1={x}
-        x2={x}
-        y2={this.props.columnHeight}
-        {...styles.nfpLine}
+      const fhmLine = (<Shape
+        fill="red"
+        stroke={styles.nfpLine.stroke}
+        strokeWidth={styles.nfpLine.strokeWidth}
+        d={new Path()
+          .moveTo(x, x)
+          .lineTo(x, this.props.columnHeight)
+        }
         key='fhm'
       />)
       columnElements.push(fhmLine)
@@ -125,9 +128,10 @@ export default class DayColumn extends Component {
 
     const column = (
       <G>
-        <Rect
-          height={this.props.chartHeight}
-          {...styles.column.rect}
+        <Shape
+          stroke={styles.column.stroke.color}
+          strokeWidth={styles.column.stroke.width}
+          d={new Path().lineTo(0, this.props.chartHeight)}
         />
         { columnElements }
       </G>
@@ -235,9 +239,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
-        cx={config.columnMiddle}
-        cy={y}
-        {...dotStyle}
+      <Shape
+        d={new Path()
+          .moveTo(config.columnMiddle, y - radius)
+          .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
-    x1={config.columnMiddle}
-    y1={currY}
-    x2={x}
-    y2={middleY}
-    {...lineStyle}
+  return <Shape
+    stroke={lineStyle.stroke}
+    d={new Path()
+      .moveTo(config.columnMiddle, currY)
+      .lineTo(x, middleY)
+    }
     key={x.toString()}
   />
 }

components/chart/drop.svg

@@ -1,12 +0,0 @@
-<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-  <path d="
-    M15 3
-    Q16.5 6.8 25 18
-    A12.8 12.8 0 1 1 5 18
-    Q13.5 6.8 15 3z
-  " />
-</svg>
-

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: {
-      x:'0',
-      y:'0',
-      width: config.columnWidth,
-      stroke: gridColor,
-      strokeWidth: gridLineWidth,
-      fill: 'transparent'
+    stroke: {
+      color: gridColor,
+      width: gridLineWidth,
     }
   },
   symptomIcon: {

components/cycle-day/cycle-day-overview.js

@@ -6,21 +6,13 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
-import Svg, { G } from 'react-native-svg'
 import Header from '../header'
 import { getCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import styles from '../../styles'
 import * as labels from './labels'
 import AppText from '../app-text'
-import BleedingIcon from '../../assets/bleeding'
-import CervixIcon from '../../assets/cervix'
-import DesireIcon from '../../assets/desire'
-import MucusIcon from '../../assets/mucus'
-import NoteIcon from '../../assets/note'
-import PainIcon from '../../assets/pain'
-import SexIcon from '../../assets/sex'
-import TemperatureIcon from '../../assets/temperature'
+import DripIcon from '../../assets/drip-icons'
 
 const bleedingLabels = labels.bleeding
 const feelingLabels = labels.mucus.feeling.categories
@@ -183,63 +175,63 @@ export default class CycleDayOverView extends Component {
               onPress={() => this.navigate('BleedingEditView')}
               data={this.getLabel('bleeding')}
               disabled={dateInFuture}
+              iconName='drip-icon-bleeding'
             >
-              <BleedingIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Temperature'
               onPress={() => this.navigate('TemperatureEditView')}
               data={this.getLabel('temperature')}
               disabled={dateInFuture}
+              iconName='drip-icon-temperature'
             >
-              <TemperatureIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Mucus'
               onPress={() => this.navigate('MucusEditView')}
               data={this.getLabel('mucus')}
               disabled={dateInFuture}
+              iconName='drip-icon-mucus'
             >
-              <MucusIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Cervix'
               onPress={() => this.navigate('CervixEditView')}
               data={this.getLabel('cervix')}
               disabled={dateInFuture}
+              iconName='drip-icon-cervix'
             >
-              <CervixIcon viewBox='10 10 320 440' />
             </SymptomBox>
             <SymptomBox
               title='Desire'
               onPress={() => this.navigate('DesireEditView')}
               data={this.getLabel('desire')}
               disabled={dateInFuture}
+              iconName='drip-icon-desire'
             >
-              <DesireIcon viewBox='10 10 320 380' />
             </SymptomBox>
             <SymptomBox
               title='Sex'
               onPress={() => this.navigate('SexEditView')}
               data={this.getLabel('sex')}
               disabled={dateInFuture}
+              iconName='drip-icon-sex'
             >
-              <SexIcon viewBox='10 10 320 400' />
             </SymptomBox>
             <SymptomBox
               title='Pain'
               onPress={() => this.navigate('PainEditView')}
               data={this.getLabel('pain')}
               disabled={dateInFuture}
+              iconName='drip-icon-pain'
             >
-              <PainIcon viewBox='10 10 300 400' />
             </SymptomBox>
             <SymptomBox
               title='Note'
               onPress={() => this.navigate('NoteEditView')}
               data={this.getLabel('note')}
+              iconName='drip-icon-note'
             >
-              <NoteIcon viewBox='10 10 270 400' />
             </SymptomBox>
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
@@ -267,20 +259,7 @@ class SymptomBox extends Component {
         disabled={this.props.disabled}
       >
         <View style={[styles.symptomBox, boxActive, disabledStyle]}>
-
-          {this.props.children ?
-            React.Children.map(this.props.children, child => {
-              return (
-                <Svg width={100} height={50} viewBox={child.props.viewBox}>
-                  <G fill={d ? 'white' : 'black'}>
-                    {child}
-                  </G>
-                </Svg>
-              )
-            })
-            : null
-          }
-
+          <DripIcon name={this.props.iconName} size={50} color={d ? 'white' : 'black'}/>
           <AppText style={[textActive, disabledStyle]}>
             {this.props.title}
           </AppText>

components/home.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { ScrollView, View, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
 import Icon from 'react-native-vector-icons/Entypo'
-import Svg, { G } from 'react-native-svg'
+import { Surface } from 'react-native/Libraries/ART/ReactNativeART'
 import { secondaryColor, cycleDayColor, periodColor } from '../styles'
 import { home as labels, bleedingPrediction as predictLabels, shared } from './labels'
 import CycleDayIcon from '../assets/home-circle'
@@ -73,15 +73,15 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Svg
+                <Surface
                   width={80}
                   height={80}
-                  viewBox='340 345 170 170'
                 >
-                  <G fill="none" stroke="#1E0B7A" strokeWidth="2">
-                    <CycleDayIcon/>
-                  </G>
-                </Svg>
+                  <CycleDayIcon
+                    strokeWidth={2}
+                    scale={0.46}
+                  />
+                </Surface>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperCycle]}>
                 <AppTextLight style={styles.iconText}>
@@ -107,7 +107,7 @@ export default class Home extends Component {
               style={styles.homeIconElement}
             >
               <View position='absolute'>
-                <Drop/>
+                <Drop scale={0.55}/>
               </View>
               <View style={[styles.homeIconTextWrapper, styles.wrapperDrop]}>
                 <AppTextLight style={styles.iconText}>