Screen going behind bottom material tab bar - react-native

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