solves the action footer, but messes up the header

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