iOS 11 iPhone X simulator UITabBar icons and titles being rendered on top covering eachother

Question

Anyone having issue with the iPhone X simulator around the UITabBar component?

Mine seem to be rendering the icons and title on top of each other, I\'m not sure if I

Answer 1

I had the same problem.

If I set any non-zero constant on the UITabBar's bottom constraint to the safe area:

It starts working as expected...

That is the only change I made and I have no idea why it works but if anyone does I'd love to know.

Answer 2

Select tabbar and set "Save Area Relative Margins" checkbox in Inspector Editor like this:

Answer 3

I was using a UITabBarController in the storyboard and at first it was working alright for me, but after upgrading to newer Xcode version it started giving me issues related to the height of the tabBar.

For me, the fix was to delete the existing UITabBarController from storyboard and re-create by dragging it from the interface builder objects library.

Answer 4

I created new UITabBarController in my storyboard and pushed all view controllers to this new UITabBarConttoller. So, all work well in iPhone X simulator.

Answer 5

I added this to viewWillAppear of my custom UITabBarController, because none of the provided answers worked for me:

tabBar.invalidateIntrinsicContentSize()
tabBar.superview?.setNeedsLayout()
tabBar.superview?.layoutSubviews()

Answer 6

From this tutorial:

https://github.com/eggswift/ESTabBarController

and after initialization of tab bar writing this line in appdelegate class

(self.tabBarController.tabBar as? ESTabBar)?.itemCustomPositioning = .fillIncludeSeparator

Solves my problem of tab bar.

Hope its solves your problem

Thanks