2

I am trying to create a simple app, where my home screen has the option to tab between two other screens. I use createBottomTabNavigator as suggested in the documentation here , however when I run npm start I have blank screen and nothing more. I would expect to see at least two tabs.

My App.js file

 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import MainScreen from './screens/MainScreen';
import MyNetworkScreen from './screens/MyNetworkScreen';

const Tab = createBottomTabNavigator();

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <NavigationContainer>
           <Tab.Navigator>
             <Tab.Screen name="Main" component={MainScreen} />
             <Tab.Screen name="Network" component={MyNetworkScreen} />
           </Tab.Navigator>
        </NavigationContainer>
     </View>
      );
     }
   }

  export default App;

EDIT: My updated dependencies from package.json

"dependencies": {
      "@react-native-community/masked-view": "^0.1.10",
      "@react-native-community/netinfo": "^5.9.7",
      "@react-navigation/bottom-tabs": "^5.11.2",
      "@react-navigation/native": "^5.8.10",
      "@react-navigation/web": "^1.0.0-alpha.9",
      "aws-amplify": "^3.3.13",
      "aws-amplify-react-native": "^4.2.10",
      "expo": "~40.0.0",
      "expo-status-bar": "~1.0.3",
      "react": "16.13.1",
      "react-dom": "16.13.1",
      "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
      "react-native-gesture-handler": "^1.8.0",
      "react-native-reanimated": "^1.13.2",
      "react-native-safe-area-context": "^3.1.9",
      "react-native-screens": "^2.15.0",
      "react-native-web": "~0.13.12"   
  },
newbie coder
  • 644
  • 5
  • 18
  • you are using react-navigation 4.x, which does not really support react-native-web well. If u need to use 4.x u need to have @react-navigation/web installed. I would recommend you to go on to 5.x – Someone Special Jan 08 '21 at 12:50
  • @SomeoneSpecial Thanks for your suggestion. I went to version 5 and now I have the following error: `Unable to resolve "react-navigation" from "node_modules/react-navigation-stack/lib/module/navigators/createStackNavigator.js"` – newbie coder Jan 08 '21 at 13:14
  • rm -rf node_modules and npm install again, then refer to react-navigation 5.x documentations. Codes are different. – Someone Special Jan 08 '21 at 13:17
  • @SomeoneSpecial Thats how I installed version 5; I also tried to keep version 4.x and install @react-navigation/web however it still gives me TypeError: (0, _reactNavigationStack.createBottomTabNavigator) is not a function – newbie coder Jan 08 '21 at 13:33
  • https://snack.expo.io/Kf2OAKEUr – Someone Special Jan 08 '21 at 17:18
  • it's working in sandbox, so maybe there's problem in other parts of your codes – Someone Special Jan 08 '21 at 17:21

0 Answers0