Tab Navigator, React-Native

Question

started to learn React-Native recently. Have a problem with Tab-Navigation, pretty weird thing is going on.

My createBottomTabNavigator doesn't work at all. At first I tried some things that didn't help and after this tried to launch a first example from https://reactnavigation.org/docs/tab-based-navigation/

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

For some reason even this code doesn't work, the same problem as in my app. Of course this code works in Snack

I have just white screen with logo of my app if I try to add TabNavigator no matter what I do. No error, just blank white screen with logo for 2-3 minutes and then expo's crashing. Maybe something wrong with dependencies or is it iPhone/Expo Go fault? idk

  "dependencies": {
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "expo": "~49.0.11",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0"

I'm using expo-CLI on physical device - Iphone X, didn't try emulator

Update: Okay, I tried to connect via Snack to my Phone and It works for me. So it's almost 100% that something is wrong with my dependecies/settings/configs etc.

Answer 1

Did you try using the sample npx create-expo-app TabTest -e with-tab-navigation

Following dependencies working for me:

  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.4",
    "expo": "^49.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6"
  },