Screen going behind bottom material tab bar

Question

Hi am working on screens which involves bottom tab bar. For that I have implemented material bottom tab bar from react-navigation-material-bottom-tabs. Problem is my screen is going behind the bottom tab like below

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.

<SafeAreaView style={{backgroundColor: '#f3f3f5'}}>
    <View
      style={{
        borderWidth: 3,
        borderColor: 'yellow',
        width: width,
        height: height,
        flexDirection: 'column-reverse',
      }}>
      <Header data={headerData} />
      <LabelledView
        rectanglebarfunc={() => this.rectanglebarfunc()}
        height={height * 0.07}
        rectanglebarbuttontext={'List Item 01'}
        width={width}
        color="white"
        icolor="#ff007C"
        textColr="#120F3F"
        fontSize={16}
        rectanglebarfunc={() => {}}
      />
      <View
        style={{
          width: '100%',
          height: 0.5,
          backgroundColor: 'transparent',
        }}
      />
      <LabelledView
        rectanglebarfunc={() => this.rectanglebarfunc()}
        height={height * 0.07}
        rectanglebarbuttontext={'List Item 00'}
        width={width}
        color="white"
        icolor="#ff007C"
        textColr="#120F3F"
        fontSize={16}
        rectanglebarfunc={() => {}}
      />

      {/* <View
        style={{
          width: '90%',
          height: '70%',
          backgroundColor: 'red',
          alignSelf: 'center',
          marginVertical: 5,
        }}></View> */}
    </View>
  </SafeAreaView>

Answer 1

Try adding marginBottom to safeAreaView and View :

<SafeAreaView style={{backgroundColor: '#f3f3f5' ,marginBottom:100}}>
    <View
      style={{
        borderWidth: 3,
        borderColor: 'yellow',
        width: width,
        height: height,
        flexDirection: 'column-reverse',
      marginBottom:100
      }}>

try adjusting your marginBottom to check Hope it helps. feel free for doubts