From 42e348000873943bfc912f01e1cc131fa9b40d6c Mon Sep 17 00:00:00 2001
From: Ania Slimak <anna.slimak@lunarlogic.io>
Date: Tue, 23 Aug 2016 06:55:23 +0200
Subject: [PATCH] [Fixed 1087] Long titles display with a dots at the end, not
 hidden behind the buttons

---
 src/NavBar.js | 65 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/NavBar.js b/src/NavBar.js
index 2b555c7ad..13162f2b7 100644
--- a/src/NavBar.js
+++ b/src/NavBar.js
@@ -42,9 +42,13 @@ import _backButtonImage from './back_chevron.png';
 const styles = StyleSheet.create({
   title: {
     textAlign: 'center',
-    marginTop: 10,
-    fontSize: 18,
     color: '#0A0A0A',
+    fontSize: 18,
+    width: 180,
+    alignSelf: 'center',
+  },
+  titleWrapper: {
+    marginTop: 10,
     position: 'absolute',
     ...Platform.select({
       ios: {
@@ -76,7 +80,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
   },
   backButton: {
-    width: 130,
+    width: 100,
     height: 37,
     position: 'absolute',
     ...Platform.select({
@@ -413,32 +417,35 @@ class NavBar extends React.Component {
       title = title(childState);
     }
     return (
-      <Animated.Text
-        {...this.props.titleProps}
-        key={childState.key}
-        style={[
-          styles.title,
-          this.props.titleStyle,
-          this.props.navigationState.titleStyle,
-          childState.titleStyle,
-          {
-            opacity: this.props.position.interpolate({
-              inputRange: [index - 1, index, index + 1],
-              outputRange: [0, this.props.titleOpacity, 0],
-            }),
-            left: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [200, -200],
-            }),
-            right: this.props.position.interpolate({
-              inputRange: [index - 1, index + 1],
-              outputRange: [-200, 200],
-            }),
-          },
-        ]}
-      >
-        {title}
-      </Animated.Text>
+      <Animated.View key={childState.key} style={styles.titleWrapper}>
+        <Animated.Text
+          lineBreakMode="tail"
+          numberOfLines={1}
+          {...this.props.titleProps}
+          style={[
+            styles.title,
+            this.props.titleStyle,
+            this.props.navigationState.titleStyle,
+            childState.titleStyle,
+            {
+              opacity: this.props.position.interpolate({
+                inputRange: [index - 1, index, index + 1],
+                outputRange: [0, this.props.titleOpacity, 0],
+              }),
+              left: this.props.position.interpolate({
+                inputRange: [index - 1, index + 1],
+                outputRange: [200, -200],
+              }),
+              right: this.props.position.interpolate({
+                inputRange: [index - 1, index + 1],
+                outputRange: [-200, 200],
+              }),
+            },
+          ]}
+        >
+          {title}
+        </Animated.Text>
+      </Animated.View>
     );
   }