Move YAxis & HorizontalGrid components in a common conditional expression

components/chart/chart.js

@@ -2,19 +2,19 @@ import React, { Component } from 'react'
 import { View, FlatList, ActivityIndicator } from 'react-native'
 import { LocalDate } from 'js-joda'
 
+import AppLoadingView from '../app-loading'
 import YAxis from './y-axis'
 import nfpLines from './nfp-lines'
 import DayColumn from './day-column'
 import HorizontalGrid from './horizontal-grid'
 
 import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
-import styles from './styles'
+import nothingChanged from '../../db/db-unchanged'
 import { scaleObservable } from '../../local-storage'
+
 import config from '../../config'
 
-import AppLoadingView from '../app-loading'
+import styles from './styles'
-
-import nothingChanged from '../../db/db-unchanged'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -121,25 +121,24 @@ export default class CycleChart extends Component {
     return (
       <View
         onLayout={this.onLayout}
-        style={{ flexDirection: 'row', flex: 1 }}
+        style={styles.container}
       >
         {!chartLoaded && <AppLoadingView />}
 
         {chartHeight && chartLoaded && (
-          <YAxis
+          <React.Fragment>
-            height={this.columnHeight}
+            <YAxis
-            symptomsToDisplay={this.symptomRowSymptoms}
+              height={this.columnHeight}
-            symptomsSectionHeight={this.symptomRowHeight}
+              symptomsToDisplay={this.symptomRowSymptoms}
-          />
+              symptomsSectionHeight={this.symptomRowHeight}
+            />
+            <HorizontalGrid
+              height={this.columnHeight}
+              startPosition={this.symptomRowHeight}
+            />
+          </React.Fragment>
         )}
 
-        {chartHeight && chartLoaded && (
-          <HorizontalGrid
-            height={this.columnHeight}
-            startPosition={this.symptomRowHeight}
-          />)
-        }
-
         {chartHeight &&
           <FlatList
             horizontal={true}

components/chart/styles.js

@@ -25,6 +25,10 @@ const orangeColor = '#bc6642'
 const mintColor = '#6ca299'
 
 const styles = {
+  container: {
+    flexDirection: 'row',
+    flex: 1,
+  },
   curve: {
     stroke: colorTemperature,
     strokeWidth: lineWidth,