title: Screen going behind bottom material tab bar
body: <p>Hi am working on screens which involves bottom tab bar. For that I have implemented material bottom tab bar from <em>react-navigation-material-bottom-tabs</em>. Problem is my screen is going behind the bottom tab like below</p>
  
  <p>The yellow border was given to see how UI would look like. The bottomline of screen is expected to be just above the bottom bar not behind it.</p>
  
  <p><a href="https://i.stack.imgur.com/MWvqJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MWvqJ.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;SafeAreaView style={{backgroundColor: '#f3f3f5'}}&gt;
      &lt;View
        style={{
          borderWidth: 3,
          borderColor: 'yellow',
          width: width,
          height: height,
          flexDirection: 'column-reverse',
        }}&gt;
        &lt;Header data={headerData} /&gt;
        &lt;LabelledView
          rectanglebarfunc={() =&gt; this.rectanglebarfunc()}
          height={height * 0.07}
          rectanglebarbuttontext={'List Item 01'}
          width={width}
          color="white"
          icolor="#ff007C"
          textColr="#120F3F"
          fontSize={16}
          rectanglebarfunc={() =&gt; {}}
        /&gt;
        &lt;View
          style={{
            width: '100%',
            height: 0.5,
            backgroundColor: 'transparent',
          }}
        /&gt;
        &lt;LabelledView
          rectanglebarfunc={() =&gt; this.rectanglebarfunc()}
          height={height * 0.07}
          rectanglebarbuttontext={'List Item 00'}
          width={width}
          color="white"
          icolor="#ff007C"
          textColr="#120F3F"
          fontSize={16}
          rectanglebarfunc={() =&gt; {}}
        /&gt;
  
        {/* &lt;View
          style={{
            width: '90%',
            height: '70%',
            backgroundColor: 'red',
            alignSelf: 'center',
            marginVertical: 5,
          }}&gt;&lt;/View&gt; */}
      &lt;/View&gt;
    &lt;/SafeAreaView&gt;
  </code></pre>