title: React-native header title image is cut off, why?
body: <p>So I'm working on a react-native application and I am using react-navigation for my navigation, using an image in the headerTitle in the screen options works however the image is cut off. I've tried messing with the height/width of the image, wondered if it was a padding issue with the header yet still nothing. Any ideas why?</p>
  
  <p>Here is the component </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { View, Image, StyleSheet } from "react-native";
  
  function HeaderLogo(props) {
      return(
          &lt;Image style={styles.logoStyles} source={require("../../assets/images/svg/LogoNoTxt.png")}/&gt;
      );
  };
  
  const styles = StyleSheet.create({
      logoStyles: {
          height: 40,
          width: 40,
      },
  });
  
  export default HeaderLogo</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the stack navigator</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { createStackNavigator } from '@react-navigation/stack';
  
  //Components
  import HeaderLogo from "../../components/images/HeaderLogo";
  
  //TopTab
  import HomeTopTabNavigator from "../topTab/HomeTopTabNavigator";
  
  //Screens
  import AddTasks from "../../screens/home/AddTasks";
  
  //Initialize vars
  const Stack = createStackNavigator();
  
  function HomeStackNavigator() {
      return(
          &lt;Stack.Navigator screenOptions={defaultOptions}&gt;
              &lt;Stack.Screen name="Home" component={HomeTopTabNavigator}/&gt;
              &lt;Stack.Screen name="AddTasks" component={AddTasks}/&gt;
          &lt;/Stack.Navigator&gt;
      );
  };
  
  //Options
  const defaultOptions = {
      headerStyle: {
          elevation: 0,
          shadowColor: "transparent",
      },
      //headerTitleAlign: "center",
      headerTitle: (
          &lt;HeaderLogo /&gt;
      ),
      headerTitleAlign: "center",
  };
  
  export default HomeStackNavigator;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/nm7Bg.png" rel="nofollow noreferrer">Image of Logo on the header (cut off)</a></p>