I am using Navigation View to create navigation beetween my view by navigation link and i found out a problem i don't know this is bug or error in my code first image is my view look like this in my Subview file and second when i use it to in navigation it's automatic moved like this:
This is my code on parents view:
struct OnboardingSet: View {
private var offset : CGFloat = screenFrame.Width
@State private var currentPage : Int = 0
@State private var NavigationTag : Int? = nil
var body: some View {
NavigationView {
NavigationLink(
destination: SigninView(),
tag: 1,
selection: $NavigationTag,
label: {
HStack {
OnboardingView(ImageName: Resource.Image.onboarding1, Title: "First, Truth, \nPopular Topic", ButtonTitle: "Skip", TotalPage: 3, CurrentPage: 1) {
NavigationTag = 1
}
OnboardingView(ImageName: Resource.Image.onboarding2, Title: "Fast, Secure, \nMost Loved By User", ButtonTitle: "Skip", TotalPage: 3, CurrentPage: 2) {
NavigationTag = 1
}
OnboardingView(ImageName: Resource.Image.onboarding3, Title: "Feel the \n happiness", ButtonTitle: "sign in", TotalPage: 3, CurrentPage: 3) {
NavigationTag = 1
}
}
.offset(x: currentPage == 0 ? offset : 0, y: 0)
.offset(x: currentPage == 2 ? -offset : 0, y: 0)
.animation(.easeInOut)
.gesture(
DragGesture(minimumDistance: 5, coordinateSpace: .local)
.onEnded({ (value) in
if value.translation.width < 0 {
if currentPage != 2 {
currentPage += 1
}
}
if value.translation.width > 0 {
if currentPage != 0 {
currentPage -= 1
}
}
})
)
})
}
}
}
This is my subview:
struct SigninView: View {
@ObservedObject private var viewModal = SignInViewModal()
var body: some View {
ZStack {
Image(Resource.Image.backgroundSignIn)
.resizable()
.aspectRatio(contentMode: .fill)
.blur(radius: 4)
.offset(x: 200, y: 10.0)
VStack {
HStack {
Text("Hello Unwary \n Reader")
.foregroundColor(.white)
.font(.system(size: 42))
.fontWeight(.black)
.padding(.top,64)
.padding(.leading)
.shadow(color: .black, radius: 16, x: 16, y: 16)
Spacer()
}
Spacer()
VStack {
BlurTextFeild("Email", Text: $viewModal.Email, TextEntryType: .Open)
.frame(width: screenFrame.Width - 30, height: 100)
BlurTextFeild("Password", Text: $viewModal.Password,TextEntryType: .Secure)
.frame(width: screenFrame.Width - 30, height: 100)
}.padding()
Button(action: {
viewModal.AuthState = viewModal.AuthState == SignInViewModal.authState.signIn ? SignInViewModal.authState.signUp : SignInViewModal.authState.signIn
}, label: {
Text(viewModal.AuthState == SignInViewModal.authState.signIn ? "Create Account" : "LogIn")
.foregroundColor(.black)
.opacity(0.5)
.font(.system(size: 18, weight: .bold, design: .rounded))
})
Spacer()
Button(action: {
}, label: {
ZStack {
Blur(effect: UIBlurEffect(style: .regular))
Color.black
.opacity(0.3)
Text(viewModal.AuthState == SignInViewModal.authState.signIn ? "Sign In" : "Sign Up")
.foregroundColor(.white)
.font(.system(size: 24))
}.frame(width: screenFrame.Width - 100, height: 80)
.cornerRadius(16)
}).padding(.bottom,32)
}.frame(width: screenFrame.Width, height: screenFrame.Height)
}
.edgesIgnoringSafeArea(.all)
.navigationBarBackButtonHidden(true)
.frame(width: screenFrame.Width, height: screenFrame.Height + 50, alignment: .center)
}
}
In some cases, you have to make view's frame not hardcore that solve this problem but in my case problem is I added navigation view two times so I had this issue.
I removed navigation view in secondary view and that solved my issue completely.