React Navigation - почему панель навигации появляется под заголовком, а не внизу

Это файл-контейнер. Здесь я определил все необходимые детали для нижней навигации, и она отображается в верхней части экрана, но должна отображаться в нижней части экрана.

import { NavigationContainer } from "@react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

import HomeScreen from "./Fragments/HomeScreen";
import WalletScreen from "./Fragments/WalletScreen";
import ProfileScreen from "./Fragments/ProfileScreen";
import { StyleSheet, View } from "react-native";
const Tab = createBottomTabNavigator();

import { Platform } from "react-native";
export const tabBarHeight = Platform.OS === "ios" ? 60 : 45;
function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName = "Home"
        screenOptions = {{
          tabBarStyle: {
            backgroundColor: "#03dbfc",
            height: tabBarHeight,
          },
          tabBarActiveTintColor: "white",
        }}
      >
        <Tab.Screen
          name = "Home"
          component = {HomeScreen}
          options = {{
            tabBarLabel: "Home",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name = "home" color = {color} size = {size} />
            ),
          }}
        />
        <Tab.Screen
          name = "Wallet"
          component = {WalletScreen}
          options = {{
            tabBarLabel: "Wallet",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name = "wallet" color = {color} size = {size} />
            ),
          }}
        />
        <Tab.Screen
          name = "Profile"
          component = {ProfileScreen}
          options = {{
            tabBarLabel: "Profile",
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name = "face" color = {color} size = {size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default MyTabs;

Я не вижу содержимое каждого экрана или фрагмента.

Home.js

import { Text } from "react-native";

const HomeScreen = ({ navigation }) => {
  return <Text>Home</Text>;
};

export default HomeScreen;

Профиль.js

import React from "react";
import { Text } from "react-native";

const ProfileScreen = ({ navigation }) => {
  return <Text>Profile</Text>;
};

export default ProfileScreen;

Wallet.js

import React from "react";
import { Text } from "react-native";

const WalletScreen = ({ navigation }) => {
  return <Text>Wallet</Text>;
};

export default WalletScreen;

Пожалуйста, ответьте на этот вопрос. Я новичок в React Native.

App.js

import { NavigationContainer } from "@react-navigation/native";

import Header from "./components/Header/Header";
import BottomNavigation from "./components/BottomNavigation/BottomNavigation";
export default function App() {
  return (
    <View>
      <Header title = "ApnaPayment" />
      <BottomNavigation />
    </View>
  );
}