title: React navigation header title cut off
body: <p>So basically i'm in the process of learning react native. I'm using the react navigation package and I just want to display a simple header title on my stack navigator but the title cuts off. <a href="https://i.stack.imgur.com/yXnUC.jpg" rel="nofollow noreferrer">Stack nav title</a></p>
  
  <p>This is my <code>App.js</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { View, Text } from 'react-native';
  import { createStackNavigator, createAppContainer} from 'react-navigation'
  import HomeScreen from './screens/HomeScreen'
  import DetailsScreen from './screens/DetailsScreen'
  
  const RootStack = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailsScreen,
    },
    {
      initialRouteName: 'Home'
    }
  );
  
  const AppContainer = createAppContainer(RootStack)
  
  export default class App extends React.Component {
    render(){
      return&lt;AppContainer /&gt;
    }
  }
  </code></pre>
  
  <p>and this is my HomeScreen.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import {Button, View, Text } from 'react-native'
  
  export default class HomeScreen extends React.Component {
  
    static navigationOptions = {
        title: 'Home',
    }
  
    render() {
      return (
        &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
          &lt;Text&gt;Home Screeeen&lt;/Text&gt;
          &lt;Button
            title="Go to Details"
            onPress={() =&gt; this.props.navigation.navigate('Details')}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>It doesnt look like this on my friends phones. I'm using a OnePlus 6 with android 9. They are on older versions of android could that be causing something?</p>