Make everything scrollable

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Text as ReactNativeText, View, FlatList } from 'react-native'
+import { Text as ReactNativeText, View, FlatList, ScrollView } from 'react-native'
 import range from 'date-range'
 import Svg,{
   G,
@@ -131,7 +131,7 @@ export default class CycleChart extends Component {
 
   render() {
     return (
-      <View style={{flex: 1, flexDirection: 'row'}}>
+      <ScrollView contentContainerStyle={{flexDirection: 'row'}}>
         <View {...styles.yAxis}>{yAxis.labels}</View>
         <FlatList
           horizontal={true}
@@ -148,7 +148,7 @@ export default class CycleChart extends Component {
           keyExtractor={item => item.dateString}
         >
         </FlatList>
-      </View>
+      </ScrollView>
     )
   }
 }

components/cycle-day/index.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  Text,
+  ScrollView
 } from 'react-native'
 import cycleDayModule from '../../lib/get-cycle-day-number'
 import DayView from './cycle-day-overview'
@@ -33,7 +34,7 @@ export default class Day extends Component {
   render() {
     const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
-      <View>
+      <ScrollView>
         <View style={ styles.cycleDayDateView }>
           <Text style={styles.dateHeader}>
             {formatDateForViewHeader(this.cycleDay.date)}
@@ -51,7 +52,7 @@ export default class Day extends Component {
             }[this.state.visibleComponent]
           }
         </View >
-      </View >
+      </ScrollView >
     )
   }
 }

components/home.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Button,
-  Text
+  Text,
+  ScrollView
 } from 'react-native'
 import { LocalDate } from 'js-joda'
 import styles from '../styles'
@@ -46,7 +47,7 @@ export default class Home extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     return (
-      <View>
+      <ScrollView>
         <Text style={styles.welcome}>{this.state.welcomeText}</Text>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
@@ -74,7 +75,7 @@ export default class Home extends Component {
             </Button>
           </View>
         </View>
-      </View>
+      </ScrollView>
     )
   }
 }