I have a material bottom tab that has five different nested stack navigators as tabs. I don't know why the transition is lagging. Sometimes the label doesn't even get displayed unless we tap on the screen.

 <BottomStack.Navigator 
   labeled={true}
  activeColor={activeColor}  inactiveColor={inactiveColor} barStyle={{
  backgroundColor:"white",
  height:50,
  // width:"80%"
  
}}>


  <BottomStack.Screen name="Home" component={Home}   options={{
    tabBarLabel:"Dashboard",
    tabBarIcon:({color})=><Icon name="chart-pie" color={color} size={22} />
     }} />
 <BottomStack.Screen name="Stack1" component={Stack1} options={{
   tabBarLabel:"Inspections",
  tabBarIcon:({color})=><IconFill name="file-text" color={color} size={24} />
  }} />
  <BottomStack.Screen name="Stack2" component={Stack2} options={{
    tabBarLabel:"Issues",
  tabBarIcon:({color})=><IconFill name="warning" color={color} size={25} />
  }} />
  <BottomStack.Screen name="Stack3" component={Stack3}  options={{
    tabBarLabel:"Organisation",
  tabBarIcon:({color})=><Icon name="user-alt" color={color}  size={22} />
  }}/>
  
  <BottomStack.Screen name="Logout"  component={Logout} options={{headerShown:false   }} 
 
  options={{
    tabBarIcon:({color})=><EntIcon name="log-out" color={color} size={27} />,
  }}/>
</BottomStack.Navigator>