Merge branch 'feature/push-notification-category-descriptions' into 'master'

Add push notification category descriptions to the settings screen

Closes #75

See merge request !207

app/ui/screens/settings/NotificationsSection.js

@@ -54,13 +54,22 @@ class NotificationsSection extends Component {
           style={[styles.categoryContainer, i !== 0 && styles.borderTop]}
           key={category.key}
         >
-          <Text
-            style={styles.label}
+          <View
+            style={styles.textContainer}
           >
-            {category.name}
-            {' '}
-            {category.key === GENERAL_KEY && this.props.t('(required)')}
-          </Text>
+            <Text
+              style={styles.label}
+            >
+              {category.name}
+              {' '}
+              {category.key === GENERAL_KEY && this.props.t('(required)')}
+            </Text>
+            <Text
+              style={styles.description}
+            >
+              {category.description}
+            </Text>
+          </View>
           <Switch
             value={this.state[category.key]}
             onValueChange={value => this.updateField(category.key, value)}
@@ -86,6 +95,7 @@ NotificationsSection.propTypes = {
   categoryList: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
     enabled: PropTypes.bool.isRequired,
   })).isRequired,
   status: PropTypes.string.isRequired,

app/ui/screens/settings/style/NotificationsSection.js

@@ -20,6 +20,9 @@ const styles = StyleSheet.create({
     borderTopColor: Colors.dividerGrey,
     borderTopWidth: 1,
   },
+  textContainer: {
+    flex: 8,
+  },
   label: {
     color: Colors.textColour,
     android: {
@@ -30,6 +33,17 @@ const styles = StyleSheet.create({
       fontWeight: '600',
     },
   },
+  description: {
+    color: Colors.gray,
+    android: {
+      fontFamily: 'sans-serif-medium',
+    },
+    ios: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    fontSize: 12,
+  },
   emptyText: {
     padding: 16,
   },
@@ -37,6 +51,7 @@ const styles = StyleSheet.create({
     ios: {
       transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
     },
+    flex: 2,
   },
 });