calling function in tab.screen component causes app to crash locally

Viewed 246

On snack.expo my code works fine. However when I run it locally, the app immediately crashes. I have determined it is from the call to MyTabs in the home tabscreen. When you replace MyTabs with just Home, the app runs fine. However, for my overall project, I need the MyTabs function.

If anyone could provide some insight as to why that might be I would appreciate it more than you know! If I need to provide any details about my package.json file or anything else, please let me know.

Here is a demo that runs the exact code I am talking about on snack.expo.

This is the repository I posted

Here is my app.js file

import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";

import Home from "./screens/Home";

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={Home}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarActiveTintColor: "#F60081",
          tabBarInactiveTintColor: "#4d4d4d",
          tabBarStyle: {
            backgroundColor: "#d1cfcf",
            borderTopColor: "transparent",
          },
        }}
      >
        <Tab.Screen
          name="Home"
          component={MyTabs}
          options={{
            tabBarLabel: "Home",
            headerShown: false,
            tabBarIcon: ({ color, size }) => (
              <MaterialCommunityIcons name="home" color={color} size={size} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const Stack = createStackNavigator();
2 Answers

After installing the project locally, i got some warnings on npm.

to deal with that i did the following, which i suggest you to try :

1- delete node_modules using git bash rm -r node_modules

2- delete package-lock.json file

3- clear cache : npm cache clear --force

4- install modules again npm install

And it worked perfectly.

enter image description here

If you are getting nothing on the console: Build to your device using Xcode. Then select Window > Devices & Simulators from the menu. Select your device and open the device's console. You can get additional information by reading the console while as the app crashes. Hopefully that helps!

Have you tried changing the name props on Tab.Navigator for component MyTabs to MyTabs instead of Home ?

Related