Make bleeding view into a child component

day.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import cycleDayModule from './get-cycle-day-number'
+import { bleedingDaysSortedByDate } from './db'
+import DayView from './day-view'
+import BleedingEditView from './bleeding'
+import TemperatureEditView from './temperature'
+import { formatDateForViewHeader } from './format'
+import styles from './styles'
+
+const getCycleDayNumber = cycleDayModule()
+
+export default class Day extends Component {
+  constructor(props) {
+    super(props)
+    this.cycleDay = props.navigation.state.params.cycleDay
+    this.cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
+
+    this.state = {
+      visibleComponent: 'dayView',
+    }
+
+    this.bringIntoView = view => {
+      this.setState({visibleComponent: view})
+    }
+  }
+
+  componentWillUnmount() {
+    bleedingDaysSortedByDate.removeAllListeners()
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>{formatDateForViewHeader(this.cycleDay.date)}</Text>
+        <Text>Cycle day {getCycleDayNumber(this.cycleDay.date)}</Text>
+        {
+          { dayView: <DayView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView} />,
+            bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView}/>,
+            temperatureEditView: <TemperatureEditView cycleDay={this.cycleDay} bringIntoView={this.bringIntoView}/>
+          }[this.state.visibleComponent]
+        }
+
+      </View >
+    )
+  }
+}