Position footer and fix navigating to cycle day view

app.js

@@ -23,16 +23,24 @@ export default class App extends Component {
     }
   }
 
-  navigate(pageName) {
-    this.setState({currentPage: pageName})
+  navigate(pageName, props) {
+    this.setState({currentPage: pageName, currentProps: props})
   }
 
   render() {
     return (
-      <View>
-        <Header title={this.state.currentPage}/>
-        <CurrentPage page={this.state.currentPage} />
-        <Menu navigate={this.navigate.bind(this)}/>
+      <View style={{height: '100%', justifyContent: 'space-between' }}>
+        <View>
+          {this.state.currentPage != 'CycleDay' && <Header title={this.state.currentPage}/>}
+          <View>
+            <CurrentPage
+              page={this.state.currentPage}
+              navigate={this.navigate.bind(this)}
+              props={this.state.currentProps}
+            />
+          </View>
+        </View>
+        <Menu navigate={this.navigate.bind(this)} />
       </View>
     )
   }
@@ -40,10 +48,13 @@ export default class App extends Component {
 
 class CurrentPage extends Component {
   render () {
-    console.log('urrentpage render')
     const page = {
       Home, Calendar, CycleDay, SymptomView, Chart, Settings, Stats
     }[this.props.page]
-    return React.createElement(page)
+    const props = this.props.props || {}
+    return React.createElement(page, {
+      navigate: this.props.navigate,
+      ...props
+    })
   }
 }

components/cycle-day/cycle-day-overview.js

@@ -27,7 +27,7 @@ export default class CycleDayOverView extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      cycleDay: props.navigation.state.params.cycleDay
+      cycleDay: props.cycleDay
     }
   }
 
@@ -40,7 +40,7 @@ export default class CycleDayOverView extends Component {
   }
 
   navigate(symptom) {
-    this.props.navigation.navigate('SymptomView', {
+    this.props.navigate('SymptomView', {
       symptom,
       cycleDay: this.state.cycleDay
     })
@@ -53,7 +53,7 @@ export default class CycleDayOverView extends Component {
     return (
       <ScrollView>
         <Header
-          cycleDayOverView={true}
+          isCycleDayOverView={true}
           cycleDayNumber={cycleDayNumber}
           date={cycleDay.date}
         />

components/header.js

@@ -10,7 +10,7 @@ import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
 export default class Header extends Component {
   render() {
     return (
-      this.props.cycleDayOverView ?
+      this.props.isCycleDayOverView ?
         <View style={[styles.header, styles.headerCycleDay]}>
           <Icon
             name='arrow-left-drop-circle'

components/home.js

@@ -6,7 +6,6 @@ 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'
@@ -42,7 +41,7 @@ export default class Home extends Component {
   passTodayToDayView() {
     const todayDateString = LocalDate.now().toString()
     const cycleDay = getOrCreateCycleDay(todayDateString)
-    const navigate = this.props.navigation.navigate
+    const navigate = this.props.navigate
     navigate('CycleDay', { cycleDay })
   }
 

components/menu.js

@@ -13,6 +13,12 @@ export default class Menu extends Component {
         placeActionButtons()
         :
         <View style={styles.menu}>
+          <Text
+            style={styles.dateHeader}
+            onPress={() => this.props.navigate('Home')}
+          >
+            {'Home'}
+          </Text>
           <Text
             style={styles.dateHeader}
             onPress={() => this.props.navigate('Calendar')}

styles/index.js

@@ -106,7 +106,8 @@ export default StyleSheet.create({
     paddingVertical: 18,
     paddingHorizontal: 15,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'space-evenly',
+    flexDirection: 'row',
   },
   headerCycleDay: {
     flexDirection: 'row',