MaterialBottomTab not appearing on ios simulator - reactjs

Question

This is my file that I am trying to create a demo of a bottom-tab. The problem is, I only get a blank page, no sign of a bottom tab. There is no error that I can point to. I don't know what is causing it, I deleted and reinstalled the relevant packages a few times already, but had no results. Any help is much appreciated.
import React from 'react'
import {createMaterialBottomTabNavigator} from "#react-navigation/material-bottom-tabs"
const Tab = createMaterialBottomTabNavigator()
const EmptyScreen = () => {
return <View>
</View>
}
export default function HomeScreen() {
return (
<View>
<Tab.Navigator
barStyle={{backgroundColor: "black",
paddingBottom: 48 }}
initialRouteName= "feed">
<Tab.Screen
name = "feed"
component = {EmptyScreen}
/>
<Tab.Screen
name = "Profile"
component = {EmptyScreen}
/>
<Tab.Screen
name = "Add"
component = {EmptyScreen}
/>
<Tab.Screen
name = "Settings"
component = {EmptyScreen}
/>
</Tab.Navigator>
</View>
)
}```
And this is the package.json file in case anyone needs it to reproduce the situation.
```{
"name": "academical",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/material-bottom-tabs": "^6.2.3",
"#react-navigation/native": "^6.0.12",
"#react-navigation/stack": "^6.2.3",
"expo": "^46.0.9",
"expo-constants": "~13.2.3",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"firebase": "^8.10.1",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.5",
"react-native-gesture-handler": "^2.6.0",
"react-native-paper": "^4.12.4",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "~3.15.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"react-redux": "^8.0.2",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
}
}```

Answer 1

Solved. Wrap the Tab.Navigator with a NavigationContainer and set independent = {}.