Working login on mobile

mobile/src/screens/Home.js

@@ -1,44 +1,63 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { api } from '../API'
 
 export class Home extends React.Component {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        icon: require('./images/ar-glases.png'),
+        id: 'arview',
+      }
+    ],
+    leftButtons: [
+      {
+        icon: require('./images/logout.png'),
+        id: 'logout',
+      }
+    ]
+  }
+
+  static styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  })
+
   constructor(props) {
     super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this))
   }
 
   onNavigatorEvent(event) {
-    switch(event.id) {
+    switch (event.id) {
+      case 'logout':
+        api.logout().then(() => {
+          this.props.navigator.showModal({ screen: 'app.Login' })
+        })
       case 'willAppear':
-       break;
+        break
       case 'didAppear':
-        this.props.navigator.showModal({ screen: 'app.Login' })
+        if (!api.loggedInUser) {
+          this.props.navigator.showModal({ screen: 'app.Login' })
+        }
         break;
       case 'willDisappear':
-        break;
+        break
       case 'didDisappear':
-        break;
+        break
       case 'willCommitPreview':
-        break;
+        break
     }
   }
 
   render() {
     return (
-      <View style={styles.container}>
-        <Text>Hello John</Text>
-        <Text>Changes you make will automatically reload.</Text>
-        <Text>Shake your phone to open the developer menu.</Text>
+      <View style={Home.styles.container}>
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});