From 038f057e9951b82c168ca6677bf934319f9b1f6a Mon Sep 17 00:00:00 2001
From: assaf <asssaf@localhost>
Date: Sun, 8 Oct 2017 14:49:21 -0700
Subject: [PATCH] add proper back button on header

---
 App.js         |  6 ++----
 Header.js      | 32 ++++++++++++++++++++++++++------
 JoinStation.js |  4 +---
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/App.js b/App.js
index 78e859b..672105a 100644
--- a/App.js
+++ b/App.js
@@ -465,16 +465,14 @@ export default class App extends React.Component {
           onJoin={this.handleJoin.bind(this)}
           onMessages={this.handleMessages.bind(this)}
           onPoll={this.handlePoll.bind(this)}
-          onHeaderClick={this.confirmLogout.bind(this)}
+          onBackPress={this.confirmLogout.bind(this)}
         />
       )
     }
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={this.confirmLeave.bind(this)}>
-          <Header title={this.formatStation(true)} />
-        </TouchableOpacity>
+        <Header title={this.formatStation(true)} onLeftButtonPress={this.confirmLeave.bind(this)}/>
 
         <FlatList
           ref={(list) => this.listRef = list}
diff --git a/Header.js b/Header.js
index 3331b1e..c384eff 100644
--- a/Header.js
+++ b/Header.js
@@ -1,14 +1,25 @@
 import React from 'react';
-import {View, Text, StyleSheet, StatusBar} from 'react-native';
+import {View, Text, StyleSheet, StatusBar, TouchableOpacity} from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
 
 export default class Header extends React.Component {
   render() {
     return (
       <View style={styles.header}>
         <StatusBar backgroundColor="lightseagreen" barStyle="light-content" />
-        <Text style={styles.title}>
-          {this.props.title}
-        </Text>
+        <View style={styles.row}>
+          <TouchableOpacity disabled={!this.props.onLeftButtonPress} onPress={this.props.onLeftButtonPress}>
+            <View style={styles.leftButton}>
+              {this.props.onLeftButtonPress &&
+                <FontAwesome name="angle-left" size={32} color="white" />
+              }
+            </View>
+          </TouchableOpacity>
+          <Text style={styles.title}>
+            {this.props.title}
+          </Text>
+          <Text style={styles.rightButton}></Text>
+        </View>
       </View>
     )
   }
@@ -16,9 +27,8 @@ export default class Header extends React.Component {
 
 const styles = StyleSheet.create({
   header: {
-    height: 80,
+    height: 76,
     backgroundColor: 'lightseagreen',
-    alignItems: 'center',
     justifyContent: 'flex-end',
     padding: 10,
   },
@@ -27,4 +37,14 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     fontSize: 24,
   },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  leftButton: {
+    width: 32
+  },
+  rightButton: {
+    width: 32
+  },
 });
diff --git a/JoinStation.js b/JoinStation.js
index 4ca0517..c3d39b4 100644
--- a/JoinStation.js
+++ b/JoinStation.js
@@ -77,9 +77,7 @@ export default class JoinStation extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        <TouchableOpacity onPress={this.props.onHeaderClick}>
-          <Header title="Join a Station" />
-        </TouchableOpacity>
+        <Header title="Join a Station" onLeftButtonPress={this.props.onBackPress} />
 
         <View style={styles.formRow}>
           <Text style={styles.formLabel}>Ship</Text>