solves the action footer, but messes up the header

components/app.js

@@ -56,7 +56,10 @@ export default class App extends Component {
     return (
       <View style={{flex: 1}}>
 
-        {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
+        {this.state.currentPage != 'CycleDay' && !isSymptomView(this.state.currentPage) &&
+          <Header
+            title={titles[this.state.currentPage]}
+          />}
 
         {React.createElement(page, {
           navigate: this.navigate,

components/cycle-day/labels/labels.js

@@ -84,3 +84,12 @@ export const temperature = {
 }
 
 export const noteExplainer = "Anything you want to add for the day?"
+
+export const sharedDialogs = {
+  cancel: 'Cancel',
+  areYouSureTitle: 'Are you sure?',
+  areYouSureToUnset: 'Are you sure you want to unset all entered data?',
+  reallyUnsetData: 'Yes, I am sure',
+  save: 'Save',
+  unset: 'Unset'
+}

components/cycle-day/select-tab-group.js

@@ -23,13 +23,7 @@ export default class SelectTabGroup extends Component {
             if (isActive) activeStyle = styles.selectTabActive
             return (
               <TouchableOpacity
-                onPress={() => {
-                  if (this.props.isRadioButton) {
-                    this.props.onSelect(value)
-                  } else {
-                    isActive ? this.props.onSelect(null) : this.props.onSelect(value)
-                  }
-                }}
+                onPress={() => isActive ? this.props.onSelect(null) : this.props.onSelect(value)}
                 key={i}
                 activeOpacity={1}
               >

components/cycle-day/symptoms/action-button-footer.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react'
 import {
-  View, TouchableOpacity, Text
+  View, TouchableOpacity, Text, Alert
 } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { saveSymptom } from '../../../db'
 import styles, {iconStyles} from '../../../styles'
+import {sharedDialogs as labels} from '../labels/labels'
 
 export default class ActionButtonFooter extends Component {
   render() {
@@ -17,33 +18,29 @@ export default class ActionButtonFooter extends Component {
       autoShowDayView = true}
       = this.props
     const navigateToOverView = () => navigate('CycleDay', {cycleDay})
-    const buttonsNewEntry = [
+    const buttons = [
       {
-        title: 'Cancel',
-        action: () => navigateToOverView(),
-        icon: 'cancel'
-      },
-      {
-        title: 'Add',
+        title: labels.unset,
         action: () => {
-          saveAction()
-          if (autoShowDayView) navigateToOverView()
-        },
-        disabledCondition: saveDisabled,
-        icon: 'content-save-outline'
-      }
-    ]
-    const buttonsEdit = [
-      {
-        title: 'Delete',
-        action: () => {
-          saveSymptom(symptom, cycleDay)
-          navigateToOverView()
+          Alert.alert(
+            labels.areYouSureTitle,
+            labels.areYouSureToUnset,
+            [{
+              text: labels.cancel,
+              style: 'cancel'
+            }, {
+              text: labels.reallyUnsetData,
+              onPress: () => {
+                saveSymptom(symptom, cycleDay)
+                navigateToOverView()
+              }
+            }]
+          )
         },
         disabledCondition: !cycleDay[symptom],
         icon: 'delete-outline'
       }, {
-        title: 'Save',
+        title: labels.save,
         action: () => {
           saveAction()
           if (autoShowDayView) navigateToOverView()
@@ -52,7 +49,6 @@ export default class ActionButtonFooter extends Component {
         icon: 'content-save-outline'
       }
     ]
-    const buttons = !cycleDay[symptom] ? buttonsNewEntry : buttonsEdit
 
     return (
       <View style={styles.menu}>

components/cycle-day/symptoms/bleeding.js

@@ -10,6 +10,7 @@ import { bleeding as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectTabGroup from '../select-tab-group'
 import SymptomSection from './symptom-section'
+import Header from '../../header'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -31,6 +32,15 @@ export default class Bleeding extends Component {
     ]
     return (
       <View style={{ flex: 1 }}>
+        <Header
+          title={'Bleeding'}
+          isSymptomView={true}
+          goBack={() => this.props.navigate('CycleDay', this.props.cycleDay)}
+          cycleDayNumber={this.props.cycleDayNumber}
+          date={this.props.cycleDay.date}
+          infoTitle={'Info here'}
+          infoText={'bla bla'}
+        />
         <ScrollView style={styles.page}>
           <SymptomSection
             header="Heaviness"
@@ -40,7 +50,6 @@ export default class Bleeding extends Component {
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection

components/cycle-day/symptoms/cervix.js

@@ -50,7 +50,6 @@ export default class Cervix extends Component {
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -61,7 +60,6 @@ export default class Cervix extends Component {
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
           <SymptomSection
@@ -72,7 +70,6 @@ export default class Cervix extends Component {
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}
-              isRadioButton={false}
             />
           </SymptomSection>
           <SymptomSection

components/cycle-day/symptoms/desire.js

@@ -36,7 +36,6 @@ export default class Desire extends Component {
               buttons={desireRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}
-              isRadioButton={true}
             />
           </SymptomSection>
         </ScrollView>

components/header.js

@@ -7,8 +7,10 @@ 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() {
+    console.log(this.props)
     return (
       this.props.isCycleDayOverView ?
         <View style={[styles.header, styles.headerCycleDay]}>
@@ -32,12 +34,32 @@ export default class Header extends Component {
             onPress={() => this.props.goToCycleDay('after')}
           />
         </View >
-        :
-        <View style={styles.header}>
-          <Text style={styles.dateHeader}>
-            {this.props.title}
-          </Text>
-        </View >
+        : this.props.isSymptomView ?
+          <View style={[styles.header, styles.headerCycleDay]}>
+            <Icon
+              name='arrow-left-drop-circle'
+              {...iconStyles.navigationArrow}
+              onPress={() => this.props.goBack()}
+            />
+            <View>
+              <Text style={styles.dateHeader}>
+                {this.props.title}
+              </Text>
+              <Text style={styles.cycleDayNumber} >
+                {formatDateForViewHeader(this.props.date)}
+              </Text>
+            </View >
+            <Icon
+              name='information-outline'
+              {...iconStyles.navigationArrow}
+            />
+          </View>
+          :
+          <View style={styles.header}>
+            <Text style={styles.dateHeader}>
+              {this.props.title}
+            </Text>
+          </View >
     )
   }
 }

styles/index.js

@@ -132,6 +132,9 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
     height: '15%'
   },
+  headerSymptom: {
+    height: '15%'
+  },
   navigationArrow: {
     fontSize: 60,
     color: fontOnPrimaryColor