Create CardSection component

app/ui/components/cardSection/CardSection.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
+import styles from './style/CardSection';
+
+const CardSection = props => (
+  <View style={[styles.section, props.style]}>
+    <Text style={styles.sectionHeader}>{props.sectionHeader}</Text>
+    <View style={[styles.card, props.contentStyle]}>
+      {props.children}
+    </View>
+  </View>
+);
+
+CardSection.propTypes = {
+  children: PropTypes.node.isRequired,
+  sectionHeader: PropTypes.string,
+  style: ViewPropTypes.style,
+  contentStyle: ViewPropTypes.style,
+};
+
+const defaultStyles = StyleSheet.create({
+});
+
+CardSection.defaultProps = {
+  sectionHeader: null,
+  style: defaultStyles,
+  contentStyle: defaultStyles,
+};
+
+export default CardSection;
\ No newline at end of file

app/ui/components/cardSection/style/CardSection.js

+import StyleSheet from '../../../style/StyleSheet';
+import Colors from '../../../style/Colors';
+
+const styles = StyleSheet.create({
+  section: {
+    marginTop: 8,
+    marginBottom: 8,
+  },
+  sectionHeader: {
+    android: {
+      fontFamily: 'sans-serif-medium',
+    },
+    ios: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    color: Colors.textColour,
+    fontSize: 14,
+    paddingLeft: 10,
+    paddingTop: 6,
+    paddingBottom: 6,
+  },
+  card: {
+    backgroundColor: Colors.white,
+    elevation: 2,
+    android: {
+      borderRadius: 2,
+    },
+    ios: {
+      borderRadius: 4,
+      borderColor: Colors.lightGray,
+      borderStyle: 'solid',
+      borderWidth: 0.5,
+    },
+  },
+});
+
+export default styles;
\ No newline at end of file