Material Top Tabs is very unstable when screens contains lists inside

    `import React, { useEffect, useState } from 'react';
    import { Dimensions, StyleSheet, Text, View } from 'react-native'
    import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
    import { getFocusedRouteNameFromRoute, useNavigation } from '@react-navigation/native';
    import WidgetsContainer from './WidgetsContainer';
    import { useSelector } from 'react-redux';
    import TextWrapper from './TextWrapper';
    import LoaderKit from 'react-native-loader-kit';
    import { colorStyles } from '../css/AppStyles';
    
    const Tab = createMaterialTopTabNavigator();

    const UserTabs = (props) => {
  	//console.log("props", props);
  	const navigation = useNavigation();
  	const { setFocusedTabDetails, parentNavigation, removeItem } = props;

const tabsAndWidgets = useSelector((state) => state.userTabsAndWidgetsReducer.userTabsAndWidgets);

const getHeaderTitle = (route) => {
	console.log("route", route);
	// If the focused route is not found, we need to assume it's the initial screen
	// This can happen during if there hasn't been any navigation inside the screen
	// In our case, it's "Feed" as that's the first screen inside the navigator
	//const routeName = getFocusedRouteNameFromRoute(route);
	//console.log("routeName", routeName);
	return route.name;
}

return (
	<Tab.Navigator 
		initialRouteName={'Home'} 
		screenOptions={{ 
			tabBarStyle: { display: "none" }, 
			lazy: true,
			lazyPlaceholder: () => 
				<View style={styles.lazyPlaceHolderStyle}>
					<LoaderKit
						style={styles.loaderStyle}
						name={'BallSpinFadeLoader'}
						color={colorStyles.headerColor}
					/>
					<TextWrapper style={{color: colorStyles.headerColor}}>Loading...\nPlease wait</TextWrapper>
				</View>
		}}>
		{ 
			tabsAndWidgets?.map((tab, index) =>
				<Tab.Screen 
					key={index} 
					name={tab?.tabName}
					listeners={{
						blur: (e) => {
							//console.log("tab blurred");
						},
						tabPress: e => console.log('Tab press', e.target),
						focus: (e) => {
							//parentNavigation.setParams({ showDeleteButton: tab.systemTab ? false : true });
							//parentNavigation.setOptions({ headerTitle: tab.tabName });
							//setFocusedTabDetails({ tabID: tab.tabID, "tabName": tab.tabName, "tabIndex": index, "systemTab": tab.systemTab });
							//console.log('Tab focus', e)
						},
						swipeStart: (e) => {
							//console.log("swipe start called", e);
						},
						swipeEnd: (e) => {
							//console.log("swipe end called", e);
						},
					}}
				>
					{ props =>
						<WidgetsContainer 
							{...props} 
							extraParams = {{ 
								"tabDetails": tab, 
								"tabIndex": index, 
								"parentNavigation": parentNavigation, 
								"setFocusedTabDetails": setFocusedTabDetails,
								"removeItem": removeItem
							}} 
						/>
					}
				</Tab.Screen>
			)
		}
	</Tab.Navigator>
);
    }

    const styles = StyleSheet.create({
    	lazyPlaceHolderStyle: {
    		flex: 1,
    		flexDirection: "row",
    		justifyContent: "center",
    		alignItems: "center"
    	},
    	loaderStyle: {
    		width: 40,
    		height: 40,
    		marginHorizontal: 10
    	},
    });
    
    export default UserTabs;`

    `const isFocused = useIsFocused();
    	useEffect(() => {
    		console.log("isFocused");
    		if (isFocused) {
    			// console.log("extraparams", extraParams.tabDetails);
    			const tab = extraParams.tabDetails;
    			const tabIndex = extraParams.tabIndex;
    			extraParams.setFocusedTabDetails({ tabID: tab.tabID, "tabName": tab.tabName, "tabIndex": tabIndex, "systemTab": tab.systemTab });
    			//setLoading({load: true, loadingText: "Populating Widgets...\nPlease wait."});
    			//setTimeout(() => setLoading({load: false, loadingText: ""}), 2000);
    			//navigation.setOptions({ swipeEnabled: false });
    			//setTimeout(() => navigation.setOptions({ swipeEnabled: true }), 2000);
    		}
    	}, [isFocused]);`