title: React Native Tab Bar white space under tabs
body: <p>I am using a tab bar navigator with SafeAreaView. </p>
  
  <p>If I comment out the tab bar nav the parent view covers the entire screen. However when I add a Tab bar it shows a small white view under the tab bar section. </p>
  
  <pre><code>const App = () =&gt; {
    return (
      &lt;SafeAreaView style={styles.droidSafeArea}&gt;
        &lt;View style={{ backgroundColor: "red", flex: 1 }}&gt;
          &lt;TabNavigator key="MainTabNav" /&gt;
        &lt;/View&gt;
      &lt;/SafeAreaView&gt;
    );
  };
  
  export default App;
  
  const styles = StyleSheet.create({
    droidSafeArea: {
      flex: 1,
      backgroundColor: "#2F3438",
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/oX7uU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oX7uU.png" alt="enter image description here"></a></p>