title: React Navigation - padding bottom on header not working
body: <p>In my React-Native app I have an icon and <a href="https://react-native-training.github.io/react-native-elements/docs/searchbar.html" rel="nofollow noreferrer">SearchBar</a> in my header <a href="https://reactnavigation.org/docs/en/headers.html" rel="nofollow noreferrer">(from react navigation)</a>. </p>
  
  <p>The following code:</p>
  
  <pre><code>static navigationOptions = ({ navigation }) =&gt; {
      const { params = {} } = navigation.state;
      return {
        headerTitle:
          &lt;View style={{ flex: 1, flexDirection: "row", paddingHorizontal: 15, alignItems: "center" }}&gt;
            &lt;StatusBar default style={{ flex: 1, height: getStatusBarHeight() }} /&gt;
            &lt;Icon name="chevron-left" size={28} /&gt;
            &lt;SearchBar round platform={"default"} placeholder="Search" containerStyle={{
              flex: 1, backgroundColor: "transparent"
            }} /&gt;
          &lt;/View&gt;,
        headerStyle: {
          backgroundColor: '#e54b4d',
        }
      };
  }
  </code></pre>
  
  <p>outputs this: <a href="https://i.stack.imgur.com/oiaVK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oiaVK.png" alt=""></a></p>
  
  <p>So far so good. However, I want to have padding below the SearchBar. In other words, I want to have the distance from the top of the screen to the SearchBar as a padding below the SearchBar. (I can obtain the distance value using <code>getStatusBarHeight()</code> from <a href="https://github.com/ovr/react-native-status-bar-height#readme" rel="nofollow noreferrer">rn-status-bar-height</a>)</p>
  
  <p>However, if I put <code>paddingBottom: getStatusBarHeight()</code> to the <code>headerStyle</code>, I get this result:</p>
  
  <p><a href="https://i.stack.imgur.com/VHOeV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VHOeV.png" alt="enter image description here"></a></p>
  
  <p>Basically, now I have the padding that I wanted, however, the StatusBar overlaps with the SearchBar. </p>
  
  <p>How can I put <code>paddingBottom</code> without making the StatusBar and SearchBar overlap?</p>