Start replacing navigator

app.js

@@ -1,6 +1,8 @@
-import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import Header from './components/header'
+import Menu from './components/menu'
 import Home from './components/home'
-
 import Calendar from './components/calendar'
 import CycleDay from './components/cycle-day/cycle-day-overview'
 import SymptomView from './components/cycle-day/symptoms'
@@ -8,30 +10,40 @@ import Chart from './components/chart/chart'
 import Settings from './components/settings'
 import Stats from './components/stats'
 
-import styles, { primaryColor } from './styles'
-
 // this is until react native fixes this bugg, see
 // https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
 import { YellowBox } from 'react-native'
 YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
 
-const CycleDayStack = createStackNavigator({CycleDay, SymptomView}, {headerMode: 'none'})
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentPage: 'Home'
+    }
+  }
 
-const routes = {
-  Home: createStackNavigator({Home, CycleDayStack}, {headerMode: 'none'}),
-  Calendar: createStackNavigator({Calendar, CycleDayStack}, {headerMode: 'none'}),
-  Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
-  Settings: { screen: Settings },
-  Stats: { screen: Stats}
-}
+  navigate(pageName) {
+    this.setState({currentPage: pageName})
+  }
 
-const config = {
-  labeled: true,
-  shifting: false,
-  tabBarOptions: {
-    style: {backgroundColor: primaryColor },
-    labelStyle: styles.menuLabel
+  render() {
+    return (
+      <View>
+        <Header title={this.state.currentPage}/>
+        <CurrentPage page={this.state.currentPage} />
+        <Menu navigate={this.navigate.bind(this)}/>
+      </View>
+    )
   }
 }
 
-export default createBottomTabNavigator(routes, config)
+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)
+  }
+}

components/calendar.js

@@ -1,7 +1,6 @@
 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'
 
@@ -11,9 +10,11 @@ export default class CalendarView extends Component {
     this.state = {
       bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
     }
+    console.log(Object.keys(this.state.bleedingDaysInCalFormat))
 
     this.setStateWithCalFormattedDays = (function (CalendarComponent) {
-      return function() {
+      return function(_, changes) {
+        if (Object.values(changes).every(x => x && !x.length)) return
         CalendarComponent.setState({
           bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
         })
@@ -34,9 +35,9 @@ export default class CalendarView extends Component {
   }
 
   render() {
+    console.log('cal render')
     return (
       <View>
-        <Header title='Calendar' />
         <View style={styles.container}>
           <CalendarList
             onDayPress={this.passDateToDayView.bind(this)}

components/home.js

@@ -49,7 +49,6 @@ 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}>

components/menu.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+
+export default class Menu extends Component {
+  render() {
+    return (
+      this.props.symptomView ?
+        placeActionButtons()
+        :
+        <View style={styles.menu}>
+          <Text
+            style={styles.dateHeader}
+            onPress={() => this.props.navigate('Calendar')}
+          >
+            {'Calendar'}
+          </Text>
+          <Text
+            style={styles.dateHeader}
+            onPress={() => this.props.navigate('Settings')}
+          >
+            {'Settings'}
+          </Text>
+        </View >
+    )
+  }
+}
+
+function placeActionButtons() {}

styles/index.js

@@ -82,6 +82,13 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center'
   },
+  menu: {
+    backgroundColor: primaryColor,
+    paddingVertical: 18,
+    paddingHorizontal: 15,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between'