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)
+  }
+}