add/delete reminder almost finish

src/components/MedForm.js

-import React, { Component } from 'react';
+import React from 'react';
 import {
   View,
   Text,

src/components/MedicineDetailCard.js

+import React from 'react'
+import { Alert } from 'react-native'
+import {
+  Container,
+  View,
+  Text,
+  Button,
+} from 'native-base'
+import moment from 'moment'
+import { Grid, Col } from 'react-native-easy-grid';
+import { ToastAndroid } from 'react-native';
+import PushNotification from 'react-native-push-notification';
+import realm from './../Database';
+
+class MedicineDetailCard extends React.Component {
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { headerStyle, timeTitleStyle, detailStyle, btnStyle } = styles;
+
+    const { id, medName, reminderTime, meal } = this.props.item
+
+    return (
+      <View style={{ flex: 1, marginTop: 10 }}>
+        <View style={timeTitleStyle}>
+          <Text style={{ color: 'white', fontSize: 20 }}>{moment(reminderTime).format('HH:mm')}</Text>
+        </View>
+        <View style={detailStyle}>
+          <Text>{medName}</Text>
+          <Text>Take 2</Text>
+        </View>
+        <View>
+          <Grid>
+            <Col>
+              <Button full style={btnStyle} >
+                <Text style={{ color: "#1686C4" }}>Delete</Text>
+              </Button>
+            </Col>
+            <Col>
+              <Button full style={btnStyle} onPress={() => this._cancleNotification(id)}>
+                <Text style={{ color: "#1686C4" }}>Delete</Text>
+              </Button>
+            </Col>
+          </Grid>
+
+
+        </View>
+      </View>
+    )
+  }
+
+  _cancleNotification(id) {
+    Alert.alert(
+      'Alert',
+      'Are you sure to delete this reminder ?',
+      [
+        {
+          text: 'OK', onPress: () => {
+            PushNotification.cancelLocalNotifications({ id })
+            realm.write(() => {
+              let myReminder = realm.objects('Reminder').filtered('id == ' + id)
+              realm.delete(myReminder)
+              ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+            })
+          }
+        },
+      ],
+      { cancelable: false }
+    )
+
+
+  }
+}
+
+const styles = {
+  timeTitleStyle: {
+    height: 60,
+    justifyContent: 'center',
+    backgroundColor: "#1686c4",
+    padding: 10,
+  },
+  detailStyle: {
+    padding: 10,
+  },
+  btnStyle: {
+    backgroundColor: 'white',
+
+  }
+}
+
+export default MedicineDetailCard;
\ No newline at end of file

src/components/ReminderList.js

+import React from 'react';
+import { ToastAndroid } from 'react-native';
+import {
+  View,
+  Text,
+  List,
+  ListItem,
+} from 'native-base';
+
+
+class ReminderList extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const { containerStyle } = styles
+    return (
+      <View>
+        <Text>{this.props.periodText}</Text>
+        <View style={containerStyle}>
+          <List dataArray={this.props.items}
+            renderRow={(item) =>
+              <ListItem>
+                <Text>{item.medName}</Text>
+              </ListItem>
+            }>
+          </List>
+        </View>
+      </View>
+    )
+  }
+
+}
+
+const styles = {
+  containerStyle: {
+    flex: 1,
+    height: 200,
+    backgroundColor: 'white',
+    borderWidth: 5,
+    borderRadius: 2,
+    borderColor: '#1686C4',
+    borderBottomWidth: 0,
+    elevation: 1,
+  }
+}
+
+export default ReminderList
\ No newline at end of file

src/navigators/RootNavigator.js

@@ -8,16 +8,24 @@ import SettingsScreen from './../screens/SettingsScreen';
 import MedicationsScreen from './../screens/MedicationsScreen';
 import SignInScreen from './../screens/SignInScreen';
 import MainScreen from './../screens/MainScreen';
