Place header as component

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

@@ -7,11 +7,10 @@ import {
   Dimensions
 } from 'react-native'
 import { LocalDate } from 'js-joda'
+import Header from '../header'
 import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import Icon from 'react-native-vector-icons/FontAwesome'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { formatDateForViewHeader } from './labels/format'
 import styles, { iconStyles } from '../../styles'
 import {
   bleeding as bleedingLabels,
@@ -24,8 +23,6 @@ import {
   intensity as intensityLabels
 } from './labels/labels'
 
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-
 export default class CycleDayOverView extends Component {
   constructor(props) {
     super(props)
@@ -51,30 +48,15 @@ export default class CycleDayOverView extends Component {
 
   render() {
     const cycleDay = this.state.cycleDay
+    const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
       <ScrollView>
-        <View style={ styles.cycleDayDateView }>
-          <MaterialIcon
-            name='arrow-left-drop-circle'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.goToCycleDay('before')}
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {formatDateForViewHeader(cycleDay.date)}
-            </Text>
-            {cycleDayNumber &&
-              <Text style={styles.cycleDayNumber} >
-                Cycle day {cycleDayNumber}
-              </Text>}
-          </View >
-          <MaterialIcon
-            name='arrow-right-drop-circle'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.goToCycleDay('after')}
-          />
-        </View >
+        <Header
+          cycleDayOverView={true}
+          cycleDayNumber={cycleDayNumber}
+          date={cycleDay.date}
+        />
         <View style={styles.symptomBoxesView}>
           <SymptomBox
             title='Bleeding'

components/cycle-day/symptoms/index.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
+import { ScrollView } from 'react-native'
+import Header from '../../header'
 import actionButtonModule from '../action-buttons'
 import BleedingEditView from './bleeding'
 import TemperatureEditView from './temperature'
@@ -51,13 +47,7 @@ export default class SymptomView extends Component {
   render() {
     return (
       <ScrollView>
-        <View style={ styles.header }>
-          <View>
-            <Text style={styles.dateHeader}>
-              {titles[this.state.visibleComponent]}
-            </Text>
-          </View >
-        </View >
+        <Header title={titles[this.state.visibleComponent]}/>
         {React.createElement(
           symptomViews[this.state.visibleComponent],
           {