Post

Replies

Boosts

Views

Activity

Keyboard pushes Custom TabBar Up
Hello, so I created a custom TabBar using the .overlay modifier on TabView. However, when clicking/pressing on a TextField, the keyboard causes the TabBar to be pushed up in the view. From Reddit, I found that this is caused by using the .overlay modifier. How should I go about fixing this issue or what is the standard way of implementing custom tab bars? Thanks in advance! -- Kohl J Screenshot TabView Code struct RootView: View { @State var selectedTab : Tabs = .home; var body: some View { TabView(selection: $selectedTab) { HomeView(selectedTab: $selectedTab) .tag(Tabs.home) TaskListView(selectedTab: $selectedTab) .tag(Tabs.taskList) CreateTaskView(selectedTab: $selectedTab) .tag(Tabs.create) TrophiesView(selectedTab: $selectedTab) .tag(Tabs.trophies) SettingsView(selectedTab: $selectedTab) .tag(Tabs.settings) } .overlay(alignment: .bottom) { TabBar(selectedTab: $selectedTab) .padding(.horizontal) } } } Custom TabBar Code struct TabBar: View { @Binding var selectedTab : Tabs var body : some View { HStack (alignment: .center) { Button(action: { // switch to home view selectedTab = Tabs.home }, label: { TabBarButton(buttonText: "Home", imageName: "house.fill", size: 24, isActive: selectedTab == .home, hasTopBar: true) }) Button(action: { // switch to task list view selectedTab = Tabs.taskList }, label: { TabBarButton(buttonText: "Task List", imageName: "list.bullet.clipboard.fill", size: 24, isActive: selectedTab == .taskList, hasTopBar: true) }) Button(action: { // switch to create view selectedTab = Tabs.create }, label: { TabBarButton(buttonText: "Create", imageName: "plus.circle.fill", size: 32, isActive: selectedTab == .create, hasTopBar: false) }) Button(action: { // switch to trophies view selectedTab = Tabs.trophies }, label: { TabBarButton(buttonText: "Trophies", imageName: "trophy.fill", size: 24, isActive: selectedTab == .trophies, hasTopBar: true) }) Button(action: { // switch to settings view selectedTab = Tabs.settings }, label: { TabBarButton(buttonText: "Settings", imageName: "gearshape.fill", size: 24, isActive: selectedTab == .settings, hasTopBar: true) }) } .frame(height: 60) } }
1
0
650
Jul ’24