+import SettingsTimePeriod from './../screens/SettingsTimePeriod'
+import ReminderDetail from './../screens/ReminderDetail'
 
 const RootNavigator = StackNavigator(
   {
-    SignIn: {
-      screen: SignInScreen,
-    },
     Home: {
       screen: DrawerNavigator({
         Home: {
-          screen: HomeScreen,
+          screen: StackNavigator({
+            Home: {
+              screen: HomeScreen
+            },
+            Detail: {
+              screen: ReminderDetail
+            }
+          }, {
+              headerMode: 'none'
+            })
         },
         Camera: {
           screen: StackNavigator({
@@ -35,10 +43,22 @@ const RootNavigator = StackNavigator(
           screen: MedicationsScreen
         },
         Settings: {
-          screen: SettingsScreen,
+          screen: StackNavigator({
+            Settings: {
+              screen: SettingsScreen
+            },
+            SettingsTime: {
+              screen: SettingsTimePeriod
+            }
+          }, {
+              headerMode: 'none'
+            })
         }
       })
-    }
+    },
+    SignIn: {
+      screen: SignInScreen,
+    },
   }, {
     headerMode: 'none'
   }

src/screens/HomeScreen.js

 import React, { Component } from 'react';
-import { ToastAndroid } from 'react-native';
+import { ToastAndroid, AsyncStorage, TouchableOpacity } from 'react-native';
 import {
   Container,
   Content,
@@ -18,30 +18,29 @@ import {
   Grid
 } from 'react-native-easy-grid'
 import AppHeader from './../components/Header';
-import Realm from 'realm';
-
-let realm = new Realm({
-  schema: [{
-    name: 'Reminder',
-    properties: {
-      medName: 'string',
-      reminderTime: 'date'
-    }
-  }]
-})
+import ReminderList from './../components/ReminderList';
+import { formatDate } from './../Utils';
+import realm from './../Database';
 
 class HomeScreen extends Component {
   constructor() {
     super();
     this.state = {
+      firstLaunch: null,
       active: false,
-      today: this.formatDate(new Date(Date.now()))
+      today: formatDate(new Date(Date.now())),
+      initDB: false,
+      morningReminder: [],
+      afternoonReminder: [],
+      eveningReminder: [],
+      nightReminder: [],
     };
   }
 
   componentWillMount() {
-    let myReminder = realm.objects('Reminder')
-    ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
+    this._isFirstLaunched()
+    this._initDB()
+    this._queryReminder()
   }
 
   render() {
@@ -68,38 +67,38 @@ class HomeScreen extends Component {
           <Grid>
             <Col>
               <Row>
-                <View style={timePeriodLeftStyle}>
-                  <Text>Morning</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.morningReminder)}>
+                  <ReminderList
+                    periodText={"Morning"}
+                    items={this.state.morningReminder}
+                  />
+                </TouchableOpacity>
               </Row>
               <Row>
-                <View style={timePeriodLeftStyle}>
-                  <Text>Afternoon</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.afternoonReminder)}>
+                  <ReminderList
+                    periodText={"Afternoon"}
+                    items={this.state.afternoonReminder}
+                  />
+                </TouchableOpacity>
               </Row>
             </Col>
             <Col>
               <Row>
-                <View style={timePeriodRightStyle}>
-                  <Text>Evening</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.eveningReminder)}>
+                  <ReminderList
+                    periodText={"Evening"}
+                    items={this.state.eveningReminder}
+                  />
+                </TouchableOpacity>
               </Row>
               <Row>
-                <View style={timePeriodRightStyle}>
-                  <Text>Night</Text>
-                  <View style={containerStyle}>
-
-                  </View>
-                </View>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.nightReminder)}>
+                  <ReminderList
+                    periodText={"Night"}
+                    items={this.state.nightReminder}
+                  />
+                </TouchableOpacity>
               </Row>
             </Col>
           </Grid>
@@ -125,36 +124,84 @@ class HomeScreen extends Component {
     this.props.navigation.navigate('DrawerToggle');
   }
 
