Merge branch 'Fix-title-for-picker' into 'master'

Fix: Specify the title for timePicker in IOS

See merge request bloodyhealth/drip!387

components/cycle-day/temperature.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { Keyboard } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker'
 import moment from 'moment'
+import { useTranslation } from 'react-i18next'
 
 import AppText from '../common/app-text'
 import AppTextInput from '../common/app-text-input'
@@ -22,6 +23,7 @@ import { temperature as labels } from '../../i18n/en/cycle-day'
 import { Colors, Containers, Sizes, Spacing } from '../../styles'
 
 const Temperature = ({ data, date, save }) => {
+  const { t } = useTranslation()
   const [isTimePickerVisible, setIsTimePickerVisible] = useState(false)
   const [temperature, setTemperature] = useState(
     formatTemperature(data.value) || getPreviousTemperature(date)
@@ -94,6 +96,7 @@ const Temperature = ({ data, date, save }) => {
           onConfirm={setTime}
           onCancel={() => setIsTimePickerVisible(false)}
           display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          headerTextIOS={t('labels.shared.dateTimePickerTitle')}
         />
       </Segment>
     </React.Fragment>

components/settings/reminders/temperature-reminder.js

@@ -1,14 +1,20 @@
 import React, { Component } from 'react'
+import { Platform } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker'
+import PropTypes from 'prop-types'
 
 import AppSwitch from '../../common/app-switch'
 
-import { saveTempReminder, tempReminderObservable } from '../../../local-storage'
+import {
+  saveTempReminder,
+  tempReminderObservable,
+} from '../../../local-storage'
 import padWithZeros from '../../helpers/pad-time-with-zeros'
 
 import labels from '../../../i18n/en/settings'
+import { withTranslation } from 'react-i18next'
 
-export default class TemperatureReminder extends Component {
+class TemperatureReminder extends Component {
   constructor(props) {
     super(props)
 
@@ -42,9 +48,12 @@ export default class TemperatureReminder extends Component {
 
   render() {
     const { isEnabled, isTimePickerVisible, time } = this.state
+    const { t } = this.props
 
-    const tempReminderText = time && isEnabled ?
-      labels.tempReminder.timeSet(time) : labels.tempReminder.noTimeSet
+    const tempReminderText =
+      time && isEnabled
+        ? labels.tempReminder.timeSet(time)
+        : labels.tempReminder.noTimeSet
 
     return (
       <React.Fragment>
@@ -58,8 +67,15 @@ export default class TemperatureReminder extends Component {
           mode="time"
           onConfirm={this.onPickDate}
           onCancel={this.onPickDateCancel}
+          display={Platform.OS === 'ios' ? 'spinner' : 'default'}
+          headerTextIOS={t('labels.shared.dateTimePickerTitle')}
         />
       </React.Fragment>
     )
   }
 }
+
+TemperatureReminder.propTypes = {
+  t: PropTypes.func.isRequired,
+}
+export default withTranslation()(TemperatureReminder)

i18n/en.json

@@ -7,9 +7,10 @@
       "cycleDay": " day of your cycle",
       "cyclePhase": " cycle phase - ",
       "addDataForToday": "add data for today"
-    },    
+    },
     "shared": {
       "cancel": "Cancel",
+      "dateTimePickerTitle": "Pick a time",
       "ok": "OK"
     }
   },
@@ -19,4 +20,4 @@
       "text": "Copyright (C) {{currentYear}} Bloody Health GbR\n\nThis program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details: https://www.gnu.org/licenses/gpl-3.0.html\n\nYou can contact us by drip@mailbox.org."
     }
   }
-}
+}