Problem: Custom TabView does not recognise NavBar so its being pushed out of view when keyboard is active.
This is container code that wraps content and TabBarItems in Zstack. As content is made this way it contains all NavBar informations and that NavBar is being treated like any other view, its being pushed upwards when keyboard is active.
struct CustomTabBarContainerView<Content:View> : View {
#Binding var selection: TabBarItem
#State private var tabs: [TabBarItem] = []
let content: Content
init(selection: Binding<TabBarItem>, #ViewBuilder content: () -> Content){
self._selection = selection
self.content = content()
}
var body: some View {
containerVersion2
}
}
private var containerVersion2 : some View{
ZStack(alignment: .bottom){
content
.zIndex(0)
.ignoresSafeArea()
VStack(spacing:15){
CustomTabBarView(tabs: tabs, selection: $selection, localSelection: selection).zIndex(0)
}
}
}
This is AppTabBar that is being used with custom implementation:
struct AppTabBarView: View {
#State private var selection: String = "home"
#State private var tabSelection: TabBarItem = .chat
var body: some View {
//instead of apple default TabView we are going to use our custom that looks nearly the same
CustomTabBarContainerView(selection: $tabSelection){
ChatsView()//is wrapped with NavigationView as it contains chats to enter called ChatView()
.tabBarItem(tab: .chat, selection: $tabSelection)//code for this is reddudant but this is also CUSTOM not default
LogBackgroundView()
.tabBarItem(tab: .upcoming, selection: $tabSelection)
...
}
One possible solution is to wrap CustomTabBarContainerView with NavigationView here in AppTabBar struct and delete ChatsView NavigationView, that way NavBar works perfectly but I think it ugly solution for producion code.
I've tried adding .ignoresSafeArea(.keyboard, edges: .bottom) to ChatView that is being navigated to but only efect i got was that only Hstack where is TextEdit and sendButton stays in place(not being pushed by keyboard) but scrollView where is conversation and NavBar above it is still being pushed.
struct ChatView: View {
var body: some View {
ZStack{
VStack{
Spacer()
messagesView
.padding(.vertical)
}
VStack(spacing:0){
chatBottomBar
}
}
.background(chatBackground,ignoresSafeAreaEdges: [.bottom])
.ignoresSafeArea(.keyboard, edges: .bottom)
.navigationBarTitleDisplayMode(.inline)
This is customTabBar resource I used as its concept is to be as similar as possible to apple TabView Making custom TabView
Related
I have created a custom TabView that looks as follows:
and the code:
struct ContentView: View {
#State private var selectedItem: TabItemOption = .market
var body: some View {
ZStack {
VStack {
TabView(selection: $selectedItem){
MarketView().tag(TabItemOption.market.rawValue)
InterestView().tag(TabItemOption.interest.rawValue)
WalletView().tag(TabItemOption.wallet.rawValue)
}.toolbar(.hidden, for: .tabBar)
}
VStack {
Spacer()
TabBar(tappedItem: $selectedItem)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
For example, when I click on the second TabBarItem the view does not get changed. It always shows the MARKET view with Hello Market text in the middle of the screen.
However, the tag modifier is set to identify the view uniquely.
I have also checked if the variable selectedItem gets changed every time when different TabBarItem gets pressed and it changes the value properly corresponding what get pressed.
What am I doing wrong?
This sounds a bug in SwiftUI's NavigationView and TabView, when I have a TabView with (let's say) 2 tabs, the first tab has a TextField and the second tab has a NavigationView, follow these steps to produce the bug:
show the keyboard by tapping on the text field.
press on the "Return" button to hide the keyboard.
go to tab 2.
notice the weird bottom added space below the view, which approximately equals the height of the keyboard.
-Note1: if you do any of the following the bug won't be reproduced:
once the app launches, open tab 2, return to tab 1 and show the keyboard.
remove NavigationView from tab 2
show the keyboard one more time in tab 1
Note2:
I use GeometryReader in tab 2 to show the whole view area by a yellow color.
working code sample (just copy-paste it to try):
struct ContentView: View {
var body: some View {
TabView {
View1()
.tabItem { Text("View1") }
.tag(1)
View2()
.tabItem { Text("View2") }
.tag(2)
}
}
}
struct View1: View {
#State private var myText = ""
var body: some View {
VStack {
Text("this is view 1")
TextField("Enter Value", text: $myText)
}
}
}
struct View2: View {
var body: some View {
NavigationView {
GeometryReader { reader in
Text("this is view 2")
.onAppear{
print("view 2 on appear")
}
}
.background(Color.yellow)
}
}
}
screenshot:
Is there a way to workaround this problem without having to remove the NavigationView, I tried every possible solution but couldn't a find a clue to avoid it ?
I'm currently building a macOS App with SwiftUI (no Catalyst) that is supposed to have a Sidebar and a single View to the right of it.
NavigationView {
List {
...
}
.listStyle(SidebarListStyle())
HomeView()
}
My Home View has a NavigationLink inside of it, pointing to another DetailView.
struct HomeView: View {
var body: some View {
NavigationLink("DetailView", destination: Text("This is the DV"))
}
}
This NavigationLink always appears as disabled and only works when I add another Column to the NavigationView. I don't want another Column, but rather the NavigationLink replacing the HomeView with the DetailView.
Is there any way to achieve this?
So apparently SwiftUI 2 does not support pushing views on to the Navigation Stack on macOS yet. However, I found this package that helps to resolve the issue:
github.com/lbrndnr/StackNavigationView
NavigationLinks always open a detail view from the current "column" of the navigation view, so if your navigation link is rendered as a child view of HomeView then it will try to open as a detail view of HomeView (the missing third column). If you want a view to replace the HomeView the intended way then the user should select something from the List. If you're trying to programmatically select a NavigationLink that already exists in your list then you should do so by changing state within the HomeView of a variable that is bound to the selected item of the list or the selection of the NavigationLink within the list. Here's a complete working example that does both within the ContentView.swift of a new MacOS SwiftUI Xcode project
struct HomeView: View {
#Binding var selectedItem: String?
var body: some View {
Button("Hello") {
selectedItem = "Thing2"
}
}
}
struct ContentView: View {
#State private var selectedItem: String?
private let items = ["Thing1", "Thing2"]
var body: some View {
NavigationView {
List(selection: $selectedItem) {
ForEach(items, id: \.self) {item in
NavigationLink(
destination: Text(item),
tag: item,
selection: $selectedItem
) {
Text(item)
}
}
}
HomeView(selectedItem: $selectedItem)
}
}
}
Here is the application displaying the HomeView
And here is the application displaying the selected thing after pressing the button
If you don't want to show anything selected in the list after navigating the view, but still want to use a navigation link to maintain the integrity of the navigation within the NavigationView then you could technically put a hidden navigation link in the list
NavigationView {
List(selection: $selectedItem) {
ForEach(items, id: \.self) {item in
NavigationLink(
destination: Text(item),
tag: item,
selection: $selectedItem
) {
Text(item)
}
}
NavigationLink(
destination: Text("Sneaky"),
tag: "Sneaky",
selection: $selectedItem
) {
Text("")
}.hidden()
}
HomeView(selectedItem: $selectedItem)
}
In that case make sure your button also selects the sneaky destination link
Button("Hello") {
selectedItem = "Sneaky"
}
I have an Issue where my text disappears behind the navigation bar. The navigation bar is made visible once the user clicks on Settings (or any other menu button). It shows up and the content is visible but then when done loading the new view the text disappears behind the bar. Any solutions?
I change the status of the navigation bar being visible with .onAppear and .onDisappear of views that are root level.
Code something like this:
struct ContentView: View {
#State public var navBarHidden = true
var body: some View {
NavigationView{
VStack{
ZStack(alignment: .center){
WhiteImage().onAppear{self.navBarHidden = true} //Here only seen as white background
BottomButtons().onDisappear{self.navBarHidden = false}
ProfileInvoke().navigationBarTitle("").navigationBarHidden(self.navBarHidden)
}
}
}
}
}
//The buttons are done with such a construct
struct MenuButton: View {
var buttonText: String
var buttonCallView: AnyView
var body: some View {
NavigationLink(destination: self.buttonCallView) {
Text(self.buttonText)
}.padding()
}
}
//Population of a button
MenuButton(buttonText: "My Favourites", buttonCallView: AnyView(MyFavouritesView().navigationBarTitle(Text("My Favourites"), displayMode: .inline)))
// The settings view where the title disappears
struct SettingsView: View {
var body: some View {
HStack(alignment: .top){
VStack(alignment: .leading){
Text("General").bold()
Divider()
Spacer()
}.padding()
Spacer()
}
}
}
I have the feeling that it has something to do with the .onAppear and .onDisappear where I set the status of the navigation bar being hidden or not. Ain't sure tho.
Using SwiftUI, I've built a NavigationView that takes the user to another NavigationView, and finally, to a simple View. When I get to the last view, I can see two back buttons and a very large Navigation Bar.
I'd like to have a navigation structure similar to the iOS Settings app, where one navigation list takes to another and each of them have one back button that goes back to the previous screen.
Does anyone know how to solve this?
You should only have one NavigationView in your view hierarchy, as an ancestor of the menu view. You can then use NavigationLinks at any level of the hierarchy under that.
So, for example, your root view could be defined like this:
struct RootView: View {
var body: some View {
NavigationView {
MenuView()
.navigationBarItems(trailing: profileButton)
}
}
private var profileButton: some View {
Button(action: { }) {
Image(systemName: "person.crop.circle")
}
}
}
Then your menu view has NavigationLinks to the appropriate views:
struct MenuView: View {
var body: some View {
List {
link(icon: "calendar", label: "Appointments", destination: AppointmentListView())
link(icon: "list.bullet", label: "Work Order List", destination: WorkOrderListView())
link(icon: "rectangle.stack.person.crop", label: "Contacts", destination: ContactListView())
link(icon: "calendar", label: "My Calendar", destination: MyCalendarView())
}.navigationBarTitle(Text("Menu"), displayMode: .large)
}
private func link<Destination: View>(icon: String, label: String, destination: Destination) -> some View {
return NavigationLink(destination: destination) {
HStack {
Image(systemName: icon)
Text(label)
}
}
}
}
Your appointment list view also contains NavigationLinks to the appointment detail views:
struct AppointmentListView: View {
var body: some View {
List {
link(destination: AppointmentDetailView())
link(destination: AppointmentDetailView())
link(destination: AppointmentDetailView())
}.navigationBarTitle("Appointments")
}
private func link<Destination: View>(destination: Destination) -> some View {
NavigationLink(destination: destination) {
AppointmentView()
}
}
}
Result:
If you create the Menu View with NavigationLinks but don't declare it inside a NavigationView, you'll get the child view without NavigationBar.
Do not use NavigationView to wrap your list in the "AppointmentView"
e.g.
NavigationView{
List{
}
}
But only use List in the "AppointmentView"
List{
}
you can still use NavigationLink inside that List