title: I have SafeAreaView at root of my app but I want a full screen backgroundColor (including the top and bottom of safeAreaView ) at few screens in app
body: <p>I am using <code>SafeAreaView</code> in the root of my project App.js. But some screens need full white background from top to bottom. Since I am using <code>SafeAreaView</code> in root every screen view starts after <code>SafeAreaView</code> even making a view with <code>absolute</code> position of the height of the <code>SafeAreaView</code> doesn't work like this: </p>
  
  <pre><code>render() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={[styles.hideSafeAreaView, { top: 0 }]} /&gt;
        {/*....*/}
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: whiteTextColor,
      padding: 12
    },
    hideSafeAreaView: {
      position: "absolute",
      backgroundColor: whiteTextColor,
      right: 0,
      left: 0,
      height: 44
    }
  });
  </code></pre>
  
  <p>This is my app.js</p>
  
  <pre><code>render() {
    return (
      &lt;ImageBackground style={styles.container} source={APP_BACKGROUND_IMAGE}&gt;
        &lt;SafeAreaView style={styles.container}&gt;
          &lt;AppNavigator /&gt;
        &lt;/SafeAreaView&gt;
      &lt;/ImageBackground&gt;
    );
  }
  </code></pre>
  
  <p>Thanks in advance.</p>