Multidevice layout SwiftUI - swift

Question

I have this layout working fine in iPhone 11, but when I switch to 8, the top background color gets disproportionate, how can I make it have the same height? Is there such a thing as height %?
and the one that gets weird:
This is the code:
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
HomeView()
.tabItem {
VStack {
Image(systemName: "1.circle")
Text("Home")
}
}.tag(1)
}
}
}
struct HomeView: View {
var body: some View {
ZStack {
SetBackground()
Text("Home View")
.font(.largeTitle)
}
}
}
struct ArcShape : Shape {
let geometry: GeometryProxy
func path(in rect: CGRect) -> Path {
var p = Path()
let center = CGPoint(x: 290, y: 100)
p.addArc(center: center, radius: geometry.size.width * 3, startAngle: .degrees(39), endAngle: .degrees(140), clockwise: false)
return p
}
}
struct SetBackground: View {
var body: some View {
NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
Color.white
.edgesIgnoringSafeArea(.all)
ArcShape(geometry: geometry)
.offset(x: geometry.size.width * -0.3, y: geometry.size.height * -1.49)
.foregroundColor(.yellow)
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
}
}
}
The rest is working fine, it's just that top background that shifts if the iPhone model changes. I tried putting it in a frame but that just gets it weird on the middle :/
Also, why does it changes if I put the tabView and only leave HomeView()? It's so weird
Thanks

Answer 1

It is due to hardcoded Arc center & different safe-areas on different devices.
So the solution is to make Arc position geometry dependent (specific factors you can fit)
struct ArcShape : Shape {
let geometry: GeometryProxy
func path(in rect: CGRect) -> Path {
var p = Path()
let center = CGPoint(x: geometry.size.width / 2, y: -geometry.size.height * 1.75) // 1/4 from top
p.addArc(center: center, radius: geometry.size.height * 2, startAngle: .degrees(39), endAngle: .degrees(140), clockwise: false)
return p
}
}
struct SetBackground: View {
var body: some View {
NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
Color.white
ArcShape(geometry: geometry)
.foregroundColor(.yellow)
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)
}
}
}