React Navigation: BottomNavigation not working

Question

Here is my ReactNative App.js App.js

import { StatusBar } from 'expo-status-bar';
import 'react-native-gesture-handler';
import { StyleSheet, Text, View } from 'react-native';
import Login from './Apps/Screens/LoginScreen/Login';
import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo';
import { NavigationContainer } from '@react-navigation/native';
import Constants from "expo-constants"
import * as SecureStore from "expo-secure-store";
import TabNavigation from './Apps/Navigation/TabNavigation';

const tokenCache = {
  async getToken(key) {
    try {
      return SecureStore.getItemAsync(key);
    } catch (err) {
      return null;
    }
  },
  async saveToken(key, value) {
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (err) {
      return;
    }
  },
};



export default function App() {
  return (
    <ClerkProvider 
    tokenCache={tokenCache}
    publishableKey='pk_test_cmVuZXdpbmctYXNwLTMxLmNsZXJrLmFjY291bnRzLmRldiQ'>
    <View style={styles.container}>

      {/*Sign in Component*/}
      <SignedIn>
          <NavigationContainer>
            <TabNavigation />
          </NavigationContainer>
      </SignedIn>

      {/*Sign out Component*/}
      <SignedOut>
        <Login/>
      </SignedOut>

      <StatusBar style="auto" />
    </View>
    </ClerkProvider>
  );  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign:'center',
  },
});

While here is my TabNavigation.jsx TabNavigation

import { View, Text } from 'react-native'
import React from 'react'

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../Screens/HomeScreen/HomeScreen';
import GoodsScreen from '../Screens/GoodsScreen/GoodsScreen';
import DocumentsScreen from '../Screens/DocumentScreen/DocumentsScreen';

const Tab = createBottomTabNavigator();

export default function TabNavigation() {
  return (
    <Tab.Navigator >
        <Tab.Screen name='home' component={HomeScreen}/>
        <Tab.Screen name='goods' component={GoodsScreen}/>
        <Tab.Screen name='documents' component={DocumentsScreen}/>
    </Tab.Navigator>
  )
}

Result Expo App

I am new in React Native, React Navigation and Expo

I am trying to show my bottomtab navigation yet its not showing. Its only showing (based on the photo above), i tried many sources but it seems that i cant find a solution.