Redesign chart

components/common/app-page.js

@@ -1,26 +1,36 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { ScrollView, StyleSheet } from 'react-native'
+import { ScrollView, StyleSheet, View } from 'react-native'
 
 import AppText from '../common/app-text'
 
 import { Colors, Typography } from '../../styles/redesign'
 
-const AppPage = ({ children, contentContainerStyle, title }) => {
+const AppPage = ({
+  children,
+  contentContainerStyle,
+  scrollViewStyle,
+  title,
+  ...props
+}) => {
   return(
-    <ScrollView
-      style={styles.container}
-      contentContainerStyle={contentContainerStyle}
-    >
-      {title && <AppText style={styles.title}>{title}</AppText>}
-      {children}
-    </ScrollView>
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={[styles.scrollView, contentContainerStyle]}
+        style={scrollViewStyle}
+        {...props}
+      >
+        {title && <AppText style={styles.title}>{title}</AppText>}
+        {children}
+      </ScrollView>
+    </View>
   )
 }
 
 AppPage.propTypes = {
   children: PropTypes.node,
   contentContainerStyle: PropTypes.object,
+  scrollViewStyle: PropTypes.object,
   title: PropTypes.string
 }
 
@@ -29,6 +39,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.tourquiseLight,
     flex: 1
   },
+  scrollView: {
+    backgroundColor: Colors.tourquiseLight,
+    flexGrow: 1
+  },
   title: {
     ...Typography.title
   }