Styles not applying in Material Top Tab Navigator until code changes are made

I'm experiencing an unusual styling issue with React Native's Material Top Tab Navigator. The styles for my tab contents don't apply when the app first loads, but they start working when I make any change to the code of that specific tab component.

Here's the weird behavior:

1. When app first loads - styles don't work for either tab
2. When I edit Tab A's code - Tab A's styles work, but Tab B's styles don't
3. When I edit Tab B's code - Tab B's styles work, but Tab A's styles stop working
4. Restarting the app makes both styles stop working again

Here's my relevant code:

Parent Component (HistoryScreen.js):

const HistoryScreen = ({ route }) => {    const { selectedLanguage } = route.params || {};    const [historyBadgeCount, setHistoryBadgeCount] = useState(0);    const [notificationsBadgeCount, setNotificationsBadgeCount] = useState(0);    return (<SafeAreaView style={styles.container}><Text style={styles.textHeader}>{texts.historyHeader}</Text><TopTab.Navigator                screenOptions={{                    tabBarStyle: styles.tabContainer,                    tabBarIndicatorStyle: styles.tabIndicator,                    tabBarActiveTintColor: "#453B44",                    tabBarInactiveTintColor: "#888",                    tabBarPressColor: "#e0e0e0",                }}><TopTab.Screen                    name="History "                    options={{                        unmountOnBlur: true,                        tabBarLabel: ({ focused }) => (<TabLabel label={texts.history} focused={focused} badgeCount={historyBadgeCount} />                        ),                    }}>                    {() => <HistoryContent selectedLanguage={selectedLanguage} updateBadgeCount={setHistoryBadgeCount} />}</TopTab.Screen><TopTab.Screen                    name="Notifications "                    options={{                        unmountOnBlur: true,                        tabBarLabel: ({ focused }) => (<TabLabel label={texts.notifications} focused={focused} badgeCount={notificationsBadgeCount} />                        ),                    }}>                    {() => <NotificationsContent selectedLanguage={selectedLanguage} updateBadgeCount={setNotificationsBadgeCount} />}</TopTab.Screen></TopTab.Navigator></SafeAreaView>    );};Example of one tab content (simplified):const HistoryTab = ({ selectedLanguage, updateBadgeCount }) => {    return (<View style={styles.container}><FlatList                data={predictionHistory}                renderItem={({ item }) => (<View style={styles.element}><Text style={styles.date}>{date}</Text>                        {/* Other content */}</View>                )}            /></View>    );};const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: "white",    },    element: {        paddingVertical: height * 0.0125,        alignSelf: 'center',        height: height * 0.1375,        width: width * 0.91,        marginTop: height * 0.0375,        borderBottomWidth: 1,        borderBottomColor: 'rgba(90, 46, 84, 0.2)'    },    // other styles...});Dependencies:"@react-navigation/material-top-tabs": "^6.6.5","react-native": "0.72.x"Using "expo": "^51.0.38",What I've tried: Restarting the development serverClearing cacheForcing re-render of both tab's contents every time tabs are switchedMany more (been a long time)