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:

When app first loads – styles don’t work for either tab
When I edit Tab A’s code – Tab A’s styles work, but Tab B’s styles don’t
When I edit Tab B’s code – Tab B’s styles work, but Tab A’s styles stop working
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 server
Clearing cache
Forcing re-render of both tab's contents every time tabs are switched
Many more (been a long time)

You need to sign in to view this answers

Related Post