Tab bar not showing icons?

Question

I read a bunch of related questions, I tried what they said, nothing works really. Not sure why. So, I have 3 different UIStoryboards. First one is the Auth Storyboard that handles Login/Register and there's a storyboard reference to the second Storyboard - Tab bar storyboard. This storyboard contains 5 other storyboard references that would load it's separate view controllers.

My problem is that the icons are not showing once the user is logged in. I setup a custom color of the first view controller in the UITabViewController just to make sure it loads. It does.

I've tried to setting all images/icons to render them as "Original", didn't work. I set a system image, just to see if that's the issue, they are not shown. Also worth mentioning is that the icons are shown in the storyboard but when its being compiled, they're nowhere to be seen in the simulator.

What am I doing wrong?

PS: I've changed the tint color of the tab bar, just to test it, and it works. So, the problem is not with that...

Have you setup UITabViewController after login successfully? — Hitesh, Aug 12 '17 at 08:20
@Hitesh - Once the user logged in successfully, a segue is performed to the `UITabBarController`. It doesn't crash and I see my custom view, so this is not the issue. — Dani, Aug 12 '17 at 08:24

score 53 · Accepted Answer · edited Jun 20 '20 at 09:12

53

Problem With Storyboard References and Missing Tab Bar Icons

If you have Storyboard References attached to your Tab Bar Controller you will notice that the storyboard reference actually has a UITabBarItem on it:

Do not set the properties for this "fake" UITabBarItem!

Your settings will do nothing at all when you run the app. The values you provide ONLY affect what you see in Interface Builder, not your app when you run it.

Solution

What you need to do is go to the ACTUAL view controller that your storyboard reference is pointing to. That view controller will also have a UITabBarItem on it. This is the "real" UITabBarItem. Set your properties (icon, title, etc.) there and you will see them show when you run the app.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 11 '18 at 04:26

Mark Moeykens

15,915
6
63
62

1

Whoaaa THE Mark Moeykens commented on my post (I'm sorry for fangirling for a second lol) But yes, you're right, this happened so many times to me. Is that a bug with `UITabBar` & Storyboard References? – Dani Dec 11 '18 at 07:33
1

This fixed my issue – TimeDelta Jan 02 '19 at 15:37
1

I have searched far and wide, wearing out the Internet looking for the solution to this issue. Thanks Mark! – forrest Jun 14 '19 at 22:33
5

This had me frustrated for a long time. I trust Mark Moeykens and when I wasn't seeing what he was describing, i knew something wasn't right. Turned out I had to also manually add the TabBarItem to my view controller. This appears to be the case when you link a tab bar to a View Controller that already exists. Once I manually added the TabBarItem...things automagically worked just like Mark said they would. – Crossems Jun 15 '19 at 18:21
1

The images are still not showing in my app. I can update the text, and it renders fine. But no images come up. I fixed this by adding the image in the `Bar Item` not the `Tab Bar Item` in the attributes inspector. – andrewlundy Dec 19 '19 at 12:15
2

I'm so confused. Why do you have a `HomeViewController Scene` and a `Home Scene`? How do you know which is the actual view controller that the view controller is referencing? It would be helpful if you posted a picture of the entire document outline. – Peter Schorn Jun 11 '20 at 01:47
1

If the view controller was created on the same storyboard as the UITabBarController and _then_ refactored to its own storyboard, it will have the tab bar item as you say. But if it was created on its own storyboard, and then a reference was set up manually on the tab bar controller storyboard, it will obviously be missing in the destination (child) storyboard. In this case, you can add the tab bar item manually from the object library :-) – Nicolas Miari Dec 03 '20 at 08:03

Rahul Kumar · Answer 2 · 2017-08-12T09:12:44.320

I have attached image describing connections:

Connect TabBar Controller to your five View Controllers

For each View Controller, select any View Controller -> Go to Editor in Xcode options at top -> Embed In -> Navigation Controller

Select bottom bar in Navigation Controller -> open Attribute Inspector in Utilities -> provide the your title and image as highlighted in image

Navigation from Login/Register to TabBar Screen: Provide the Storyboard ID to TabBarController eg. "TabBarController" and create the TabBarController instance using Storyboard ID of corresponding Storyboard.

Swift 3

func navigateToTabBar() {
    let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
    let nextViewController = storyBoard.instantiateViewController(withIdentifier: "TabBarController") as UIViewController
    self.present(nextViewController, animated:true, completion:nil)
}

score 7 · Answer 3 · answered Jul 09 '21 at 18:47

7

Don't forget to set Selected Image property and Image property inside tab bar item and bar item category respectively!

answered Jul 09 '21 at 18:47

Vivek

566
5
6

1

This answer made my day! Thank you so much – Timo Ylikännö Sep 20 '21 at 18:30

score 3 · Answer 4 · answered Jan 12 '20 at 16:47

I had the same problem. My mistake was I did set the Selected Image in the "Tab Bar Item", but I did not set the Image property.

So, the tab bar icon was showing up in the child views [in storyboard] but was not showing up in the parent view (i.e. TabBarController).

score 2 · Answer 5 · answered Oct 09 '19 at 21:06

If you are making your navigationController programmatically, you will see the same symptoms due to viewDidLoad being called too late. Overriding init in your child view controllers will get your icons showing properly.

override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
    super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    self.tabBarItem = UITabBarItem(title: "Settings", image: UIImage(named: "gear"), tag: 1)
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
}

Happy coding!

score 0 · Answer 6 · answered Apr 01 '22 at 13:41

I had a similar issue to above but neither text nor image were displaying as a tabItem, but an empty placeholder area was there & could still click on it and open the view.

My tabItem's viewController was set to a Storyboard Reference therefore when I manually added the Tab Bar Item accidentally dropped it inside the Scene BUT outside the scene's viewController. This apparently matters....

Tab bar not showing icons?

6 Answers6

Problem With Storyboard References and Missing Tab Bar Icons

Solution

Linked