Why is the bottom tab navigator height smaller (squished) upon reload? - react-native

Question

I am working with the createBottomTabNavigator() from React Navigation in my Expo application. I have 3 different tabs for different screen routing. Each tab consists of the screen name and an icon.
However, I am experiencing some inconsistent behavior after I reload the screen using expo. On the home screen load, the height of the bottom tab navigator appears to be "squished".
Squished Behavior: Notice in the picture below that the icons are to the left of the text and how thin the navigation bar is.
Normal Behavior: Now notice the "regular" behavior once I double click the home button or do some action to refresh the screen.
I can even navigate through the 3 navigation pages and it will stay in this "squished" state until I do something like double click home button (on iPhone this brings up your open applications - similar to the bottom right square Android button).
The code for the bottom tab navigation is below. There isn't anything fancy with it, just pretty standard stuff from the documentation.
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { AntDesign, Ionicons } from '#expo/vector-icons';
const Tab = createBottomTabNavigator();
const HomeTab = createStackNavigator();
const UserProfileTab = createStackNavigator();
const NutritionTab = createStackNavigator();
function UserProfileScreen() {
return (
<UserProfileTab.Navigator
screenOptions={{
headerStyle: {
backgroundColor: Colors.topNavBar
},
headerTitleAlign: 'center'
}}>
<UserProfileTab.Screen name="Profile" component={UserProfile} />
</UserProfileTab.Navigator>
);
}
function NutritionScreen() {
return (
<NutritionTab.Navigator
screenOptions={{
headerStyle: {
backgroundColor: Colors.topNavBar
},
headerTitleAlign: 'center'
}}>
<NutritionTab.Screen name="Nutrition" component={Nutrition} />
</NutritionTab.Navigator>
);
}
function BottomTabs() {
return (
<>
<SafeAreaView style={{ flex: 0, backgroundColor: Colors.topNavBar }} />
<SafeAreaView style={{ flex: 1, backgroundColor: Colors.topNavBar }}>
<Tab.Navigator
initialRouteName="Home"
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused ? 'home' : 'home';
} else if (route.name === 'Profile') {
iconName = focused ? 'user' : 'user';
} else if (route.name === 'Nutrition') {
iconName = focused ? 'md-nutrition' : 'md-nutrition';
}
if (route.name === 'Nutrition') {
return <Ionicons name={iconName} size={size} color={color} />
}
return <AntDesign name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: Colors.bottomNavBarActive,
inactiveTintColor: Colors.bottomNavBarInactive,
tabStyle: styles.tabStyle,
labelStyle: styles.tabLabel,
}}>
<Tab.Screen
name="Nutrition"
component={NutritionScreen}
options={{ tabBarLabel: 'Nutrition' }}
/>
<Tab.Screen
name="Home"
component={MainStackNavigator}
/>
<Tab.Screen
name="Profile"
component={UserProfileScreen}
options={{ tabBarLabel: 'Profile' }}
/>
</Tab.Navigator>
</SafeAreaView>
</>
)
}
// Styling
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: Colors.boxColor,
},
tabLabel: {
fontSize: 14,
},
});
export default function App() {
return (
<NavigationContainer>
<BottomTabs />
</NavigationContainer>
);
}
Has anyone ever faced an issue like this? Is it just some weird glitch with Expo?