Feature/ios launch

components/chart/chart.js

@@ -1,6 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  PixelRatio,
+  StyleSheet,
+  View
+} from 'react-native'
 
 import AppLoadingView from '../common/app-loading'
 import AppPage from '../common/app-page'
@@ -22,9 +29,10 @@ import { makeColumnInfo, nfpLines } from '../helpers/chart'
 
 import {
   CHART_COLUMN_WIDTH,
-  SYMPTOMS,
+  CHART_GRID_LINE_HORIZONTAL_WIDTH,
   CHART_SYMPTOM_HEIGHT_RATIO,
-  CHART_XAXIS_HEIGHT_RATIO
+  CHART_XAXIS_HEIGHT_RATIO,
+  SYMPTOMS
 } from '../../config'
 import { shared } from '../../i18n/en/labels'
 import { Colors, Spacing } from '../../styles'
@@ -105,9 +113,13 @@ class CycleChart extends Component {
 
     this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
     const remainingHeight = height * 0.7 - this.xAxisHeight
-    this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
-    this.symptomRowHeight = this.symptomRowSymptoms.length *
-      this.symptomHeight
+    this.symptomHeight = PixelRatio.roundToNearestPixel(
+      remainingHeight
+      * CHART_SYMPTOM_HEIGHT_RATIO
+    )
+    this.symptomRowHeight = PixelRatio.roundToNearestPixel(
+      this.symptomRowSymptoms.length * this.symptomHeight
+    ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
     this.columnHeight = remainingHeight - this.symptomRowHeight
     const chartHeight = this.shouldShowTemperatureColumn ?
       height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)

components/chart/tick.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import AppText from '../common/app-text'
 
 import { Sizes } from '../../styles'
+import { CHART_TICK_WIDTH } from '../../config'
 
 const Tick = ({ yPosition, height, isBold, shouldShowLabel, label }) => {
   const top = yPosition - height / 2
@@ -28,16 +29,14 @@ Tick.propTypes = {
 
 
 const text = {
-  lineHeight: Sizes.base,
-  right: 4,
-  textAlign: 'right'
+  textAlign: 'right',
 }
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     position: 'absolute',
     right: 0,
-    width: 40
+    width: CHART_TICK_WIDTH
   },
   textBold: {
     fontSize: Sizes.base,