react navigation screen jumping with when switching screen with BottomTabNavigator

Question

I use BottomTabNavigator from reactnavigation v5. The problem is when switching the pages from bottom tab navigator to the page that is heavier than other pages in terms of rendering elements the screen jumps/flitters for a second to resize. I have noticed it does appear on both platforms but it is more noticeable in android. I have recorded the screen to demonstrate the issue. Any ideas on how to solve the bug would be great.

https://www.youtube.com/watch?v=U6OfVeNafMI (Check it out when switching to the home screen)

This is how I am using bottomTabNavigator:

const AppNavigator = (props) => {
const { language } = props;

return (
    <Tab.Navigator
        tabBarOptions={{
            activeBackgroundColor: data.colors.superdark_blue,
            inactiveBackgroundColor: data.colors.dark_blue,
            activeTintColor: data.colors.nice_orange,
            inactiveTintColor: "#c9c9c9",
            tabStyle: {
                zIndex: 100,
            },
            labelPosition: "below-icon",
            tabStyle: {
                justifyContent: "center",
                paddingTop: 5,
                paddingBottom: 5,
                borderTopWidth: 1,
                borderTopColor: data.colors.dark_blue,
                alignItems: "center",
            },
            labelStyle: {
                textAlign: "center",
                alignItems: "center",
                fontSize: language === "FA" ? 12 : 11,
                fontFamily: language === "FA" ? "Yekan" : "Heebo",
            },
            style: {
                backgroundColor: data.colors.dark_blue,
            }
        }}
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                if (route.name === "HOME") {
                    return (
                        <Feather name={"home"} size={17} color={color} />
                    );
                } else if (route.name === "OFFERS") {
                    return (
                        <AntDesign
                            name={"notification"}
                            size={17}
                            color={color}
                        />
                    );
                } else if (route.name === "SAVED") {
                    return (
                        <Feather
                            name={"bookmark"}
                            size={17}
                            color={color}
                        />
                    );
                } else if (route.name === "CONTACT") {
                    return (
                        <Feather
                            name={"settings"}
                            size={17}
                            color={color}
                        />
                    );
                }
            },
        })}
    >
        <Tab.Screen
            name="HOME"
            component={HomeStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].home,
            }}
        />
        <Tab.Screen
            name="SAVED"
            component={FavoritesStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].bookmarks,
            }}
        />
        <Tab.Screen
            name="OFFERS"
            component={MagazineStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].offers,
            }}
        />

        <Tab.Screen
            name="CONTACT"
            component={ContactStack}
            options={{
                tabBarLabel: data.bottomNavigatorHeader[language].contact,
            }}
        />
    </Tab.Navigator>
);

};

Every tabscreen component as you might guess from their names is also a stackNavigator with a few pages and AppNavigator is wrapped in NavigationContainer in App.js