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();