-  formatDate(date) {
-    var monthNames = [
-      "January", "February", "March",
-      "April", "May", "June", "July",
-      "August", "September", "October",
-      "November", "December"
-    ];
+  _timePeriodPress(data) {
+    ToastAndroid.show(JSON.stringify(data), ToastAndroid.SHORT)
+    this.props.navigation.navigate('Detail', { items: data })
+  }
+
+  _queryReminder() {
+    let myReminder = realm.objects('Reminder')
+    let morningReminder = myReminder.filtered('period == 1')
+    let afternoonReminder = myReminder.filtered('period == 2')
+    let eveningReminder = myReminder.filtered('period == 3')
+    let nightReminder = myReminder.filtered('period == 4')
+
+    var tmpMorning = []
+    morningReminder.forEach(i => {
+      tmpMorning.push(i)
+    });
+
+    var tmpAfternoon = []
+    afternoonReminder.forEach(i => {
+      tmpAfternoon.push(i)
+    })
 
-    var day = date.getDate();
-    var monthIndex = date.getMonth();
+    var tmpEvening = []
+    eveningReminder.forEach(i => {
+      tmpEvening.push(i)
+    })
 
-    return 'Today, ' + day + ' ' + monthNames[monthIndex];
+    var tmpNight = []
+    nightReminder.forEach(i => {
+      tmpNight.push(i)
+    })
+
+
+    this.setState({ morningReminder: tmpMorning, afternoonReminder: tmpAfternoon, eveningReminder: tmpEvening, nightReminder: tmpNight })
+
+    // ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.LONG)
+    ToastAndroid.show(JSON.stringify(this.state.morningReminder), ToastAndroid.LONG)
+  }
+
+  _isFirstLaunched() {
+    AsyncStorage.getItem("alreadyLaunched").then(value => {
+      if (value == null) {
+        AsyncStorage.setItem('alreadyLaunched', 'true')
+          .catch(error => {
+            ToastAndroid.show(error.toString(), ToastAndroid.SHORT)
+          }) // No need to wait for `setItem` to finish, although you might want to handle errors
+        this.setState({ firstLaunch: true });
+        ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
+      } else {
+        this.setState({ firstLaunch: false });
+        ToastAndroid.show("Frist Launch:" + this.state.firstLaunch, ToastAndroid.LONG)
+      }
+    }) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null})
+  }
+
+  _initDB() {
+
+    AsyncStorage.getItem("alreadyInitDB").then(value => {
+      if (value == null) {
+        ToastAndroid.show("Init DB", ToastAndroid.LONG)
+        AsyncStorage.setItem('alreadyInitDB', 'true')
+        realm.write(() => {
+          realm.create('TimePeriod', {
+            morning: '08:00',
+            afternoon: '12:00',
+            evening: '16:00',
+            night: '20:00'
+          })
+        })
+      }
+    })
   }
 
 }
 
 const styles = {
-  containerStyle: {
-    flex: 1,
-    backgroundColor: 'white',
-    borderWidth: 5,
-    borderRadius: 2,
-    borderColor: '#1686C4',
-    borderBottomWidth: 0,
-    elevation: 1,
-    padding: 10
-  },
   timePeriodLeftStyle: {
     flex: 1,
-    height: 200,
     marginLeft: 20,
     marginRight: 10,
     marginTop: 20,
@@ -162,7 +209,6 @@ const styles = {
   },
   timePeriodRightStyle: {
     flex: 1,
-    height: 200,
     marginLeft: 10,
     marginRight: 20,
     marginTop: 20,

src/screens/MainScreen.js

@@ -23,7 +23,8 @@ class MainScreen extends Component {
 
 
   render() {
-    return this.state.user != null ? <HomeScreen /> : <SignInScreen />;
+    // return this.state.user != null ? <HomeScreen /> : <SignInScreen />;
+    return <HomeScreen />
   }
 }
 

src/screens/MedicationsScreen.js

 import React, { Component } from 'react';
-import { DeviceEventEmitter, ToastAndroid } from 'react-native';
+import { DeviceEventEmitter, ToastAndroid, Alert } from 'react-native';
 import PushNotification from 'react-native-push-notification';
 import {
   Container,
@@ -14,22 +14,38 @@ import {
   Input,
   ListItem,
   Radio,
-  Right
+  Right,
+  Left,
+  Body,
 } from 'native-base';
 import DatePicker from 'react-native-datepicker';
 import AppHeader from './../components/Header';
 import MedForm from '../components/MedForm';
-import Realm from 'realm';
-
-let realm = new Realm({
-  schema: [{
-    name: 'Reminder',
-    properties: {
-      medName: 'string',
-      reminderTime: 'date'
-    }
-  }]
-})
+import { formatDate, scheduleLocalNotification } from './../Utils';
+import moment from 'moment'
+import realm from './../Database'
+import { Grid, Col } from 'react-native-easy-grid';
+
+PushNotification.configure({
+  // (required) Called when a remote or local notification is opened or received
+  onNotification: function (notification) {
+    ToastAndroid.show(JSON.stringify(notification.id), ToastAndroid.LONG)
+
+    // process the notification
+
+  },
+
+  // Should the initial notification be popped automatically
+  // default: true
+  popInitialNotification: true,
+
+  /**
+    * (optional) default: true
+    * - Specified if permissions (ios) and token (android and ios) will requested or not,
+    * - if not, you must call PushNotificationsHandler.requestPermissions() later
+    */
+  requestPermissions: true,
+});
 
 class MedicationsScreen extends Component {
 
@@ -40,16 +56,21 @@ class MedicationsScreen extends Component {
       date: new Date(Date.now()).toISOString().split('T')[0],
       reminderDate: new Date(Date.now()),
       minDate: new Date(Date.now()).toISOString().split('T')[0],
-      morning: true,
-      lunch: false,
-      night: false
+      morning: false,
+      afternoon: false,
+      evening: false,
+      night: false,
+      morningTime: "",
+      afternoonTime: "",
+      eveningTime: "",
+      nightTime: "",
+      beforeMeal: true,
+      afterMeal: false,
     };
   }
 
   componentWillMount() {
 
-    this.init()
-
     PushNotification.registerNotificationActions(['Yes', 'No']);
     DeviceEventEmitter.addListener('notificationActionReceived', function (action) {
       console.log('Notification action received: ' + action);
@@ -62,6 +83,17 @@ class MedicationsScreen extends Component {
       }
 
     });
+
+    let timePeriod = realm.objects('TimePeriod')
+    var morningTime = timePeriod[0].morning
+    var afternoonTime = timePeriod[0].afternoon
+    var eveningTime = timePeriod[0].evening
+    var nightTime = timePeriod[0].night
+
+    this.setState({ morningTime, afternoonTime, eveningTime, nightTime })
+
+    // ToastAndroid.show(morningTime + afternoonTime + eveningTime + nightTime, ToastAndroid.SHORT)
+
   }
 
   render() {
@@ -93,29 +125,66 @@ class MedicationsScreen extends Component {
 
           <MedForm titleText={"Reminder Time"}>
             <Content>
-              <ListItem onPress={() => this._onReminderTimePresses("1")}>
-                <Text>Morning</Text>
+              <ListItem onPress={() => this._onReminderTimePresses(1)}>
+                <Radio selected={this.state.morning} />
+                <Body>
+                  <Text>Morning</Text>
+                </Body>
+                <Right>
+                  <Text>{this.state.morningTime}</Text>
+                </Right>
+              </ListItem>
+              <ListItem onPress={() => this._onReminderTimePresses(2)}>
+                <Radio selected={this.state.afternoon} />
+                <Body>
+                  <Text>Afternoon</Text>
+                </Body>
                 <Right>
-                  <Radio selected={this.state.morning} onPress={() => this._onReminderTimePresses("1")} />
+                  <Text>{this.state.afternoonTime}</Text>
                 </Right>
               </ListItem>
-              <ListItem onPress={() => this._onReminderTimePresses("2")}>
-                <Text>Lunch</Text>
+              <ListItem onPress={() => this._onReminderTimePresses(3)}>
+                <Radio selected={this.state.evening} />
+                <Body>
+                  <Text>Evening</Text>
+                </Body>
                 <Right>
-                  <Radio selected={this.state.lunch} onPress={() => this._onReminderTimePresses("2")} />
+                  <Text>{this.state.eveningTime}</Text>
                 </Right>
               </ListItem>
-              <ListItem onPress={() => this._onReminderTimePresses("3")}>
-                <Text>Night</Text>
+              <ListItem onPress={() => this._onReminderTimePresses(4)}>
+                <Radio selected={this.state.night} />
+                <Body>
+                  <Text>Night</Text>
+                </Body>
                 <Right>
-                  <Radio selected={this.state.night} onPress={() => this._onReminderTimePresses("3")} />
+                  <Text>{this.state.nightTime}</Text>
                 </Right>
               </ListItem>
             </Content>
           </MedForm>
 
+          <MedForm titleText={"Before/After Meal"}>
+            <Content>
+              <ListItem onPress={() => this._setBeforeAfterMeal(1)}>
+                <Radio selected={this.state.beforeMeal} />
+                <Body>
+                  <Text>Before</Text>
+                </Body>
+              </ListItem>
+              <ListItem onPress={() => this._setBeforeAfterMeal(2)}>
+                <Radio selected={this.state.afterMeal} />
+                <Body>
+                  <Text>After</Text>
+                </Body>
+              </ListItem>
+            </Content>
+          </MedForm>
+
           <MedForm titleText={"Schedule"}>
-            <DatePicker
+
+            <Text style={timeStyle}>Start date : {formatDate(new Date(Date.now()))}</Text>
+            {/* <DatePicker
               style={timeStyle}
               date={new Date(this.state.date).toISOString().split('T')[0]}
               mode="date"
@@ -125,85 +194,132 @@ class MedicationsScreen extends Component {
               confirmBtnText="Confirm"
               cancelBtnText="Cancel"
               onDateChange={(date) => { this.setState({ date: date }); }}
-            />
+            /> */}
           </MedForm>
 
-          <View>
-            <Button style={btnAddNoti} onPress={() => this._onResetPressed()}>
-              <Text style={{ color: "#1686C4" }}>Reset</Text>
-            </Button>
-
-            <Button style={btnAddNoti} onPress={() => this._setNotification()}>
-              <Text style={{ color: "#1686C4" }}>Add nonotification</Text>
-            </Button>
-          </View>
+          <Grid>
+            <Col>
+              <Button full style={btnAddNoti} onPress={() => this._onResetPressed()}>
+                <Text style={{ color: "#1686C4" }}>Reset</Text>
+              </Button>
+            </Col>
+            <Col>
+              <Button full style={btnAddNoti} onPress={() => this._onAddNotificationPressed()}>
+                <Text style={{ color: "#1686C4" }}>Add</Text>
+              </Button>
+            </Col>
 
+          </Grid>
 
         </Content>
       </Container>
     )
   };
 
-  init() {
-
+  _setBeforeAfterMeal(id) {
+    switch (id) {
+      case 1:
+        if (!this.state.beforeMeal) {
+          this.setState({ beforeMeal: !this.state.beforeMeal, afterMeal: !this.state.afterMeal })
+        }
+        break
+      case 2:
+        if (!this.state.afterMeal) {
+          this.setState({ afterMeal: !this.state.afterMeal, beforeMeal: !this.state.beforeMeal })
+        }
+        break
+    }
   }
 
-  setReminderDate() {
+  _onAddNotificationPressed() {
 
-    var reminderDate = this.state.reminderDate
+    if (this.state.text && this.state.morning || this.state.afternoon || this.state.evening || this.state.night) {
 
-    if (this.state.morning) {
-      reminderDate = new Date(this.state.date).setHours(8, 0, 0, 0)
-    } else if (this.state.lunch) {
-      reminderDate = new Date(this.state.date).setHours(12, 0, 0, 0)
-    } else if (this.state.night) {
-      reminderDate = new Date(this.state.date).setHours(21, 0, 0, 0)
-    }
 
-    reminderDate = new Date(reminderDate)
+      if (this.state.morning === true) {
+        var time = this.state.morningTime.split(':')
+        this._setNotification(time[0], time[1], 1)
+      }
+      if (this.state.afternoon === true) {
+        var time = this.state.afternoonTime.split(':')
+        this._setNotification(time[0], time[1], 2)
+      }
+      if (this.state.evening === true) {
+        var time = this.state.eveningTime.split(':')
+        this._setNotification(time[0], time[1], 3)
+      }
+      if (this.state.night === true) {
+        var time = this.state.nightTime.split(':')
+        this._setNotification(time[0], time[1], 4)
+      }
 
-    this.setState({ reminderDate })
+      Alert.alert(
+        'Successful',
+        '',
+        [
+          { text: 'OK', onPress: () => ToastAndroid.show("Successful", ToastAndroid.SHORT) },
+        ],
+        { cancelable: false }
+      )
+
+    } else {
+      Alert.alert(
+        'Please enter medine name / Select reminder time',
+        '',
+        [
+          { text: 'OK', onPress: () => ToastAndroid.show("Please enter medine name / Select reminder time", ToastAndroid.SHORT) },
+        ],
+        { cancelable: false }
+      )
 
+    }
   }
 
-  _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) {
-      realm.write(() => {
-        realm.create('Reminder', {
-          medName: this.state.text,
-          reminderTime: this.state.reminderDate
-        })
+  _setNotification(hour, minute, period) {
+
+    var id = Math.random() * 10000
+    var reminderDate = moment().hour(hour).minute(minute).second(0).toDate()
+
+    var beforeMeal = this.state.beforeMeal ? "\tก่อนอาหาร" : "\tหลังอาหาร";
+    var msg = "แจ้งเตือนกินยา\n" + "เวลา: " + hour + ":" + minute + "\nยา: " + this.state.text + beforeMeal;
+    scheduleLocalNotification(msg, reminderDate, id)
+
+    realm.write(() => {
+      realm.create('Reminder', {
+        id: id,
+        medName: this.state.text,
+        reminderTime: reminderDate,
+        meal: beforeMeal.trim(),
+        period: period
       })
-    }
-    ToastAndroid.show(this.state.reminderDate.toString(), ToastAndroid.SHORT)
+    })
+  }
+
 
+  _onResetPressed() {
 
+    realm.write(() => {
+      let allReminder = realm.objects('Reminder')
+      realm.delete(allReminder)
+    })
 
+    let myReminder = realm.objects('Reminder')
   }
 
-  _onReminderTimePresses(id) {
-    switch (id) {
-      case '1':
-        this.setState({ morning: !this.state.morning, lunch: false, night: false })
-        this.setReminderDate()
+  _onReminderTimePresses(pos) {
+
+    switch (pos) {
+      case 1:
+        this.setState({ morning: !this.state.morning })
+        break
+      case 2:
+        this.setState({ afternoon: !this.state.afternoon })
         break
-      case '2':
-        this.setState({ lunch: !this.state.lunch, morning: false, night: false })
-        this.setReminderDate()
+      case 3:
+        this.setState({ evening: !this.state.evening })
         break
-      case '3':
-        this.setState({ night: !this.state.night, morning: false, lunch: false })
-        this.setReminderDate()
+      case 4:
+        this.setState({ night: !this.state.night })
         break
     }
   }
@@ -212,21 +328,20 @@ class MedicationsScreen extends Component {
     this.props.navigation.navigate("DrawerToggle");
   }
 
-  _onResetPressed() {
-
-    let myReminder = realm.objects('Reminder')
-    ToastAndroid.show(JSON.stringify(myReminder), ToastAndroid.SHORT)
-  }
 };
 
 const styles = {
   timeStyle: {
+    flex: 1,
     padding: 15,
-    width: 200,
   },
   btnAddNoti: {
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF'
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    marginTop: 15,
+    marginBottom: 15,
+    marginLeft: 20,
+    marginRight: 20,
   }
 }
 

src/screens/ReminderDetail.js

+import React from 'react';
+import {
+  Container,
+  Content,
+  View,
+  Text,
+  Button,
+  Icon,
+  List,
+  ListItem
+} from 'native-base';
+import AppHeader from './../components/Header';
+import MedicineDetailCard from './../components/MedicineDetailCard';
+import { formatDate } from './../Utils';
+import moment from 'moment';
+
+class ReminderDetail extends React.Component {
+  render() {
+    const { params } = this.props.navigation.state;
+    const { goBack } = this.props.navigation;
+    const items = params ? params.items : null
+
+    const { headerStyle, headerFontStyle } = styles
+
+    return (
+      <Container style={{ backgroundColor: 'white' }}>
+        <AppHeader
+          headerText={"Morning"}
+          headerLeft={
+            <Button onPress={() => goBack()}>
+              <Icon name='arrow-back' />
+            </Button>
+          }
+        />
+
+        <Content>
+          <View style={headerStyle}>
+            <Text style={headerFontStyle}>{formatDate(new Date(Date.now()))}</Text>
+          </View>
+          <List dataArray={items}
+            renderRow={(item) =>
+              <ListItem style={{ marginLeft: 10, paddingLeft: 0, paddingRight: 0, marginRight: 10 }}>
+                <MedicineDetailCard
+                  item={item}
+                />
+              </ListItem>
+            }>
+          </List>
+
+
+        </Content>
+
+      </Container>
+    )
+  }
+}
+
+const styles = {
+  headerStyle: {
+    height: 50,
+    marginTop: 20,
+    marginBottom: 10,
+    justifyContent: 'center'
+  },
+  headerFontStyle: {
+    fontSize: 20,
+    textAlign: 'center',
+  }
+}
+
+export default ReminderDetail;
\ No newline at end of file

src/screens/SettingsScreen.js

@@ -12,6 +12,12 @@ import AppHeader from '../components/Header';
 import BtnSettings from '../components/BtnSettings';
 
 class Menu extends Component {
+
+  constructor(props) {
+    super(props);
+    this.props.navigation.state.key = 'SettingsScreen'
+  }
+
   render() {
     return (
       <Container>
@@ -32,6 +38,12 @@ class Menu extends Component {
                 ToastAndroid.show("Language", ToastAndroid.SHORT)
               }}
             />
+            <BtnSettings
+              text={"Time Period"}
+              onPress={() => {
+                this.props.navigation.navigate('SettingsTime', { keyBScreen: this.props.navigation.state.key });
+              }}
+            />
             <BtnSettings
               text={"Log Out"}
               onPress={() => {

src/screens/SettingsTimePeriod.js

+import React from 'react';
+import { ToastAndroid, View, TimePickerAndroid, Alert } from 'react-native';
+import {
+  Container,
+  Content,
+  Button,
+  Icon,
+  Text,
+  Left,
+  Right
+} from 'native-base'
+import AppHeader from './../components/Header';
+import BtnSettings from './../components/BtnSettings';
+import moment from 'moment';
+import realm from './../Database';
+
+
+
+class SettingTimePeriod extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      morningTime: "",
+      afternoonTime: "",
+      eveningTime: "",
+      nightTime: ""
+    }
+  }
+
+  componentDidMount() {
+    this._queryTimePeriod()
+  }
+
+  render() {
+    const { key } = this.props.navigation.state;
+    const { goBack } = this.props.navigation;
+    const { btnTimeStyle, fontStyle } = styles
+
+    return (
+      <Container>
+        <AppHeader
+          headerText={"Time Period"}
+          headerLeft={
+            <Button onPress={() => goBack(key.keyBScreen)}>
+              <Icon name='arrow-back' />
+            </Button>
+          }
+        />
+
+        <Content style={{ marginTop: 50 }}>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(1)}>
+              <Left>
+                <Text style={fontStyle}>Morning</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.morningTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(2)}>
+              <Left>
+                <Text style={fontStyle}>Afternoon</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.afternoonTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(3)}>
+              <Left>
+                <Text style={fontStyle}>Evening</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.eveningTime}</Text>
+              </Right>
+            </Button>
+          </View>
+          <View style={{ borderBottomColor: '#EEEEEE', borderBottomWidth: 0.5 }}>
+            <Button style={btnTimeStyle} onPress={() => this._timePicker(4)}>
+              <Left>
+                <Text style={fontStyle}>Night</Text>
+              </Left>
+              <Right>
+                <Text style={fontStyle}>{this.state.nightTime}</Text>
+              </Right>
+            </Button>
+          </View>
+
+        </Content>
+
+      </Container>
+    )
+  }
+
+  _timePicker(period) {
+    try {
+      const { action, hour, minute } = TimePickerAndroid
+        .open({
+          is24Hour: true, // Will display '2 PM'
+        })
+        .then(({ action, hour, minute }) => {
+          switch (action) {
+            case "timeSetAction":
+              Alert.alert(
+                'Confirm',
+                '',
+                [
+                  { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
+                  { text: 'OK', onPress: () => this._setTime(hour, minute, period) },
+                ],
+                { cancelable: false }
+              )
+              break;
+            case "dismissedAction":
+              break;
+          }
+        })
+
+    } catch ({ code, message }) {
+      console.warn('Cannot open time picker', message);
+    }
+  }
+
+  _setTime(hour, minute, period) {
+    let timePeriod = realm.objects("TimePeriod")
+    switch (period) {
+      case 1:
+        realm.write(() => {
+          timePeriod[0].morning = this._formatDate(hour, minute)
+        })
+        this.setState({ morningTime: this._formatDate(hour, minute) })
+        break;
+      case 2:
+        realm.write(() => {
+          timePeriod[0].afternoon = this._formatDate(hour, minute)
+        })
+        this.setState({ afternoonTime: this._formatDate(hour, minute) })
+        break;
+      case 3:
+        realm.write(() => {
+          timePeriod[0].evening = this._formatDate(hour, minute)
+        })
+        this.setState({ eveningTime: this._formatDate(hour, minute) })
+        break;
+      case 4:
+        realm.write(() => {
+          timePeriod[0].night = this._formatDate(hour, minute)
+        })
+        this.setState({ nightTime: this._formatDate(hour, minute) })
+        break;
+    }
+  }
+
+  _formatDate(hour, minute) {
+    return moment(hour + ":" + minute, 'HH:mm').format('HH:mm').toString()
+  }
+
+
+  _queryTimePeriod() {
+    let timePeriod = realm.objects('TimePeriod')
+    var morningTime = timePeriod[0].morning
+    var afternoonTime = timePeriod[0].afternoon
+    var eveningTime = timePeriod[0].evening
+    var nightTime = timePeriod[0].night
+
+    this.setState({ morningTime, afternoonTime, eveningTime, nightTime })
+  }
+}
+
+const styles = {
+  btnTimeStyle: {
+    height: 60,
+    backgroundColor: 'white',
+    padding: 20,
+  },
+  fontStyle: {
+    fontFamily: 'sans-serif-light',
+    fontSize: 18
+  }
+}
+
+export default SettingTimePeriod;
\ No newline at end of file