Work Item and Activity screens mostly complete

mobile/src/Home/Home.js

@@ -5,6 +5,7 @@ import { Icon, Header } from '../ui'
 import { api } from '../API'
 import autobind from 'autobind-decorator'
 import pinImage from './images/pin.png'
+import { ifIphoneX } from 'react-native-iphone-x-helper'
 
 const styles = StyleSheet.create({
   container: {
@@ -46,24 +47,29 @@ export class Home extends React.Component {
   }
 
   @autobind
-  handleAdminButton() {
-    this.props.history.replace('/admin')
+  handleWorkItemsListPress() {
+    this.props.history.push('/workitemlist')
   }
 
   @autobind
   handleItemSelect(item, index) {
-    this.props.history.replace('/activity')
+    this.props.history.push('/activity')
   }
 
   @autobind
-  handleLogout() {
+  handleLogoutPress() {
     this.props.history.replace('/logout')
   }
 
+  @autobind
+  handleGlassesPress() {
+    this.props.history.push('/arviewer')
+  }
+
   render() {
     return (
       <View style={styles.container}>
-        <Header title='Work Item Map' leftButton={{ icon: 'logout', onPress: this.handleLogout }} rightButton={{ icon: 'glasses' }} />
+        <Header title='Work Item Map' leftButton={{ icon: 'logout', onPress: this.handleLogoutPress }} rightButton={{ icon: 'glasses', onPress: this.handleGlassesPress }} />
         <MapView
           style={{
             width: '100%', height: '50%',
@@ -103,7 +109,7 @@ export class Home extends React.Component {
                   <Text style={{ fontSize: 20 }}>{item.title}</Text>
                   <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
                 </View>
-                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
+                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this.handleItemSelect(item, index))} >
                   <Icon name='rightArrow' size={16} />
                 </TouchableOpacity>
               </View>
@@ -116,12 +122,13 @@ export class Home extends React.Component {
           width: '100%',
           height: 45,
           backgroundColor: '#F4F4F4',
+          ...ifIphoneX({ marginBottom: 22 }, {}),
         }}>
-          <TouchableOpacity onPress={this._handleMyLocation}>
+          <TouchableOpacity onPress={this.handleMyLocationPress}>
             <Icon name='center' size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
           </TouchableOpacity>
           <Text style={{ color: 'gray', fontSize: 20, }}>Hide List</Text>
-          <TouchableOpacity onPress={this._handleAdminButton}>
+          <TouchableOpacity onPress={this.handleWorkItemsListPress}>
             <Icon name='settings' size={24} style={{ marginRight: 15, tintColor: 'gray' }} />
           </TouchableOpacity>
         </View>