diff --git a/components/calendar.js b/components/calendar.js
index 4aa7f135eef45fdb040819ecaeb071e7881ff5cc..dbff83c9c801f43f0d0bb8d8322d65856d3d3c2a 100644
--- a/components/calendar.js
+++ b/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}>
- <CalendarList
- onDayPress={ this.passDateToDayView.bind(this) }
- markedDates = { this.state.bleedingDaysInCalFormat }
- markingType = {'period'}
- />
+ <View>
+ <Header title='Calendar' />
+ <View style={styles.container}>
+ <CalendarList
+ onDayPress={this.passDateToDayView.bind(this)}
+ markedDates={this.state.bleedingDaysInCalFormat}
+ markingType={'period'}
+ />
+ </View>
</View>
)
}
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index 35e1e3f66b473e5d417d22321da59154f2cbc4c6..78178fe824ff1bda9eb71294b9bbd7496313db6b 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/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'
diff --git a/components/cycle-day/symptoms/index.js b/components/cycle-day/symptoms/index.js
index 3c0f834b4f9a7760ea49894eaa2bca20d52ba3dc..c2c050b62c923eba8012eb5dc54735a499182396 100644
--- a/components/cycle-day/symptoms/index.js
+++ b/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],
{
diff --git a/components/header.js b/components/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fd285ebc5888262e6a17f136b9c48978466c8bf
--- /dev/null
+++ b/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 >
+ )
+ }
+}
\ No newline at end of file
diff --git a/components/home.js b/components/home.js
index 5381e3bec357118f78f6edf27f862d0e2973a405..9c8d14ff6d4e7483a0fdbdf9753d9d01b5a93b5c 100644
--- a/components/home.js
+++ b/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}>
diff --git a/components/settings.js b/components/settings.js
index 97907b101cd7e527d4f351d5025fd93fe39adb42..3552872a507d960090f0a652671e79351e0a3528 100644
--- a/components/settings.js
+++ b/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
diff --git a/components/stats.js b/components/stats.js
index 4021fdee0af44ab2fb229e565988014ba4a4d99f..c37a518c37817dd13e146c734906e7d73b1dd152 100644
--- a/components/stats.js
+++ b/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>
diff --git a/styles/index.js b/styles/index.js
index 087d20de70711a286791592c374439fbcd0df336..f55ef4e7adcc473fc4fd9fbf25e9334aa7ae88a4 100644
--- a/styles/index.js
+++ b/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'
},