Attempt to recreate with CSS

android/app/build.gradle

@@ -77,6 +77,7 @@ project.ext.react = [
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
 /**
  * Set this to true to create two separate APKs instead of one:
@@ -137,9 +138,9 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-vector-icons')
     compile project(':react-native-share')
     compile project(':realm')
-    compile project(':react-native-svg')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/drip/MainApplication.java

@@ -3,10 +3,10 @@ package com.drip;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import cl.json.RNSharePackage;
 import cl.json.ShareApplication;
 import io.realm.react.RealmReactPackage;
-import com.horcrux.svg.SvgPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -27,9 +27,9 @@ public class MainApplication extends Application implements ReactApplication, Sh
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new VectorIconsPackage(),
             new RNSharePackage(),
-            new RealmReactPackage(),
+            new RealmReactPackage()
-            new SvgPackage()
       );
     }
 

android/settings.gradle

@@ -1,9 +1,9 @@
 rootProject.name = 'drip'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-share'
 project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
 include ':realm'
 project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
-include ':react-native-svg'
-project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 
 include ':app'

components/chart/chart.js

@@ -1,15 +1,8 @@
 import React, { Component } from 'react'
-import { Text as ReactNativeText, View, FlatList, ScrollView } from 'react-native'
+import { Text, View, FlatList, ScrollView } from 'react-native'
 import range from 'date-range'
-import Svg,{
-  G,
-  Rect,
-  Text,
-  Circle,
-  Line,
-  Path
-} from 'react-native-svg'
 import { LocalDate } from 'js-joda'
+import Icon from 'react-native-vector-icons/Entypo'
 import { getCycleDay, getOrCreateCycleDay, cycleDaysSortedByDate } from '../../db'
 import cycleModule from '../../lib/cycle'
 import styles from './styles'
@@ -46,83 +39,118 @@ export default class CycleChart extends Component {
   }
 
   placeHorizontalGrid() {
-    return yAxis.tickPositions.map(tick => {
-      return (
-        <Line
-          x1={0}
-          y1={tick}
-          x2={config.columnWidth}
-          y2={tick}
-          {...styles.horizontalGrid}
-          key={tick}
-        />
-      )
-    })
   }
 
   makeDayColumn({ dateString, cycleDay, y }, index) {
     const cycleDayNumber = getCycleDayNumber(dateString)
     const label = styles.column.label
-    const dateLabel = dateString.split('-').slice(1).join('-')
+    const dateText = dateString.split('-').slice(1).join('-')
     const getFhmAndLtlInfo = setUpFertilityStatusFunc()
     const nfpLineInfo = getFhmAndLtlInfo(dateString, cycleDay)
 
-    return (
+    const horizontalGrid = yAxis.labels.map((_, i) => {
-      <G onPress={() => this.passDateToDayView(dateString)}>
+      return React.createElement(
-        <Rect {...styles.column.rect} />
+        View,
-        {nfpLineInfo.drawFhmLine ?
+        {
-          <Line
+          style: Object.assign(
-            x1={0 + styles.nfpLine.strokeWidth / 2}
+            {},
-            y1="20"
+            styles.horizontalGrid,
-            x2={0 + styles.nfpLine.strokeWidth / 2}
+            { marginTop: yAxis.tickDistance }
-            y2={config.chartHeight - 20}
+          ),
-            {...styles.nfpLine}
+          key: i.toString()
-          /> : null}
-
-        {this.placeHorizontalGrid()}
-
-        <Text {...label.number} y={config.cycleDayNumberRowY}>
-          {cycleDayNumber}
-        </Text>
-        <Text {...label.date} y={config.dateRowY}>
-          {dateLabel}
-        </Text>
-
-        {cycleDay && cycleDay.bleeding ?
-          <Path {...styles.bleedingIcon}
-            d="M15 3
-              Q16.5 6.8 25 18
-              A12.8 12.8 0 1 1 5 18
-              Q13.5 6.8 15 3z" />
-          : null}
-
-        {nfpLineInfo.drawLtlAt ?
-          <Line
-            x1="0"
-            y1={nfpLineInfo.drawLtlAt}
-            x2={config.columnWidth}
-            y2={nfpLineInfo.drawLtlAt}
-            {...styles.nfpLine}
-          /> : null}
-
-        {y ?
-          this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
-          : null
         }
-        {cycleDay && cycleDay.mucus ?
+      )
-          <Circle
+    })
-            {...styles.mucusIcon}
+    //TODO move these so they are visible
-            fill={styles.mucusIconShades[cycleDay.mucus.value]}
+    const cycleDayLabel = (
-          /> : null}
+      <Text {...label.number} y={config.cycleDayNumberRowY}>
+        {cycleDayNumber}
+      </Text>)
+    const dateLabel = (
+      <Text {...label.date} y={config.dateRowY}>
+        {dateText}
+      </Text>
+    )
+    const columnElements = []
+    if (cycleDay && cycleDay.bleeding) {
+      console.log('ever?')
+      columnElements.push(
+        <Icon
+          name='drop'
+          position='absolute'
+          top = {10}
+          left = {20}
+          size={30}
+          color='#900'
+          style={{ marginTop: 20 }}
+        />
+      )
+    }
+    columnElements.push(...[horizontalGrid, cycleDayLabel, dateLabel])
+    //   {nfpLineInfo.drawFhmLine ?
+    //     <Line
+    //       x1={0 + styles.nfpLine.strokeWidth / 2}
+    //       y1="20"
+    //       x2={0 + styles.nfpLine.strokeWidth / 2}
+    //       y2={config.chartHeight - 20}
+    //       {...styles.nfpLine}
+    //     /> : null}
+    // />)
 
-        {y ?
+    // onPress: () => this.passDateToDayView(dateString),
-          this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
+
-          : null}
+    //     <Path {...styles.bleedingIcon}
-      </G>
+    //       d="M15 3
+    //         Q16.5 6.8 25 18
+    //         A12.8 12.8 0 1 1 5 18
+    //         Q13.5 6.8 15 3z" />
+    //     : null}
+
+    //   {nfpLineInfo.drawLtlAt ?
+    //     <Line
+    //       x1="0"
+    //       y1={nfpLineInfo.drawLtlAt}
+    //       x2={config.columnWidth}
+    //       y2={nfpLineInfo.drawLtlAt}
+    //       {...styles.nfpLine}
+    //     /> : null}
+
+    if (y) {
+      columnElements.push(this.drawDotAndLines(y, cycleDay.temperature.exclude, index))
+    }
+    //   {cycleDay && cycleDay.mucus ?
+    //     <Circle
+    //       {...styles.mucusIcon}
+    //       fill={styles.mucusIconShades[cycleDay.mucus.value]}
+    //     /> : null}
+
+    //   {y ?
+    //     this.drawDotAndLines(y, cycleDay.temperature.exclude, index)
+    //     : null} */}
+
+    return React.createElement(
+      View,
+      {
+        style: styles.column.rect,
+        key: index.toString()
+      },
+      columnElements
     )
   }
 
   drawDotAndLines(currY, exclude, index) {
+    /*       <View
+        width='150%'
+        borderStyle = 'solid'
+        borderColor = 'red'
+        borderWidth = {1}
+        position = 'absolute'
+        top={200}
+        style={{
+          transform: [{rotateZ: '30deg'}]
+        }}
+      />
+    ) */
     let lineToRight
     let lineToLeft
     const cols = this.state.columns
@@ -144,7 +172,7 @@ export default class CycleChart extends Component {
     const thereIsADotToTheRight = index > 0 && cols[index - 1].y
     const thereIsADotToTheLeft = index < cols.length - 1 && cols[index + 1].y
 
-    if (thereIsADotToTheRight) {
+    /*     if (thereIsADotToTheRight) {
       const otherDot = cols[index - 1]
       const excludedLine = otherDot.cycleDay.temperature.exclude || exclude
       lineToRight = makeLine(otherDot.y, config.columnWidth, excludedLine)
@@ -153,18 +181,20 @@ export default class CycleChart extends Component {
       const otherDot = cols[index + 1]
       const excludedLine = otherDot.cycleDay.temperature.exclude || exclude
       lineToLeft = makeLine(otherDot.y, 0, excludedLine)
-    }
+    } */
 
     const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
-    return (<G>
+    return [
-      {lineToRight}
+      /* {lineToRight}
-      {lineToLeft}
+      {lineToLeft} */
-      <Circle
+      <View
-        cx={config.columnMiddle}
+        position='absolute'
-        cy={currY}
+        left={config.columnMiddle - dotStyle.width / 2}
-        {...dotStyle}
+        top={currY - dotStyle.width / 2}
+        style = {dotStyle}
+        key='0'
       />
-    </G>)
+    ]
   }
 
   render() {
@@ -177,15 +207,11 @@ export default class CycleChart extends Component {
           showsHorizontalScrollIndicator={false}
           data={this.state.columns}
           renderItem={({ item, index }) => {
-            return (
+            return this.makeDayColumn(item, index)
-              <Svg width={config.columnWidth} height={config.chartHeight}>
-                {this.makeDayColumn(item, index)}
-              </Svg>
-            )
           }}
           keyExtractor={item => item.dateString}
-        >
+          initialNumToRender={20}
-        </FlatList>
+        />
       </ScrollView>
     )
   }
@@ -235,7 +261,6 @@ function makeYAxis() {
   const numberOfTicks = (scaleMax - scaleMin) * 2
   const tickDistance = config.chartHeight / numberOfTicks
 
-  const tickPositions = []
   const labels = []
   // for style reasons, we don't want the first and last tick
   for (let i = 1; i < numberOfTicks - 1; i++) {
@@ -246,16 +271,15 @@ function makeYAxis() {
     // to reliably place the label vertically centered to the grid
     style.top = y - 8
     labels.push(
-      <ReactNativeText
+      <Text
         style={{...style}}
         key={i}>
         {scaleMax - i * 0.5}
-      </ReactNativeText>
+      </Text>
     )
-    tickPositions.push(y)
   }
 
-  return {labels, tickPositions}
+  return {labels, tickDistance}
 }
 
 function setUpFertilityStatusFunc() {

components/chart/config.js

@@ -5,7 +5,7 @@ const config = {
     low: 33,
     high: 40
   },
-  xAxisRangeInDays: 40
+  xAxisRangeInDays: 30
 }
 
 const margin = 3

components/chart/drop.svg

@@ -0,0 +1,12 @@
+<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

@@ -11,8 +11,10 @@ const styles = {
     strokeDashArray: [4]
   },
   curveDots: {
-    fill: '#00aedb',
+    backgroundColor: '#00aedb',
-    r: 6
+    width: 15,
+    height: 15,
+    borderRadius: 50
   },
   curveDotsExcluded: {
     fill: 'lightgrey',
@@ -33,13 +35,12 @@ const styles = {
       }
     },
     rect: {
-      fill: '#f9f9f9',
-      strokeWidth: 1,
-      stroke: 'grey',
-      x: 0,
-      y: 0,
       width: config.columnWidth,
-      height: config.chartHeight
+      height: config.chartHeight,
+      borderStyle: 'solid',
+      borderColor: 'grey',
+      borderWidth: 1,
+      backgroundColor: 'transparent'
     }
   },
   bleedingIcon: {
@@ -72,8 +73,10 @@ const styles = {
     fontWeight: 'bold'
   },
   horizontalGrid: {
-    stroke: 'lightgrey',
+    borderColor: 'lightgrey',
-    strokeWidth: 1
+    borderWidth: 1,
+    width: config.columnWidth,
+    borderStyle: 'solid'
   },
   nfpLine: {
     stroke: '#00b159',

ios/drip.xcodeproj/project.pbxproj

@@ -37,12 +37,25 @@
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
-		EFD2F9E5E59248D9AD6EBABA /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F4A1722D79F04D5EB528E21A /* libRNSVG.a */; };
-		934282049FA3497D9062CEC1 /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5ADC07BB282A481EBD5FD2A2 /* libRNSVG-tvOS.a */; };
 		089A8A31B3244EB381D3BA67 /* libRealmReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7A5827160B914D2B99C47381 /* libRealmReact.a */; };
 		62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 9AEBF0735214455AAEDF56D5 /* libc++.tbd */; };
 		D91133DCE120440893E2FD2E /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = CD8C8B91E0A747B3883A0D56 /* libz.tbd */; };
 		26DC04B498C64CE5AAA0C4F8 /* libRNShare.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A8B59389C2FC4F19BD30ABC3 /* libRNShare.a */; };
