How do I remove the three dots tab? - swiftui

So I created a tabview in SwiftUI but it keeps showing the 'three dots more' tab. How do I remove that?
TabView{
Text("")
.tabItem {
Image(systemName: "house")
Text("Home")
}
Text("")
.tabItem {
Image(systemName: "magnifyingglass")
Text("Search")
}
Text("")
.tabItem {
Image(systemName: "plus")
Text("Add")
}
Text("")
.tabItem {
Image(systemName: "suit.heart")
Text("Likes")
}
Text("")
.tabItem {
Image(systemName: "person")
Text("Profile")
}
}//end tabview


Without more code it is not easy, to determine the reason for this behavior.
Check if the SceneDelegate window.rootcontroller points to your struct, where the TabView is located, not to the normal contentView
Replace the Textstrings with Views like:
TabView{
FirstView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
}
Check, that there is no Text between Tabview and the first TabItem, because the TabView interprets this as an additional Tabitem
TabView{
Text("this causes the error")
FirstView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
With these three tips your Tabbar should work
I'm working with Xcode 11.3

Related

How to hide the Back Button (More) of a View inside TabView

I have a TabView with many items and I would like to hide the back button (<More) from the last one.
struct ExperimentView: View {
var body: some View {
TabView {
AView(label: "1")
.tabItem {
Label("Tab1", systemImage: "list.dash")
}
AView(label: "2")
.tabItem {
Label("Tab2", systemImage: "square.and.pencil")
}
AView(label: "3")
.tabItem {
Label("Tab3", systemImage: "pencil.slash")
}
AView(label: "4")
.tabItem {
Label("Tab4", systemImage: "scribble")
}
AView(label: "5")
.tabItem {
Label("Tab5", systemImage: "pencil.tip")
}
AView(label: "6")
.tabItem {
Label("Tab6", systemImage: "pencil.and.outline")
}
}
}
}
struct AView: View {
var label: String
var body: some View {
VStack {
Spacer()
Text(label)
Spacer()
}
}
}
I tried:
AView(label: "6")
.navigationBarTitle("")
.navigationBarBackButtonHidden(true)
.tabItem {
Label("Tab6", systemImage: "pencil.and.outline")
}
but it did't help.

SwiftUI TabView accentColor(:_) deprecated

I have a tabView and I'm trying to change it's color. Using accentColor(:_) works but it's going to be deprecated.
TabView {
AppetizerListView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
AccountView()
.tabItem {
Image(systemName: "person")
Text("Account")
}
OrderView()
.tabItem {
Image(systemName: "bag")
Text("Order")
}
}
.accentColor(Color("brandPrimary"))
Instead I've tried to use .tint(:_) as Apple suggests but is not working (it builds but does not change the color).
TabView {
AppetizerListView()
.tabItem {
Image(systemName: "house")
Text("Home")
}
AccountView()
.tabItem {
Image(systemName: "person")
Text("Account")
}
OrderView()
.tabItem {
Image(systemName: "bag")
Text("Order")
}
}
.tint(Color("brandPrimary"))
I also tried using .tint(_:) in each TabItem but it's also not working.
Any idea of what's going on or which is the correct way of making my code work as expected without using deprecated functions?
Maybe I'm using tint in a wrong way
Thanks!

I've found the solution to the problem, but I'll leave the post here for anyone who has the same problem.
What you have to do is to go to the Assets folder and define the AccentColor (that it has to be already created) as the color that you want your bar to be.
No modifiers have to be added to the tabView and it will automatically be showing the tabView with the color you defined as the AccentColor in your Assets folder.

Change "more" label to another word in TabView in SwiftUI

Does anyone know if it's possible or how to change the "More" label to another word in TabView (SwiftUI)?
When there are more than 5 elements or views, the "More" label with three points (ellipsis) is added. I would like to be able to change that word that comes by default and put another word.
var body: some View {
TabView(selection: handler) {
InicioView()
.tabItem {
Label("Inicio", systemImage: "house.circle")
.font(.system(size: 32))
.foregroundColor(Color("verde"))
}.tag(0)
TarjetaRodelagView()
.tabItem {
Label("Tarjeta Rodelag", systemImage: "creditcard.circle")
.font(.system(size: 32))
.foregroundColor(Color("verde"))
}.tag(2)
CategoriasView()
.tabItem {
Label("Categorías", systemImage: "list.bullet.rectangle.fill")
.font(.system(size: 32))
.foregroundColor(Color("verde"))
}.tag(1)
InicioView()
.tabItem {
VStack {
Image("ari").resizable().frame(width: 55, height: 55).scaledToFit()
Text("ARI")
}
}.tag(4)
SucursalesView()
.tabItem {
Label("Sucursales", systemImage: "map")
.font(.system(size: 32))
.foregroundColor(Color("verde"))
}.tag(3)
CatalogoView()
.tabItem {
Label("Catálogo", systemImage: "book.circle")
.font(.system(size: 32))
.foregroundColor(Color("verde"))
}.tag(6)
}.accentColor(Color("verde"))

TabBar Change Selected Tab Icon Background Color swiftui

I have this TabBArViewController which has 5 tabs in it.
struct TabBarViewController: View {
#State private var selection = 3
var body: some View {
ZStack {
TabView(selection:$selection) {
OffersView()
.tabItem ({
Image(systemName: "bag").renderingMode(.template)
Text("Offers")
})
.tag(1)
BalanceView()
.tabItem ({
Image(systemName: "creditcard").renderingMode(.template)
Text("Balance")
})
.tag(2)
StepView()
.tabItem ({
Image(systemName: "figure.walk.circle").renderingMode(.template)
Text("Steps")
})
.tag(3)
FriendsView()
.tabItem {
Image(systemName: "person.2")
Text("Friends")
}
.tag(4)
ProfileView()
.tabItem {
Image(systemName: "person")
Text("Profile")
}
.tag(5)
}
.accentColor(Color("ColorOnboarding"))
.navigationBarBackButtonHidden(true)
}
.navigationBarBackButtonHidden(true)
}
}
which appears as so
I want to add a rectangle color to this when a tab bar icon selected in SwiftUI. How can I do it without creating a custom tab bar?

Change Tabbar Icon Image SwiftUI

I want to change tabItem icon image when tapped on one of the tabItem in this code. How can it be done?
var body: some View {
ZStack {
TabView(selection:$selection) {
OffersView()
.tabItem ({
Image(systemName: "bag").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: "figure.walk.circle").renderingMode(.template)
Text("Steps")
})
.tag(2)
ProfileView()
.tabItem {
Image(systemName: "person")
Text("Profile")
}
.tag(3)
}
.accentColor(Color("ColorOnboarding"))
.navigationBarBackButtonHidden(true)
}

You can change image like this,
var body: some View {
ZStack {
TabView(selection:$selection) {
OffersView()
.tabItem ({
Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
Text("Steps")
})
.tag(2)
// -----Other Code-----

You can use state for it
var body: some View {
#State var isTapped = false
ZStack {
TabView(selection:$isTapped) {
OffersView()
.tabItem ({
Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
Text("Offers")
})
.tag(1)
StepView()
.tabItem ({
Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
Text("Steps")
})
.tag(2)
ProfileView()
.tabItem {
Image(systemName: "person")
Text("Profile")
}
.tag(3)
}
.accentColor(Color("ColorOnboarding"))
.navigationBarBackButtonHidden(true)
}