Use time picker for time field

components/cycle-day/symptoms/temperature.js

@@ -3,8 +3,10 @@ import {
   View,
   Text,
   TextInput,
-  Switch
+  Switch,
+  Keyboard
 } from 'react-native'
+import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
@@ -30,7 +32,8 @@ export default class Temp extends Component {
     this.state = {
       currentValue: initialValue,
       exclude: temp ? temp.exclude : false,
-      time: this.time || LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString()
+      time: this.time || LocalTime.now().truncatedTo(ChronoUnit.MINUTES).toString(),
+      isTimePickerVisible: false
     }
   }
 
@@ -54,13 +57,24 @@ export default class Temp extends Component {
           <Text style={styles.symptomDayView}>Time</Text>
           <TextInput
             style={styles.temperatureTextInput}
-            onChangeText={(val) => {
-              this.setState({ time: val })
+            onFocus={() => {
+              Keyboard.dismiss()
+              this.setState({isTimePickerVisible: true})
             }}
-            keyboardType='numeric'
             value={this.state.time}
           />
         </View>
+        <DateTimePicker
+          mode="time"
+          isVisible={this.state.isTimePickerVisible}
+          onConfirm={jsDate => {
+            this.setState({
+              time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+              isTimePickerVisible: false
+            })
+          }}
+          onCancel={() => this.setState({isTimePickerVisible: false})}
+        />
         <View style={styles.symptomViewRowInline}>
           <Text style={styles.symptomDayView}>Exclude</Text>
           <Switch

package-lock.json

@@ -6250,6 +6250,14 @@
         "yargs": "^9.0.0"
       }
     },
+    "react-native-animatable": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.0.tgz",
+      "integrity": "sha512-GGYEYvderfzPZcPnw7xov4nlRmi9d6oqcIzx0fGkUUsMshOQEtq5IEzFp3np0uTB9n8/gZIZcdbUPggVlVydMg==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-calendars": {
       "version": "1.19.3",
       "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.19.3.tgz",
@@ -6282,6 +6290,47 @@
         "react-native-drawer-layout": "1.3.2"
       }
     },
+    "react-native-modal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-3.1.0.tgz",
+      "integrity": "sha512-DsF4r8ScW0y+bn+7ThzBLP4az/hsi+e9ge79vExkjpw6uNFwNWQPY21BRE4uyip7PpsqEDSyvVb8GH3UXZIYcA==",
+      "requires": {
+        "prop-types": "15.5.10",
+        "react-native-animatable": "^1.2.3"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.10",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
+          "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.3.1"
+          }
+        }
+      }
+    },
+    "react-native-modal-datetime-picker-nevo": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-native-modal-datetime-picker-nevo/-/react-native-modal-datetime-picker-nevo-4.11.0.tgz",
+      "integrity": "sha512-nDUlHyUoRHO+fzt0cc2g+a8kYx+RZQZnjVY01jDIspAbRGTJuCt9x+LjTvhuDQpoXEJYvBEw1W7dz9mn3tNsoQ==",
+      "requires": {
+        "moment": "^2.19.0",
+        "prop-types": "15.5.10",
+        "react-native-modal": "3.1.0"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.10",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz",
+          "integrity": "sha1-J5ffwxJhguOpXj37suiT3ddFYVQ=",
+          "requires": {
+            "fbjs": "^0.8.9",
+            "loose-envify": "^1.3.1"
+          }
+        }
+      }
+    },
     "react-native-safe-area-view": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.8.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "react": "16.3.1",
     "react-native": "0.55.4",
     "react-native-calendars": "^1.19.3",
+    "react-native-modal-datetime-picker-nevo": "^4.11.0",
     "react-native-simple-radio-button": "^2.7.1",
     "react-native-svg": "^6.3.1",
     "react-navigation": "^2.0.4",