Why SwiftUI ScrollView not working properly? - ios

Question

Everything in this view works fine except that my scrollview does not scroll to bottom and bounces back towards up.
This the screenshot below, I'm not able to add video of the view but I am sharing the code and screenshot of the view.
enter image description here
import SwiftUI
import AVKit
struct Servicer_rental_form7: View {
#State var isLinkActive = false
#State var shouldShowImagePicker = false
#State var avatarImage = UIImage(systemName: "photo.on.rectangle.angled")!
private let player = AVPlayer(url: URL(string: "YOUR-URL.mp4")!)
#State var isChecked:Bool = false
func toggle(){isChecked = !isChecked}
#State var isLinkActive1 = false
var body: some View {
ZStack{
ScrollView(.vertical, showsIndicators: false) {
VStack{
Text("Upload Images")
.offset(x:-getReact().width/3.5,y: getSafearea().bottom + 10)
.font(.system(size: 22,weight: .semibold,design: .default))
Button( action: {
shouldShowImagePicker = true
}, label: {
Image( systemName: "camera")
.foregroundColor(Color("YellowAccent"))
.offset(x:-getReact().width/10)
Text("Upload Image").underline()
.foregroundColor(Color.black)
.offset(x:-getReact().width/10)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color("YellowAccent"), lineWidth: 2)
.frame(width:380, height: 60)
.offset(x: getReact().width/40, y: getSafearea().bottom + -35)
)
})
.offset(x: -getReact().width/19, y: getSafearea().bottom + 50)
Image(uiImage: avatarImage)
.resizable()
.frame(width: 380, height:290)
.padding(.all)
.offset(y: getSafearea().bottom + -150)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 3)
.frame(width: 380, height:300)
.offset(x: 5,y: getSafearea().bottom + -155)
)
.offset(x: 5,y: getSafearea().bottom + 180)
Text("Upload 3D Floor Plans")
.offset(x:-getReact().width/5.5,y: getSafearea().bottom + 50)
.font(.system(size: 22,weight: .semibold,design: .default))
Button( action: {
shouldShowImagePicker = true
}, label: {
Image( systemName: "camera")
.foregroundColor(Color("YellowAccent"))
.offset(x:-getReact().width/10)
Text("Upload Image").underline()
.foregroundColor(Color.black)
.offset(x:-getReact().width/10)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color("YellowAccent"), lineWidth: 2)
.frame(width:380, height: 60)
.offset(x: getReact().width/40, y: getSafearea().bottom + -35)
)
})
.offset(x: -getReact().width/19, y: getSafearea().bottom + 80)
Text("Upload Video")
.offset(x:-getReact().width/3.75,y: getSafearea().bottom + 110)
.font(.system(size: 22,weight: .semibold,design: .default))
Button( action: {
// shouldShowImagePicker = true
}, label: {
Image( systemName: "camera")
.foregroundColor(Color("YellowAccent"))
.offset(x:-getReact().width/10)
Text("Upload Video").underline()
.foregroundColor(Color.black)
.offset(x:-getReact().width/10)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color("YellowAccent"), lineWidth: 2)
.frame(width:380, height: 60)
.offset(x: getReact().width/40, y: getSafearea().bottom + -35)
)
})
.offset(x: -getReact().width/19, y: getSafearea().bottom + 140)
Group{
VideoPlayer(player: player)
.onAppear() {
player.play()
}
.frame(width: 350, height: 290)
.cornerRadius(20)
.offset( y: getSafearea().bottom + 165)
Button(action: toggle){
HStack{
Image(systemName: isChecked ? "checkmark.square.fill": "square")
.foregroundColor(.green)
Text("I agree to terms and conditions")
.foregroundColor(Color.black)
.font(.system(size: 15,weight: .medium, design: .default))
}
//.padding(.leading, 50)
}//button1
.offset( x:-40,y: getSafearea().bottom + 165)
Button(action: {
//code
}, label: {
HStack{
Image("flashLane 1")
Text("Flash Lane")
.bold()
}
.frame(width: 140, height: 40)
})
.buttonStyle(.borderedProminent)
.tint(.orange)
.offset(x: -getReact().width/4.5,y: getSafearea().bottom + 190)
Button(action: {
//code
}, label: {
HStack{
Image("REasyLane")
Text("R-Eazy Lane")
.bold()
}
.frame(width: 140, height: 40)
})
.buttonStyle(.borderedProminent)
.tint(.purple)
.offset(x: getReact().width/4.5,y: getSafearea().bottom + 130)
Button(action: {
//action
isLinkActive1 = true
}) {
Text("Publish")
.foregroundColor(Color.white)
.fontWeight(.bold)
.frame (width: 330, height: 20)
.padding()
.background(Color("YellowAccent"))
.cornerRadius(10)
.shadow(color: .gray, radius: 5, x: 0, y: 4)
}
.offset(x: 6,y: getSafearea().bottom + 140)
.padding(.bottom)
}//grp
} //vstack
.frame(width: getReact().width, height: getReact().height)
.sheet(isPresented: $shouldShowImagePicker, content: {
ImagePicker(avatarImage: $avatarImage) })
.padding(.top)
// .background(
// NavigationLink(destination: Servicer_rental_form2(), isActive: $isLinkActive) {
// EmptyView()
// }
// .hidden()
//)
}
//.frame(width: getReact().width)
}
// .padding(.top,-80)
.toolbar {
ToolbarItem(placement: .principal) {
Text("Filter")
.frame(width: 300, height: 10)
.foregroundColor(Color.black)
.font(.system(size: 30,weight: .medium, design: .default))
}
}
}
}
struct Servicer_rental_form7_Previews: PreviewProvider {
static var previews: some View {
Servicer_rental_form7()
}
}
Note: getReact() and getSafearea() are methods I have made separately for sizing of components and removing or adding them does not affect scrollview issue.

Answer 1

There is some issue with offset or getReact/getSafeArea.
I ran your code by removing offset, and it's working fine at my end.