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