Make scrolling work again

app.js

@@ -52,7 +52,7 @@ export default class App extends Component {
       Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
     }[this.state.currentPage]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{flex: 1}}>
 
         {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
 

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

@@ -36,7 +36,7 @@ export default class CycleDayOverView extends Component {
     const targetDate = target === 'before' ?
       localDate.minusDays(1).toString() :
       localDate.plusDays(1).toString()
-    this.setState({cycleDay: getOrCreateCycleDay(targetDate)})
+    this.setState({ cycleDay: getOrCreateCycleDay(targetDate) })
   }
 
   navigate(symptom) {
@@ -50,12 +50,13 @@ export default class CycleDayOverView extends Component {
     const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
-      <ScrollView>
+      <View style={{ flex: 1 }}>
         <Header
           isCycleDayOverView={true}
           cycleDayNumber={cycleDayNumber}
           date={cycleDay.date}
         />
+        <ScrollView>
           <View style={styles.symptomBoxesView}>
             <SymptomBox
               title='Bleeding'
@@ -97,6 +98,7 @@ export default class CycleDayOverView extends Component {
             <FillerBoxes />
           </View >
         </ScrollView >
+      </View >
     )
   }
 }

components/cycle-day/symptoms/bleeding.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -33,7 +34,8 @@ export default class Bleeding extends Component {
       { label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <View style={styles.radioButtonRow}>
               <RadioForm
@@ -57,6 +59,7 @@ export default class Bleeding extends Component {
               />
             </View>
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='bleeding'
           cycleDay={this.props.cycleDay}

components/cycle-day/symptoms/cervix.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -49,7 +50,8 @@ export default class Cervix extends Component {
       { label: positionLabels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <Text style={styles.symptomDayView}>Opening</Text>
             <View style={styles.radioButtonRow}>
@@ -100,6 +102,7 @@ export default class Cervix extends Component {
               />
             </View>
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='cervix'
           cycleDay={this.cycleDay}

components/cycle-day/symptoms/desire.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -28,7 +28,8 @@ export default class Desire extends Component {
       { label: labels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <View style={styles.radioButtonRow}>
               <RadioForm
@@ -43,6 +44,7 @@ export default class Desire extends Component {
               />
             </View>
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='desire'
           cycleDay={this.cycleDay}

components/cycle-day/symptoms/mucus.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -47,7 +48,8 @@ export default class Mucus extends Component {
       { label: textureLabels[2], value: 2 }
     ]
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <Text style={styles.symptomDayView}>Feeling</Text>
             <View style={styles.radioButtonRow}>
@@ -85,6 +87,7 @@ export default class Mucus extends Component {
               />
             </View>
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='mucus'
           cycleDay={this.cycleDay}

components/cycle-day/symptoms/note.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
+  ScrollView,
   TextInput,
 } from 'react-native'
 
@@ -23,7 +23,8 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View style={styles.symptomViewRow}>
             <TextInput
               multiline={true}
@@ -34,6 +35,7 @@ export default class Temp extends Component {
               value={this.state.currentValue}
             />
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='note'
           cycleDay={this.cycleDay}

components/cycle-day/symptoms/sex.js

@@ -3,7 +3,8 @@ import {
   CheckBox,
   Text,
   TextInput,
-  View
+  View,
+  ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
@@ -18,7 +19,7 @@ export default class Sex extends Component {
     super(props)
     this.cycleDay = props.cycleDay
     this.state = {}
-    if (this.cycleDay.sex !== null ) {
+    if (this.cycleDay.sex !== null) {
       Object.assign(this.state, this.cycleDay.sex)
       // We make sure other is always true when there is a note,
       // e.g. when import is messed up.
@@ -31,7 +32,8 @@ export default class Sex extends Component {
   render() {
 
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <View style={styles.symptomViewRowInline}>
               <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
@@ -136,6 +138,7 @@ export default class Sex extends Component {
               />
             }
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='sex'
           cycleDay={this.cycleDay}

components/cycle-day/symptoms/temperature.js

@@ -5,6 +5,7 @@ import {
   TextInput,
   Switch,
   Keyboard,
+  ScrollView
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
@@ -42,7 +43,8 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.menuOnBottom}>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
           <View>
             <View style={styles.symptomViewRowInline}>
               <Text style={styles.symptomDayView}>Temperature (°C)</Text>
@@ -88,6 +90,7 @@ export default class Temp extends Component {
               />
             </View>
           </View>
+        </ScrollView>
         <ActionButtonFooter
           symptom='temperature'
           cycleDay={this.cycleDay}

styles/index.js

@@ -79,10 +79,6 @@ export default StyleSheet.create({
   symptomDataText: {
     fontSize: 12
   },
-  menuOnBottom: {
-    flex: 1,
-    justifyContent: 'space-between'
-  },
   symptomEditRow: {
     justifyContent: 'space-between',
     marginBottom: 10,
@@ -105,7 +101,7 @@ export default StyleSheet.create({
     backgroundColor: primaryColor,
     alignItems: 'center',
     justifyContent: 'space-between',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   menuItem: {
     alignItems: 'center',