Extract cycle day header

components/header.js

-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  Dimensions
-} from 'react-native'
-import moment from 'moment'
-import styles, { iconStyles } from '../styles'
-import Icon from 'react-native-vector-icons/Entypo'
-import FeatherIcon from 'react-native-vector-icons/Feather'
-
-export default class Header extends Component {
-  render() {
-    const middle = Dimensions.get('window').width / 2
-    return (
-      this.props.isCycleDayOverView ?
-        <View style={[styles.header, styles.headerCycleDay]}>
-          <View
-            style={styles.accentCircle}
-            left={middle - styles.accentCircle.width / 2}
-          />
-          <Icon
-            name='chevron-thin-left'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('before')}
-          />
-          <View>
-            <Text style={styles.dateHeader}>
-              {moment(this.props.date).format('MMMM Do YYYY')}
-            </Text>
-            {this.props.cycleDayNumber &&
-              <Text style={styles.cycleDayNumber} >
-                Cycle day {this.props.cycleDayNumber}
-              </Text>}
-          </View >
-          <Icon
-            name='chevron-thin-right'
-            {...iconStyles.navigationArrow}
-            onPress={() => this.props.goToCycleDay('after')}
-          />
-        </View >
-        : this.props.isSymptomView ?
-          <View style={[styles.header, styles.headerSymptom]}>
-            <View style={styles.accentCircle} left={middle - styles.accentCircle.width / 2}/>
-            <Icon
-              name='chevron-thin-left'
-              {...iconStyles.navigationArrow}
-              onPress={() => this.props.goBack()}
-
-            />
-            <View>
-              <Text style={styles.dateHeader}>
-                {this.props.title}
-              </Text>
-            </View >
-            <FeatherIcon
-              name='info'
-              {...iconStyles.symptomHeaderIcons}
-            />
-          </View>
-          :
-          <View style={styles.header}>
-            <View style={styles.accentCircle} />
-            <Text style={styles.headerText}>
-              {this.props.title}
-            </Text>
-          </View >
-    )
-  }
-}
\ No newline at end of file

components/header/cycle-day.js

+import React from 'react'
+import {
+  View,
+  Text} from 'react-native'
+import moment from 'moment'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function CycleDayHeader(props) {
+  return (<View style={[styles.header, styles.headerCycleDay]}>
+    <View
+      style={styles.accentCircle}
+      left={props.middle - styles.accentCircle.width / 2}
+    />
+    <Icon name='chevron-thin-left' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('before')} />
+    <View>
+      <Text style={styles.dateHeader}>
+        {moment(props.date).format('MMMM Do YYYY')}
+      </Text>
+      {props.cycleDayNumber &&
+        <Text style={styles.cycleDayNumber}>
+          Cycle day {props.cycleDayNumber}
+        </Text>}
+    </View>
+    <Icon name='chevron-thin-right' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('after')} />
+  </View>
+  )
+}
\ No newline at end of file

components/header/index.js

+import React from 'react'
+import {
+  View,
+  Text,
+  Dimensions
+} from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import CycleDayHeader from './cycle-day'
+
+export default function Header(props) {
+  const middle = Dimensions.get('window').width / 2
+  return (
+    props.isCycleDayOverView ?
+      <CycleDayHeader
+        middle={middle}
+        {...props}
+      />
+      : props.isSymptomView ?
+        <View style={[styles.header, styles.headerSymptom]}>
+          <View
+            style={styles.accentCircle}
+            left={middle - styles.accentCircle.width / 2}
+          />
+          <Icon
+            name='chevron-thin-left'
+            {...iconStyles.navigationArrow}
+            onPress={() => props.goBack()}
+
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {props.title}
+            </Text>
+          </View >
+          <FeatherIcon
+            name='info'
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </View>
+        :
+        <View style={styles.header}>
+          <View style={styles.accentCircle} />
+          <Text style={styles.headerText}>
+            {props.title}
+          </Text>
+        </View >
+  )
+}
\ No newline at end of file