Use navigator for symptom views also

components/cycle-day/symptoms/index.js

@@ -1,3 +1,11 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  ScrollView
+} from 'react-native'
+import styles from '../../../styles'
+import actionButtonModule from '../action-buttons'
 import BleedingEditView from './bleeding'
 import TemperatureEditView from './temperature'
 import MucusEditView from './mucus'
@@ -6,7 +14,7 @@ import NoteEditView from './note'
 import DesireEditView from './desire'
 import SexEditView from './sex'
 
-export default {
+const symptomViews = {
   BleedingEditView,
   TemperatureEditView,
   MucusEditView,
@@ -15,3 +23,49 @@ export default {
   DesireEditView,
   SexEditView
 }
+const titles = {
+  BleedingEditView: 'Bleeding',
+  TemperatureEditView: 'Temperature',
+  MucusEditView: 'Mucus',
+  CervixEditView: 'Cervix',
+  NoteEditView: 'Note',
+  DesireEditView: 'Desire',
+  SexEditView: 'Sex'
+}
+
+export default class SymptomView extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      visibleComponent: props.navigation.state.params.symptom,
+      cycleDay: props.navigation.state.params.cycleDay
+    }
+
+    this.showView = view => {
+      this.setState({visibleComponent: view})
+    }
+    this.makeActionButtons = actionButtonModule(this.showView)
+  }
+
+  render() {
+    return (
+      <ScrollView>
+        <View style={ styles.header }>
+          <View>
+            <Text style={styles.dateHeader}>
+              {titles[this.state.visibleComponent]}
+            </Text>
+          </View >
+        </View >
+        {React.createElement(
+          symptomViews[this.state.visibleComponent],
+          {
+            cycleDay: this.state.cycleDay,
+            makeActionButtons: this.makeActionButtons
+          }
+        )}
+      </ScrollView >
+    )
+  }
+}