Place header as component

components/calendar.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
+import Header from './header'
 import * as styles from '../styles'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
 
@@ -34,12 +35,15 @@ export default class CalendarView extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View>
-        <CalendarList
+        <Header title='Calendar' />
-          onDayPress={ this.passDateToDayView.bind(this) }
+        <View style={styles.container}>
-          markedDates = { this.state.bleedingDaysInCalFormat }
+          <CalendarList
-          markingType = {'period'}
+            onDayPress={this.passDateToDayView.bind(this)}
-        />
+            markedDates={this.state.bleedingDaysInCalFormat}
+            markingType={'period'}
+          />
+        </View>
       </View>
     )
   }

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 }>
+        <Header
-          <MaterialIcon
+          cycleDayOverView={true}
-            name='arrow-left-drop-circle'
+          cycleDayNumber={cycleDayNumber}
-            {...iconStyles.navigationArrow}
+          date={cycleDay.date}
-            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 >
         <View style={styles.symptomBoxesView}>
           <SymptomBox
             title='Bleeding'

components/cycle-day/symptoms/index.js

@@ -1,10 +1,6 @@
 import React, { Component } from 'react'
-import {
+import { ScrollView } from 'react-native'
-  View,
+import Header from '../../header'
-  Text,
-  ScrollView
-} from 'react-native'
-import styles from '../../../styles'
 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 }>
+        <Header title={titles[this.state.visibleComponent]}/>
-          <View>
-            <Text style={styles.dateHeader}>
-              {titles[this.state.visibleComponent]}
-            </Text>
-          </View >
-        </View >
         {React.createElement(
           symptomViews[this.state.visibleComponent],
           {

components/header.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
+
+export default class Header extends Component {
+  render() {
+    return (
+      this.props.cycleDayOverView ?
+        <View style={[styles.header, styles.headerCycleDay]}>
+          <Icon
+            name='arrow-left-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('before')}
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {formatDateForViewHeader(this.props.date)}
+            </Text>
+            {this.props.cycleDayNumber &&
+              <Text style={styles.cycleDayNumber} >
+                Cycle day {this.props.cycleDayNumber}
+              </Text>}
+          </View >
+          <Icon
+            name='arrow-right-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.goToCycleDay('after')}
+          />
+        </View >
+        :
+        <View style={styles.header}>
+          <Text style={styles.dateHeader}>
+            {this.props.title}
+          </Text>
+        </View >
+    )
+  }
+}

components/home.js

@@ -6,6 +6,7 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate } from 'js-joda'
+import Header from './header'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate, fillWithDummyData, deleteAll } from '../db'
@@ -48,6 +49,7 @@ export default class Home extends Component {
   render() {
     return (
       <ScrollView>
+        <Header title='Home'/>
         <Text style={styles.welcome}>{this.state.welcomeText}</Text>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>

components/settings.js

@@ -9,6 +9,7 @@ import {
 import Share from 'react-native-share'
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
 import rnfs from 'react-native-fs'
+import Header from './header'
 import styles from '../styles/index'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
@@ -18,6 +19,7 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
+        <Header title='Settings'/>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
             <Button

components/stats.js

@@ -5,6 +5,7 @@ import {
   ScrollView
 } from 'react-native'
 import { LocalDate, ChronoUnit } from 'js-joda'
+import Header from './header'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import getCycleInfo from '../lib/cycle-length'
@@ -15,6 +16,7 @@ export default class Stats extends Component {
     const statsText = determineStatsText(allMensesStarts)
     return (
       <ScrollView>
+        <Header title='Statistics' />
         <View>
           <Text style={styles.stats}>{statsText}</Text>
         </View>

styles/index.js

@@ -75,11 +75,14 @@ export default StyleSheet.create({
     alignItems: 'center',
     height: 50
   },
-  cycleDayDateView: {
+  header: {
     backgroundColor: primaryColor,
     paddingVertical: 18,
     paddingHorizontal: 15,
     alignItems: 'center',
+    justifyContent: 'center'
+  },
+  headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between'
   },