1

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"
  }
}```
landingburn
  • 11
  • 3
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Sep 04 '22 at 22:22

1 Answers1

0

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

landingburn
  • 11
  • 3