add radio button for pick reminder time

package.json

@@ -7,10 +7,12 @@
     "test": "jest"
   },
   "dependencies": {
+    "moment": "^2.20.1",
     "native-base": "^2.3.3",
     "react": "16.0.0",
     "react-native": "0.50.3",
     "react-native-camera": "^0.12.0",
+    "react-native-datepicker": "^1.6.0",
     "react-native-firebase": "^3.1.0",
     "react-native-google-signin": "^0.12.0",
     "react-native-modal-datetime-picker": "^4.13.0",

src/screens/MedicationsScreen.js

@@ -11,9 +11,12 @@ import {
   Form,
   Item,
   Label,
-  Input
+  Input,
+  ListItem,
+  Radio,
+  Right
 } from 'native-base';
-import DateTimePicker from 'react-native-modal-datetime-picker';
+import DatePicker from 'react-native-datepicker'
 import AppHeader from './../components/Header';
 import MedForm from '../components/MedForm';
 
@@ -23,10 +26,14 @@ class MedicationsScreen extends Component {
     super();
     this.state = {
       text: "",
-      date: Date.now(),
-      time: "08.00",
-      isDatePickerVisible: false,
-      isTimePickerVisible: false
+      date: new Date(Date.now()).toISOString().split('T')[0],
+      minDate: new Date(Date.now()).toISOString().split('T')[0],
+      hour: 0,
+      minute: 0,
+      today: Date.now(),
+      morning: false,
+      lunch: false,
+      night: false
     };
   }
 
@@ -36,10 +43,10 @@ class MedicationsScreen extends Component {
       console.log('Notification action received: ' + action);
       const info = JSON.parse(action.dataJSON);
       if (info.action == 'Yes') {
-        console.log("Yes");
+        ToastAndroid.show('Yes', ToastAndroid.SHORT)
 
       } else if (info.action == 'No') {
-        console.log("No");
+        ToastAndroid.show('No', ToastAndroid.LONG)
       }
 
     });
@@ -72,72 +79,91 @@ class MedicationsScreen extends Component {
             </Form>
           </MedForm>
 
-          <MedForm titleText={"Reminder Time"}>
-            <Text onPress={() => this._showTimePicker()} style={timeStyle}>
-              {this.state.time}
-            </Text>
-            <DateTimePicker
+          {/* <MedForm titleText={"Reminder Time"}>
+            <DatePicker
+              style={timeStyle}
+              date={this.state.time}
               mode="time"
-              isVisible={this.state.isTimePickerVisible}
-              onConfirm={this._handleTimePicked}
-              onCancel={this._hideTimePicker}
+              format="HH:mm"
+              confirmBtnText="Confirm"
+              cancelBtnText="Cancel"
+              minuteInterval={10}
+              onDateChange={(time) => { this.setState({ time: time }); }}
             />
+          </MedForm> */}
+
+          <MedForm titleText={"Reminder Time"}>
+            <Content>
+              <ListItem onPress={() => this._onReminderTimePresses("1")}>
+                <Text>Morning</Text>
+                <Right>
+                  <Radio selected={this.state.morning} />
+                </Right>
+              </ListItem>
+              <ListItem onPress={() => this._onReminderTimePresses("2")}>
+                <Text>Lunch</Text>
+                <Right>
+                  <Radio selected={this.state.lunch} />
+                </Right>
+              </ListItem>
+              <ListItem onPress={() => this._onReminderTimePresses("3")}>
+                <Text>Night</Text>
+                <Right>
+                  <Radio selected={this.state.night} />
+                </Right>
+              </ListItem>
+            </Content>
           </MedForm>
 
           <MedForm titleText={"Schedule"}>
-            <Text onPress={() => this._showDatePicker()} style={timeStyle}>
-              {this.state.date}
-            </Text>
-            <DateTimePicker
+            <DatePicker
+              style={timeStyle}
+              date={new Date(this.state.date).toISOString().split('T')[0]}
               mode="date"
-              isVisible={this.state.isDatePickerVisible}
-              onConfirm={this._handleDatePicked}
-              onCancel={this._hideDatePicker}
+              placeholder="placeholder"
+              format="YYYY-MM-DD"
+              minDate={this.state.minDate}
+              confirmBtnText="Confirm"
+              cancelBtnText="Cancel"
+              onDateChange={(date) => { this.setState({ date: date }); }}
             />
           </MedForm>
 
           <Button style={btnAddNoti} onPress={() => this._setNotification()}>
             <Text style={{ color: "#1686C4" }}>Add nonotification</Text>
           </Button>
-
         </Content>
-
       </Container>
     )
   };
 
-  _showTimePicker = () => this.setState({ isTimePickerVisible: true });
-
-  _hideTimePicker = () => this.setState({ isTimePickerVisible: false });
-
-  _showDatePicker = () => this.setState({ isDatePickerVisible: true });
-
-  _hideDatePicker = () => this.setState({ isDatePickerVisible: false });
-
-  _handleTimePicked = (date) => {
-    var time = date.toTimeString().split(' ')[0].split(':')
-    this.setState({ time: time[0] + ':' + time[1] })
-    this._hideTimePicker();
-  }
-
-  _handleDatePicked = (date) => {
-
-    this.setState({ date: date.toDateString() })
-    this._hideDatePicker();
-  }
-
   _setNotification() {
-
-    if (this.state.text) {
-      PushNotification.localNotificationSchedule({
-        id: '1234',
-        title: "ถึงเวลารับประทานยา " + this.state.text,
-        message: "My Notification Message",
-        date: new Date(Date.now() + (5 * 1000)),
-        actions: '["Yes", "No"]',
-      })
+    // if (this.state.text) {
+    //   PushNotification.localNotificationSchedule({
+    //     id: '1234',
+    //     title: "ถึงเวลารับประทานยา " + this.state.text,
+    //     message: "My Notification Message",
+    //     date: new Date(Date.now() + (5 * 1000)),
+    //     actions: '["Yes", "No"]',
+    //   })
+    // }
+
+
+    ToastAndroid.show(this.state.date.toString(), ToastAndroid.SHORT)
   }
 
+  _onReminderTimePresses(id) {
+    switch (id) {
+      case '1':
+        this.setState({ morning: !this.state.morning, lunch: false, night: false })
+        break
+      case '2':
+        this.setState({ lunch: !this.state.lunch, morning: false, night: false })
+        break
+      case '3':
+        this.setState({ night: !this.state.night, morning: false, lunch: false })
+        break
+    }
   }
 
   _onMenuPressed() {
@@ -147,9 +173,8 @@ class MedicationsScreen extends Component {
 
 const styles = {
   timeStyle: {
-    fontSize: 18,
-    color: "#1686C4",
     padding: 15,
+    width: 200,
   },
   btnAddNoti: {
     justifyContent: 'center',