title: How to truncate 'back' button for headerTitle in react-navigation?
body: <p>I'm using react-navigation with <code>StackNavigator</code>. Is there a way to avoid the overlapping of the back button label and the <code>headerTitle</code> by truncating the back button label?</p>
  
  <pre><code>const MainNavigationOptions = {
      headerStyle: {
          backgroundColor: colors.CiPrimary
      },
      headerTitleStyle: {
          color: 'white',
          height: 50,
          width: 140
      },
      headerTintColor: 'white',
      headerTitle:
      &lt;Text&gt;LONG TEXT FOR TESTING&lt;/Text&gt;
  }
  </code></pre>
  
  <p>Illustration of issue:</p>
  
  <p><a href="https://i.stack.imgur.com/lU8N1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lU8N1.png" alt="Overlapping of back button and header title"></a></p>