Why does the React navigation bottom bar cover the layout?

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,
  },
});