change navigation style

src/navigators/RootNavigator.js

 import React, { Component } from 'react';
-import { DrawerNavigator, StackNavigator } from 'react-navigation';
+import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation';
 
 import HomeScreen from './../screens/HomeScreen';
 import CameraScreen from './../screens/CameraScreen';
@@ -14,7 +14,7 @@ import ReminderDetail from './../screens/ReminderDetail'
 const RootNavigator = StackNavigator(
   {
     Home: {
-      screen: DrawerNavigator({
+      screen: TabNavigator({
         Home: {
           screen: StackNavigator({
             Home: {
@@ -54,7 +54,19 @@ const RootNavigator = StackNavigator(
               headerMode: 'none'
             })
         }
-      })
+      }, {
+          tabBarPosition: 'bottom',
+          swipeEnabled: false,
+          tabBarOptions: {
+            labelStyle: {
+              color: 'black'
+            },
+            style: {
+              backgroundColor: 'white',
+
+            }
+          }
+        })
     },
     SignIn: {
       screen: SignInScreen,
@@ -64,5 +76,4 @@ const RootNavigator = StackNavigator(
   }
 )
 
-
 export default RootNavigator;
\ No newline at end of file

src/screens/HomeScreen.js

@@ -67,7 +67,7 @@ class HomeScreen extends Component {
           <Grid>
             <Col>
               <Row>
-                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.morningReminder)}>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.morningReminder, 1)}>
                   <ReminderList
                     periodText={"Morning"}
                     items={this.state.morningReminder}
@@ -75,7 +75,7 @@ class HomeScreen extends Component {
                 </TouchableOpacity>
               </Row>
               <Row>
-                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.afternoonReminder)}>
+                <TouchableOpacity style={timePeriodLeftStyle} onPress={() => this._timePeriodPress(this.state.afternoonReminder, 2)}>
                   <ReminderList
                     periodText={"Afternoon"}
                     items={this.state.afternoonReminder}
@@ -85,7 +85,7 @@ class HomeScreen extends Component {
             </Col>
             <Col>
               <Row>
-                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.eveningReminder)}>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.eveningReminder, 3)}>
                   <ReminderList
                     periodText={"Evening"}
                     items={this.state.eveningReminder}
@@ -93,7 +93,7 @@ class HomeScreen extends Component {
                 </TouchableOpacity>
               </Row>
               <Row>
-                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.nightReminder)}>
+                <TouchableOpacity style={timePeriodRightStyle} onPress={() => this._timePeriodPress(this.state.nightReminder, 4)}>
                   <ReminderList
                     periodText={"Night"}
                     items={this.state.nightReminder}
@@ -124,9 +124,9 @@ class HomeScreen extends Component {
     this.props.navigation.navigate('DrawerToggle');
   }
 
-  _timePeriodPress(data) {
+  _timePeriodPress(data, period) {
     ToastAndroid.show(JSON.stringify(data), ToastAndroid.SHORT)
-    this.props.navigation.navigate('Detail', { items: data })
+    this.props.navigation.navigate('Detail', { items: data, period: period })
   }
 
   _queryReminder() {

src/screens/ReminderDetail.js

@@ -19,13 +19,14 @@ class ReminderDetail extends React.Component {
     const { params } = this.props.navigation.state;
     const { goBack } = this.props.navigation;
     const items = params ? params.items : null
+    const period = params.period == 1 ? "Mornign" : params.period == 2 ? "Afternoon" : params.period == 3 ? "Evening" : "Night"
 
     const { headerStyle, headerFontStyle } = styles
 
     return (
       <Container style={{ backgroundColor: 'white' }}>
         <AppHeader
-          headerText={"Morning"}
+          headerText={period}
           headerLeft={
             <Button onPress={() => goBack()}>
               <Icon name='arrow-back' />