How to position custom shape in a center of a button - swiftui

Question

I've found an animated custom Tab bar tutorial and tried to reproduce it. But now I'm stuck on the moment where I need to place the center of my custom shape in the center of the button every time it is pressed. Would be very appreciate if somebody could explain to me why does midX is located between buttons?
Here is expecting result :
And here is what I get when taping on the button with code below:
Code:
struct TabBar: View{
#State private var selectedTab: Tabs.RawValue = Tabs.home.rawValue
#State private var xAxisForCurve: CGFloat = 80
let screenWidth: CGFloat
private var tabs : [String]{
var _tabs: [String] = []
Tabs.allCases.forEach { tab in
_tabs.append(tab.rawValue)
}
return _tabs
}
var body: some View{
HStack{
ForEach(tabs, id: \.self) { tab in
GeometryReader { button in
Button(action: {
withAnimation(.spring()){
self.selectedTab = tab
self.xAxisForCurve = button.frame(in: .global).midX
}
}) {
Image(systemName: tab)
.resizable()
.renderingMode(.template)
.aspectRatio(contentMode: .fit)
.foregroundColor(self.selectedTab == tab ? Color.blue : Color.gray)
}
}
.frame(width: 28, height: 28)
if tab != tabs.last{
Spacer().frame(width: 65)
}
}
}
.frame(width: screenWidth * multiplayerForTabFrameOnDifferentDevices())
.padding(.vertical)
.background(Color.white.clipShape(MyShape(xAxis: self.xAxisForCurve)))
.cornerRadius(20)
}
}
struct MyShape: Shape{
var xAxis: CGFloat
func path(in rect: CGRect) -> Path {
Path{ path in
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: 0))
path.addLine(to: CGPoint(x: rect.width, y: rect.height))
path.addLine(to: CGPoint(x: 0, y: rect.height))
let upperLeftCorner = CGPoint(x: self.xAxis - 50 , y: rect.minY)
let upperRightCorner = CGPoint(x: self.xAxis + 50, y: rect.minY)
let curveCenter = CGPoint(x: self.xAxis, y: rect.height * 0.55)
let control1 = CGPoint(x: self.xAxis - 25 , y: 0)
let control2 = CGPoint(x: self.xAxis - 25 , y: 35)
let control4 = CGPoint(x: self.xAxis + 25 , y: 0)
let control3 = CGPoint(x: self.xAxis + 25 , y: 35)
path.move(to: upperLeftCorner)
path.addCurve(to: curveCenter, control1: control1, control2: control2)
path.addCurve(to: upperRightCorner, control1: control3, control2: control4)
}
}
}

Answer 1

You're taking global frame with frame(in: .global): it's frame related to the device screen.
But your shape needs position related to your TabBar bounds.
You can solve it by adding a named coordinate space:
.frame(width: screenWidth * multiplayerForTabFrameOnDifferentDevices())
.coordinateSpace(name: "container")
And getting button frame in this coordinate space:
xAxisForCurve = button.frame(in: .named("container")).midX
p.s. from your code it looks like you're trying to animate your shape. You need to add the following lines to your shape to make it animatable. More info can be found here
var animatableData: CGFloat {
get { xAxis }
set { xAxis = newValue }
}