Why does my header title gets cuts off in react native and iOS simulator?

I am using those dependancies:

"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",

My AuthNavigator:

...
import { createNativeStackNavigator } from '@react-navigation/native-stack';
...

const Stack = createNativeStackNavigator();

const AuthNavigator = ({ refresh, emailVerificationError }) => {
  return (
    <SafeAreaView style={{ flex: 1, marginTop: 20}}>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen
          name="Landing"
          component={Landing}
          options={{
              headerShown: false,
              headerBackTitleVisible: false,
             }}
        />
        <Stack.Screen
          name="Sign in"
          component={Login}
          options={{
            headerStyle: {
              backgroundColor: "#0696d4",
              alignSelf: 'center',
            },
            headerBackTitleVisible: false,
            headerTintColor: "#fff",
            headerTitleAlign: "center",
            headerTitleStyle: {
              fontWeight: "bold",
              fontFamily: Platform.OS === 'ios' ? "DamascusMedium" : "sans-serif-medium",
            },
          }}
        />
      </Stack.Navigator>
    </SafeAreaView>
  );
};

export default AuthNavigator;

I have tried to edit padding margin and so on, but nothing worked, my text looks cropped as in the photo:

My simulator is on iPhone 15 Plus, iOS 17.4

Any ideas or suggestions are really appreciated!

As of I know, maybe your font style is having some issues, try to remove your font family and try without that. because it does not look like your navigation library has an issue. if the library has any issues then your back icon in the header will also get cut off.