set up period reminder in settings

components/settings/index.js

@@ -8,6 +8,7 @@ import styles from '../../styles/index'
 import { settings as labels } from '../labels'
 import { AppText } from '../app-text'
 import TempReminderPicker from './temp-reminder-picker'
+import PeriodReminderPicker from './period-reminder'
 import TempSlider from './temp-slider'
 import openImportDialogAndImport from './import-dialog'
 import openShareDialogAndExport from './export-dialog'
@@ -30,6 +31,7 @@ export default class Settings extends Component {
           <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
+        <PeriodReminderPicker/>
         <PasswordSetting />
         <View style={styles.settingsSegment}>
           <AppText style={styles.settingsSegmentTitle}>

components/settings/period-reminder.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Switch
+} from 'react-native'
+import { AppText } from '../app-text'
+import {
+  periodReminderObservable,
+  savePeriodReminder
+} from '../../local-storage'
+import styles from '../../styles/index'
+import { settings as labels } from '../labels'
+
+export default class PeriodReminderPicker extends Component {
+  constructor(props) {
+    super(props)
+    this.state = Object.assign({}, periodReminderObservable.value)
+  }
+
+  render() {
+    return (
+      <View style={styles.settingsSegment}>
+        <AppText style={styles.settingsSegmentTitle}>
+          {labels.periodReminder.title}
+        </AppText>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <View style={{ flex: 1 }}>
+            <AppText>{labels.periodReminder.reminderText}</AppText>
+          </View>
+          <Switch
+            value={this.state.enabled}
+            onValueChange={switchOn => {
+              this.setState({ enabled: switchOn })
+              savePeriodReminder({enabled: true})
+            }}
+          />
+        </View>
+      </View>
+    )
+  }
+}