Tab Navigator Background flashes before opening

Question

I am using React Navigation 5 for navigation in my App. I have a Tab Navigator Nested inside a Stack Navigator. When I go to the Tab Screen from the Home Screen in the Stack Navigator the half of the Tab screen flashes before opening. Image attached for reference. How do I fix this?

const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    >
    
    <HomeStack.Screen
      name="Home"
      component={HomeScreen}
      options={{
        title: 'Overview',
      }}
    />
    <HomeStack.Screen
      name="Top Tabs"
      component={TopTabScreen}
      options={{
        title: 'Explore Menu',
      }}
    />
    <HomeStack.Screen
      name="vDetails"
      component={vDetailScreen}
      options={{
        title: '',
        headerMode: 'none',
        headerTransparent: true,
      }}
    />
    <HomeStack.Screen
      name="nDetails"
      component={nDetailScreen}
      options={{
        title: '',
        headerMode: 'none',
        headerTransparent: true,
      }}
    />
    
  </HomeStack.Navigator>
);

const TopTabScreen = ({navigation}) => {
  return (
    <TopTabs.Navigator
      tabBarOptions={{
        labelStyle: {fontSize: 13, fontFamily: 'pro'},
        tabStyle: {width: 140},
        pressColor: '#ffbbbb',
        style: {backgroundColor: '#eee', elevation: 0, shadowOpacity: 0},
        activeTintColor: '#e4293e',
        inactiveTintColor: '#aaa',
        scrollEnabled: true,
        
      }}>
      <TopTabs.Screen
        name="Tab 1"
        component={Tab1}
        options={{
          title: 'Veg Pizza',
        }}
      />
      <TopTabs.Screen
        name="Tab 2"
        component={Tab2}
        options={{
          title: 'Non Veg Pizza',
        }}
      />
     
    </TopTabs.Navigator>
  );
};

Answer 1

For anyone struggling with this, I fixed it with adding the initialLayout prop in the tab Navigator.

TopTabs.Navigator
      lazy="true"
      initialLayout={{width: Dimensions.get('window').width}}