Why does the React navigation bottom bar cover the layout? - react-native

Question

I have a bottom bar like in the picture, but this bar prevents the bottom of my pages from appearing. How can I give the bottom of the page as much space like the height of the bottom bar? Thanks in advance.

Answer 1

This is something similar I did with but with the StatusBar. It should be very similar.
// component which allows view to remain within the safe area of a phone based on its platform
import React from "react";
import Constants from "expo-constants";
import { SafeAreaView, StyleSheet, View } from "react-native";
function Screen({ children, style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingTop: Constants.statusBarHeight,
// prevents cutoff when scrolling, grows components with the entire screen
flex: 1,
},
view: {
flex: 1,
},
});
So, since you're trying to do the same thing with the tab bar, I suggest first getting the height of the tab bar (or the extra styling you put over the tab bar) and build a Screen component to encapsulate everything you want to put on the screen:
import React from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
function Screen({ children, style }) {
return (
<SafeAreaView style={[styles.screen, style]}>
<View style={[styles.view, style]}>{children}</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
screen: {
paddingBottom: <INSERT HEIGHT HERE>,
// prevents cutoff when scrolling, grows components with the entire screen
flex: 1,
},
view: {
flex: 1,
},
});