I'm struggling with trying not to move tabbar when my keyboard appears
Here is the code of my main tabbar screen
var body: some View {
VStack(spacing: 0) {
pomeHeader
switch viewModel.selectedTab {
case .activities:
ActivityView()
case .emotions:
EmotionsView()
.ignoresSafeArea(.all)
case .journal:
JournalView()
case .insights:
InsightsView()
}
customTabBar
}
.onAppear {
dataService.startListening()
}
.onDisappear {
dataService.stopListening()
}
}
.ignoresSafeArea(.keyboard, edges: .bottom) for tabbar doesn't help
var body: some View {
ZStack(alignment: .bottom) {
mainContent
searchBar
}
}
here is my emotions vie where search bar is in the bottom
My tabbar is inside this view
struct MainView: View {
@StateObject private var routerService = AppRouterService.shared
var body: some View {
ZStack {
switch routerService.currentRoute {
case .onboarding:
OnboardingView()
case .userAuth:
UserAuthView()
case .questionire:
QuestionireView()
case .tabBar:
TabBarView()
}
}
.transition(.opacity)
.animation(.easeInOut(duration: 0.5), value: routerService.currentRoute)
}
}
I tried different solutions (also keyboard observer)
But I just want my tabbar be always in the bottom and lift my searcher above keyboard
private var searchBar: some View {
HStack {
emotionSearchBar
.opacity(viewModel.searchbarOpened ? 1 : 0)
.animation(.easeInOut(duration: 0.25), value: viewModel.searchbarOpened)
ZStack {
Circle()
.fill(Color.white)
.stroke(Color.borderLight, lineWidth: 2)
Image(.searchIcon)
.resizable()
.frame(width: 24, height: 24)
}
.frame(width: 40, height: 40)
.onTapGesture {
withAnimation(.easeInOut) {
viewModel.searchbarOpened.toggle()
}
searchFocused.toggle()
}
}
.padding([.horizontal, .bottom], 20)
.frame(height: 40)
}
private var emotionSearchBar: some View {
TextField("Enter your emotion", text: $viewModel.searchText)
.focused($searchFocused)
.padding()
.frame(height: 40)
.background {
RoundedRectangle(cornerRadius: 20)
.fill(Color.white)
.stroke(Color.borderLight, lineWidth: 2)
}
}
