Custom back button icon is misaligned on iOS 16

JanBrinker 0
Viewed 21

When checking our app on iOS 16 we realized that our back button with a custom icon has bad alignment. The icon gets pushed down to the bottom of the icon container. The text still is where it should be but the icon is too far down. (See screenshot) How to fix this without breaking layout on iOS 15?

Back button with bad icon alignment

uinavigationbar uikit ios16 ios
1 Answers

Apply .withBaselineOffset(fromBottom: 0) to the image before setting it as backIndicatorImage.

let image = UIImage(named: "BackIcon")?
    .withBaselineOffset(fromBottom: 0) // <- this fixes the layout
navigationController?.navigationBar.backIndicatorImage = image
navigationController?.navigationBar.backIndicatorTransitionMaskImage = image

Same fix also works when using .appearance().

This will fix the alignment on iOS 16 but won't cause issues with iOS 15 as the applied offset is 0. Makes me wonder why it works on iOS 16 in the first place...

JanBrinker0
Related