+		AED64B7892744F21B3A156BB /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */; };
+		283136C9CE964E07BD52BE20 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A2811C9225AC4EAC93FCD2DB /* Entypo.ttf */; };
+		87508EF4BE7548878981BE9E /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B41CDA1146DB4492B1796444 /* EvilIcons.ttf */; };
+		4E04B0A1FECA4915AD4A6CCF /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F59A471BDE4144A1A41D4B52 /* Feather.ttf */; };
+		20146F2E2E9E4EB289472E81 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EE8CBB8533DA48A9A78697C3 /* FontAwesome.ttf */; };
+		AF2EAEC3772C41A49A4AF117 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 044ECCD7D9B8470782A453CA /* FontAwesome5_Brands.ttf */; };
+		3F0F9C6368674C66AEAC3807 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C783C08EEEB541D2A30FEE44 /* FontAwesome5_Regular.ttf */; };
+		7D48A7B9435741CCA9678C42 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0BE71E2D5A634744A662DF44 /* FontAwesome5_Solid.ttf */; };
+		8E4308D3D8614B0BACABF058 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = EA87C1DB160640E0907EE056 /* Foundation.ttf */; };
+		DB93C03E56074FB78F7F5B7C /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8F2C7294680449AEA698AF76 /* Ionicons.ttf */; };
+		96687426D3D64D0F8E15FE4B /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */; };
+		DF31809C83AD48569741458C /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B39DD260535A4B0EB31A3E0A /* MaterialIcons.ttf */; };
+		DB91E6CCC3EB4A549D947797 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4902D5DCD46748BD8DC403FD /* Octicons.ttf */; };
+		3DF2498A20844F298CD84CC3 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E954835D62BD45F0A5FFC523 /* SimpleLineIcons.ttf */; };
+		A1410AC4C98A49B2820D9E45 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B6F5078F7DEC470782757471 /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -348,15 +361,28 @@
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
-		8316A5AD64274E6FBA6C9FFE /* RNSVG.xcodeproj */ = {isa = PBXFileReference; name = "RNSVG.xcodeproj"; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
-		F4A1722D79F04D5EB528E21A /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
-		5ADC07BB282A481EBD5FD2A2 /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; name = "libRNSVG-tvOS.a"; path = "libRNSVG-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 		7F6C9FA9B66B453CA602B334 /* RealmReact.xcodeproj */ = {isa = PBXFileReference; name = "RealmReact.xcodeproj"; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		7A5827160B914D2B99C47381 /* libRealmReact.a */ = {isa = PBXFileReference; name = "libRealmReact.a"; path = "libRealmReact.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 		9AEBF0735214455AAEDF56D5 /* libc++.tbd */ = {isa = PBXFileReference; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; fileEncoding = undefined; lastKnownFileType = sourcecode.text-based-dylib-definition; explicitFileType = undefined; includeInIndex = 0; };
 		CD8C8B91E0A747B3883A0D56 /* libz.tbd */ = {isa = PBXFileReference; name = "libz.tbd"; path = "usr/lib/libz.tbd"; sourceTree = SDKROOT; fileEncoding = undefined; lastKnownFileType = sourcecode.text-based-dylib-definition; explicitFileType = undefined; includeInIndex = 0; };
 		4E6AB77B55F2491487B6124E /* RNShare.xcodeproj */ = {isa = PBXFileReference; name = "RNShare.xcodeproj"; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
 		A8B59389C2FC4F19BD30ABC3 /* libRNShare.a */ = {isa = PBXFileReference; name = "libRNShare.a"; path = "libRNShare.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		D1E5ACC4B66345868F556374 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; name = "RNVectorIcons.xcodeproj"; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		F5039D0A572B4BBCB7995891 /* libRNVectorIcons.a */ = {isa = PBXFileReference; name = "libRNVectorIcons.a"; path = "libRNVectorIcons.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		A2811C9225AC4EAC93FCD2DB /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B41CDA1146DB4492B1796444 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		F59A471BDE4144A1A41D4B52 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		EE8CBB8533DA48A9A78697C3 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		044ECCD7D9B8470782A453CA /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C783C08EEEB541D2A30FEE44 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0BE71E2D5A634744A662DF44 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		EA87C1DB160640E0907EE056 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		8F2C7294680449AEA698AF76 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B39DD260535A4B0EB31A3E0A /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		4902D5DCD46748BD8DC403FD /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E954835D62BD45F0A5FFC523 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B6F5078F7DEC470782757471 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -385,11 +411,11 @@
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
-				EFD2F9E5E59248D9AD6EBABA /* libRNSVG.a in Frameworks */,
 				089A8A31B3244EB381D3BA67 /* libRealmReact.a in Frameworks */,
 				62F2A4645AC84CDC9506FF27 /* libc++.tbd in Frameworks */,
 				D91133DCE120440893E2FD2E /* libz.tbd in Frameworks */,
 				26DC04B498C64CE5AAA0C4F8 /* libRNShare.a in Frameworks */,
+				AED64B7892744F21B3A156BB /* libRNVectorIcons.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -579,9 +605,9 @@
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
-				8316A5AD64274E6FBA6C9FFE /* RNSVG.xcodeproj */,
 				7F6C9FA9B66B453CA602B334 /* RealmReact.xcodeproj */,
 				4E6AB77B55F2491487B6124E /* RNShare.xcodeproj */,
+				D1E5ACC4B66345868F556374 /* RNVectorIcons.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -603,6 +629,7 @@
 				00E356EF1AD99517003FC87E /* dripTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				006C39A0B9774387BC5ACA43 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -629,6 +656,28 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		006C39A0B9774387BC5ACA43 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				A2811C9225AC4EAC93FCD2DB /* Entypo.ttf */,
+				B41CDA1146DB4492B1796444 /* EvilIcons.ttf */,
+				F59A471BDE4144A1A41D4B52 /* Feather.ttf */,
+				EE8CBB8533DA48A9A78697C3 /* FontAwesome.ttf */,
+				044ECCD7D9B8470782A453CA /* FontAwesome5_Brands.ttf */,
+				C783C08EEEB541D2A30FEE44 /* FontAwesome5_Regular.ttf */,
+				0BE71E2D5A634744A662DF44 /* FontAwesome5_Solid.ttf */,
+				EA87C1DB160640E0907EE056 /* Foundation.ttf */,
+				8F2C7294680449AEA698AF76 /* Ionicons.ttf */,
+				5D8CEEF11CF346C7A641F4EC /* MaterialCommunityIcons.ttf */,
+				B39DD260535A4B0EB31A3E0A /* MaterialIcons.ttf */,
+				4902D5DCD46748BD8DC403FD /* Octicons.ttf */,
+				E954835D62BD45F0A5FFC523 /* SimpleLineIcons.ttf */,
+				B6F5078F7DEC470782757471 /* Zocial.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -1075,6 +1124,20 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				283136C9CE964E07BD52BE20 /* Entypo.ttf in Resources */,
+				87508EF4BE7548878981BE9E /* EvilIcons.ttf in Resources */,
+				4E04B0A1FECA4915AD4A6CCF /* Feather.ttf in Resources */,
+				20146F2E2E9E4EB289472E81 /* FontAwesome.ttf in Resources */,
+				AF2EAEC3772C41A49A4AF117 /* FontAwesome5_Brands.ttf in Resources */,
+				3F0F9C6368674C66AEAC3807 /* FontAwesome5_Regular.ttf in Resources */,
+				7D48A7B9435741CCA9678C42 /* FontAwesome5_Solid.ttf in Resources */,
+				8E4308D3D8614B0BACABF058 /* Foundation.ttf in Resources */,
+				DB93C03E56074FB78F7F5B7C /* Ionicons.ttf in Resources */,
+				96687426D3D64D0F8E15FE4B /* MaterialCommunityIcons.ttf in Resources */,
+				DF31809C83AD48569741458C /* MaterialIcons.ttf in Resources */,
+				DB91E6CCC3EB4A549D947797 /* Octicons.ttf in Resources */,
+				3DF2498A20844F298CD84CC3 /* SimpleLineIcons.ttf in Resources */,
+				A1410AC4C98A49B2820D9E45 /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1212,9 +1275,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Debug;
@@ -1239,9 +1302,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Release;
@@ -1263,9 +1326,9 @@
 				VERSIONING_SYSTEM = "apple-generic";
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Debug;
@@ -1286,9 +1349,9 @@
 				VERSIONING_SYSTEM = "apple-generic";
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Release;
@@ -1322,9 +1385,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Debug;
@@ -1358,9 +1421,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Release;
@@ -1393,9 +1456,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Debug;
@@ -1428,9 +1491,9 @@
 				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
-					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/realm/src/**",
 					"$(SRCROOT)/../node_modules/react-native-share/ios",
+					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 			};
 			name = Release;

ios/drip/Info.plist

@@ -39,9 +39,8 @@
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
 	<dict>
 		<key>NSExceptionDomains</key>
 		<dict>
@@ -52,5 +51,22 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package-lock.json

@@ -2376,15 +2376,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "color": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
-      "integrity": "sha512-ubUCVVKfT7r2w2D3qtHakj8mbmKms+tThR8gI8zEYCbUBl8/voqFGt3kgBqGwXAopgXybnkuOq+qMYCRrp4cXw==",
-      "requires": {
-        "color-convert": "^1.9.1",
-        "color-string": "^1.5.2"
-      }
-    },
     "color-convert": {
       "version": "1.9.2",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
@@ -2398,15 +2389,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok="
     },
-    "color-string": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
-      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -6444,16 +6426,6 @@
       "resolved": "https://registry.npmjs.org/react-native-simple-radio-button/-/react-native-simple-radio-button-2.7.2.tgz",
       "integrity": "sha512-BdlllHsC/gYJtxPJ2tshDWN8CzmlGg1G9uB+Lu4FRGvGkwhvMtJ/uNShMbvxu134xosH/feri6HQgLGlIT202Q=="
     },
-    "react-native-svg": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.5.1.tgz",
-      "integrity": "sha512-Fnn89loVOeek0NrSQ9sM13eXCPn/BK16Xvx8BgzZpoTx6/SEaoxi3kPLVzAbHLiV7VHq1opSkNcvRd+2/wUOOw==",
-      "requires": {
-        "color": "^2.0.1",
-        "lodash": "^4.16.6",
-        "pegjs": "^0.10.0"
-      }
-    },
     "react-native-tab-view": {
       "version": "0.0.77",
       "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz",
@@ -6462,6 +6434,38 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-native-vector-icons": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-5.0.0.tgz",
+      "integrity": "sha512-3ZmLGhQFk5QeHuttx0tOpghXhpVMGwXzb3pVaW/M8Qj0qkcg7koVyZmoR9vABQuxFC6KbM3l6/WLYZPh2aGfuQ==",
+      "requires": {
+        "lodash": "^4.0.0",
+        "prop-types": "^15.5.10",
+        "yargs": "^8.0.2"
+      },
+      "dependencies": {
+        "yargs": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+          "requires": {
+            "camelcase": "^4.1.0",
+            "cliui": "^3.2.0",
+            "decamelize": "^1.1.1",
+            "get-caller-file": "^1.0.1",
+            "os-locale": "^2.0.0",
+            "read-pkg-up": "^2.0.0",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^1.0.1",
+            "set-blocking": "^2.0.0",
+            "string-width": "^2.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^3.2.1",
+            "yargs-parser": "^7.0.0"
+          }
+        }
+      }
+    },
     "react-navigation": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-2.10.0.tgz",
@@ -7437,21 +7441,6 @@
         }
       }
     },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-        }
-      }
-    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",

package.json

@@ -27,7 +27,7 @@
     "react-native-modal-datetime-picker-nevo": "^4.11.0",
     "react-native-share": "^1.1.0",
     "react-native-simple-radio-button": "^2.7.1",
-    "react-native-svg": "^6.3.1",
+    "react-native-vector-icons": "^5.0.0",
     "react-navigation": "^2.0.4",
     "realm": "^2.7.1",
     "uuid": "^3.2.1"