From 8e8c4fb9a14c26feff85bcaebc991eaec4fa1480 Mon Sep 17 00:00:00 2001
From: Mike Grabowski <grabbou@gmail.com>
Date: Wed, 8 Feb 2017 19:08:06 +0100
Subject: [PATCH] Fixes several back button issues (#237)

* Disable header back button label as the feature is still wip

* Fix icon size
---
 src/views/Header.js           | 17 +++++++++++------
 src/views/HeaderBackButton.js | 24 ++++++++++++++++++------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/views/Header.js b/src/views/Header.js
index b915d17..42be92c 100644
--- a/src/views/Header.js
+++ b/src/views/Header.js
@@ -119,16 +119,21 @@ class Header extends React.Component<void, HeaderProps, void> {
       return null;
     }
     const tintColor = this._getHeaderTintColor(props.navigation);
-    const previousNavigation = addNavigationHelpers({
-      ...props.navigation,
-      state: props.scenes[props.scene.index - 1].route,
-    });
-    const backButtonTitle = this._getHeaderTitle(previousNavigation);
+    // @todo(grabobu):
+    // We have implemented support for back button label (which works 100% fine),
+    // but when title is too long, it will overlap the <HeaderTitle />.
+    // We had to revert the PR implementing that because of Android issues,
+    // I will land it this week and re-enable that for next release.
+    //
+    // const previousNavigation = addNavigationHelpers({
+    //   ...props.navigation,
+    //   state: props.scenes[props.scene.index - 1].route,
+    // });
+    // const backButtonTitle = this._getHeaderTitle(previousNavigation);
     return (
       <HeaderBackButton
         onPress={props.onNavigateBack}
         tintColor={tintColor}
-        title={backButtonTitle}
       />
     );
   };
diff --git a/src/views/HeaderBackButton.js b/src/views/HeaderBackButton.js
index b7fd176..0dd9438 100644
--- a/src/views/HeaderBackButton.js
+++ b/src/views/HeaderBackButton.js
@@ -27,7 +27,11 @@ const HeaderBackButton = ({ onPress, title, tintColor }: Props) => (
   >
     <View style={styles.container}>
       <Image
-        style={[styles.button, { tintColor }]}
+        style={[
+          styles.icon,
+          title && styles.iconWithTitle,
+          { tintColor },
+        ]}
         source={require('./assets/back-icon.png')}
       />
       {Platform.OS === 'ios' && title && (
@@ -58,13 +62,16 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 17,
+    paddingRight: 10,
   },
-  button: Platform.OS === 'ios'
+  icon: Platform.OS === 'ios'
     ? {
-      height: 21,
-      width: 13,
-      margin: 10,
-      marginRight: 5,
+      height: 20,
+      width: 12,
+      marginLeft: 10,
+      marginRight: 22,
+      marginVertical: 12,
+      resizeMode: 'contain',
       transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
     }
     : {
@@ -74,6 +81,11 @@ const styles = StyleSheet.create({
       resizeMode: 'contain',
       transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
     },
+  iconWithTitle: Platform.OS === 'ios'
+    ? {
+      marginRight: 5,
+    }
+    : {},
 });
 
 export default HeaderBackButton;