add proper back button on header

asssaf · Oct 8, 2017 · 038f057 · 038f057
1 parent 49458ee
commit 038f057
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git 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
@@ -1,24 +1,34 @@
 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>
     )
   }
 }
 
 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
@@ -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>