Won't display in TabView

Won't display in TabView

[mattmaddux]

My goal has always been to also include an option for a view that SwiftUI sees as an image rather than text, and I think that would fit the bill for tab items. I’m trying to figure out if that is possible.

[mattmaddux]

It should work fine in a tab view. Have you confirmed it’s working in other views? It sounds like the font files haven’t been added to the target, or you’ve got a typo in the icon name.

Double check step 4 from the read me.

@mattmaddux Ok ... In the Target Membership section, the only thing available there should be my app name right?

@mattmaddux It works fine everywhere else I use them. Just not in TabView.

[mattmaddux]

Hmm, okay, if it’s working elsewhere then you’ve got it installed correctly. Might be a bug, or might be an oddity in Tab View. Would you mind posting your tab view code and I’ll play with it myself?

@mattmaddux
TabView { Text("First Page") .tabItem{ Image(systemName: "square.fill") .font(.system(size: 21)) } .tag(0) Text("Second Page") .tabItem{ Image(systemName: "triangle.fill") .font(.system(size: 21)) } .tag(1) Text("Third Page") .tabItem{ Image(systemName: "hexagon.fill") .font(.system(size: 21)) } .tag(2) Text("Fourth Page") .tabItem{ Image(systemName: "triangle.fill") .font(.system(size: 21)) } .tag(3) Text("Fifth Page") .tabItem{ Image(systemName: "square.fill") .font(.system(size: 21)) } .tag(4) } .accentColor(Color(.label))

[mattmaddux]

So the code you posted isn't using FASwiftUI at all. With Image(systemName: "square.fill") you're calling SF Symbols, and "square.fill" isn't a valid glyph.
(Correction: it IS a valid glyph!)

To call FASwiftUI, call FAText(iconName: "square", size: 21).

HOWEVER, you're right that it isn't showing up correctly in the tab view itself. Like if I try the following:

TabView {
    FAText(iconName: "square", size: 21)
        .tabItem{ FAText(iconName: "square", size: 21) }
        .tag(0)
    FAText(iconName: "triangle", size: 21)
        .tabItem{ FAText(iconName: "triangle", size: 21) }
        .tag(1)
    FAText(iconName: "hexagon", size: 21)
        .tabItem{ FAText(iconName: "hexagon", size: 21) }
        .tag(2)
    FAText(iconName: "square", size: 21)
        .tabItem{ FAText(iconName: "square", size: 21) }
        .tag(3)
    FAText(iconName: "triangle", size: 21)
        .tabItem{ FAText(iconName: "triangle", size: 21) }
        .tag(4)
}

The icons show correctly when they are the main view, but not in the tab bar, like you said.

So there's definitely something weird and I'll look into it.

Yeah, I know I’m using SF symbols. It’s the only icons that work in the TabView. Let me know if you figure out something.

[wutzi15]

I can confirm this. I have the following code:

import SwiftUI
import FASwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("First View")
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("First")
            }.tag(0)
            Text("Second View")
                .tabItem {
                    Image(systemName: "flame.fill")
                    Text("Second")
            }.tag(1)
            FAText(iconName: "bomb", size: 21)
                .tabItem {
                    FAText(iconName: "bomb", size: 21)
                    Text("Third")
            }.tag(2)
            Text("Fourth View")
                .tabItem {
                    Image(systemName: "line.horizontal.3")
                    Text("4th")
            }.tag(3)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Which generated this view:

Any Ideas on how to fix this?

[mattmaddux]

So far I haven't been able to figure out a solution. It seems like tab items are a little picky about what they allow. The documentation for TabView says:

Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

FAText views ARE text according to SwiftUI. But it seems like it doesn't quite fit the structure the tab item view is expecting.

I'll keep experimenting.

[wutzi15]

What a pity.
Keep up the good work ;)

[mickeyl]

It‘s been almost two years now… got anything further with that issue? Happy new year, btw.

[mattmaddux]

@mickeyl Unfortunately my work has brought me away from SwiftUI in that time, so I haven't been able to commit time to solving this. However, there have been a number of forks that have made some additions. It might be worthwhile to browse those and see what changes have been made. I will try to make time for that soon.

[nxnam]

@mattmaddux Is there any update to fix this issue?

[martyuiop]

Workaround for this (i'll look at correcting in FASwift project)
in your Views init include the following. As an e.g. obviously change the font name etc. to suit your specific case.
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.font: UIFont.init(name: "FontAwesome5Pro-Solid", size: 20)! ], for: .normal)
Then actually call a text item for your tabitem eg.
.tabItem { Text(" barcode-read") }
This does obviously change ALL tab item text for that view to use the fontawesome otf though