Reuse of SettingsSegment component in the Reminders section

components/settings/reminders/index.js

@@ -2,9 +2,12 @@ import React, { Component } from 'react'
 import {
   ScrollView,
 } from 'react-native'
+import SettingsSegment from '../settings-segment'
 import TempReminderPicker from './temp-reminder-picker'
 import PeriodReminderPicker from './period-reminder'
 
+import labels from '../../../i18n/en/settings'
+
 export default class Settings extends Component {
   constructor(props) {
     super(props)
@@ -14,8 +17,12 @@ export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
-        <TempReminderPicker/>
-        <PeriodReminderPicker/>
+        <SettingsSegment title={labels.tempReminder.title}>
+          <TempReminderPicker/>
+        </SettingsSegment>
+        <SettingsSegment title={labels.periodReminder.title}>
+          <PeriodReminderPicker/>
+        </SettingsSegment>
       </ScrollView>
     )
   }