Заголовок сдвигается вниз при загрузке страницы - React Navigation v5

Question

У меня серьезная проблема с заголовком в моем собственном приложении для реагирования. При загрузке первой страницы заголовок сдвигается вниз, и я, кажется, не понимаю проблемы. Я установил весь навигатор с headerMode: "none", кроме моего mainScreen.

У меня есть навигатор по вкладкам внутри навигатора стека - это мой mainScreen.

Я использую навигацию V5.

Смотрите мой код:

const MainStackScreen = ({ navigation }) => (
    <MainStack.Navigator
    initialRouteName="MainTab"
    headerMode="float"
    screenOptions={{
      headerStyle: {
        height: 70, 
        backgroundColor: "#1f65ff"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: 'bold'
      },
      headerLeft: (props) => (
        <LogoTitle {...props} />        
      ),
      headerRight: ({navigation}) => (
        <Icon.Button name="md-person" size={25}
         backgroundColor="#1f65ff"
         onPress={() => {navigation.navigate("Profile")}}
         />
      )
    }}
    >
      <MainStack.Screen 
      name="MainTab" 
      component={MainTabScreen}
      headerMode='none'
       />
      <MainStack.Screen 
      name="Profile" 
      component={ProfileScreen}
      headerMode='none'      
      />
    </MainStack.Navigator>
  )

export default MainStackScreen;