I am using a custom Tabbar and implemented the same animation you can find on the App Store from iOS, when you click on a card in the Today's View.
As soon as a card is expanded I would like to hide the Tabbar. Currently I am hiding it with a bool var. But when I am clicking on one of the cards, the whole Geometry Reader dismisses.
This is the class which contains the Tabbar and also the HomeView, where the List with the cards is implemented
struct AppCoordinator: View {
@State var index = 0
@State var showTabbar = true
var body: some View {
ZStack(alignment: .bottom) {
if self.index == 0 {
HomeView(showTabbar: self.$showTabbar)
.padding(.bottom, -10)
} else if self.index == 1 {
Text("Order View")
} else if self.index == 2 {
Text("Settings View")
}
CustomTabBar(index: self.$index)
.isHidden(!showTabbar)
}.edgesIgnoringSafeArea(.bottom)
}
}
And this is the HomeView, where the Geometry Reader is located
struct HomeView: View {
@ObservedObject var model = HomeViewModel()
@State var index = 0
@State var hero = false
@Binding var showTabbar: Bool
var body: some View {
ZStack(alignment: .bottom) {
VStack{
ScrollView(.vertical, showsIndicators: false) {
HomeTopMenue(index: $index)
.padding()
VStack(alignment: .center, spacing: 30) {
ForEach(0..<self.model.meals.count, id: \.self){i in
GeometryReader{g in
CardView(meal: self.$model.meals[i], hero: self.$hero)
.offset(y: self.model.meals[i].getExpanded() ? -g.frame(in: .global).minY : 0)
.opacity(self.hero ? (self.model.meals[i].getExpanded() ? 1 : 0) : 1)
.onTapGesture {
self.showTabbar.toggle()
withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 0.8, blendDuration: 0)){
if !self.model.meals[i].getExpanded() {
self.hero.toggle()
if self.model.meals[i].expanded == nil {
self.model.meals[i].expanded = true
} else {
self.model.meals[i].expanded?.toggle()
}
}
}
}
}.frame(height: self.model.meals[i].getExpanded() ? UIScreen.main.bounds.height : 400)
}
}
}.statusBar(hidden: hero)
}
}
}
}
