calling a stack function in a tab navigator causes app to crash

Viewed 324

I have noticed that in my App.js, when I call my function MyTabs(which holds a stack navigator) in my tab navigator it causes the app to crash on IOS when run locally.

When the app does crash, I noticed zero errors are logged. I do not get errors in my terminal or on the screen. I am running it through npm start along with the expo app on my personal device. I have tried other devices as well but still the same crash. I also do not have a mac, I bet using xCode could atleast give me an error.

I have included a snack demo here as well as a git repository including every file in the project here.

Any insight at all would be greatly appreciated.

EDIT:: I am assuming since it works on snack it must be my environment. I have tried an entirely different computer and device but I have always started it using npm start and the expo app.

EDIT 2:: I noticed I do get this warning. Could something like this cause it to crash?enter image description here

Here is the app.js

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

Delete the package-lock.json and node_modules and run npm install again.

enter image description here

I was getting this error:

Cannot find module '/stackoverflow/node_modules/vlq/dist/vlq.js'. Please verify that the package.json has a valid "main" entry

After installing a package, I was getting same error for a different packages. Looks like packages could not communicate each other

Based on your Edit 2 try this

npm uninstall react-native-gesture-handler react-native-screens

then as the link says install the packages with expo install command again to be sure that you have the compatible versions in your expo project

Related