I am currently making the user path for login and registration on my IOS application being a beginner I need to have an opinion on my code and how I can when the email address is valid and change view in my current project I have created several view for different screen
Thank you in advance
import SwiftUI
struct Registration: View {
// MARK: - Properties
@State private var email = ""
@State private var Error = false
@State private var ValidationButton = false
// Check email
var isEmailValid: Bool {
let emailRegex = #"^[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$"#
return NSPredicate(format: "SELF MATCHES %@", emailRegex).evaluate(with: email)
}
// MARK: - Body
var body: some View {
NavigationView {
VStack(alignment: .leading, spacing: 40) {
VStack(spacing: 18) {
VStack(alignment: .leading, spacing: 5) {
Text("Welcome!")
.font(.title)
.fontWeight(.bold)
Text("Enter your e-mail in order to log in or create an account")
.multilineTextAlignment(.leading)
}
.frame(maxWidth: .infinity, alignment: .leading)
HStack(spacing: 16) {
Image(systemName: "envelope.fill")
.imageScale(.large)
.foregroundColor(Color.primary)
TextField("Email", text: $email, onEditingChanged: { editing in
if !editing {
Error = !isEmailValid
ValidationButton = isEmailValid
}
})
.font(.system(size: 20))
.frame(maxWidth: .infinity, alignment: .leading)
.foregroundColor(.primary)
if ValidationButton {
Button(action: {
print("Email validated")
}) {
Image(systemName: "arrow.forward.square.fill")
.font(.system(size: 35))
}
.padding(.leading, 8)
}
}
.padding(.horizontal, 16)
.frame(minHeight: 55)
.overlay(
RoundedRectangle(cornerRadius: 6)
.stroke(Error ? Color.red : Color.primary)
)
if Error {
Text("Please enter a valid email address")
.foregroundColor(.red)
.padding(.leading, 16)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.foregroundColor(.primary)
HStack(spacing: 10) {
Rectangle()
.fill(Color(.separator))
.frame(height: 1)
Text("or continue with")
.fixedSize(horizontal: true, vertical: true)
.frame(maxWidth: .infinity)
Rectangle()
.fill(Color(.separator))
.frame(height: 1)
}
HStack(alignment: .top, spacing: 12) {
Button(action: {
print("Tap on Apple button")
}) {
ZStack {
RoundedRectangle(cornerRadius: 6)
.fill(Color(.systemGray5))
Image(systemName: "apple.logo")
.font(.system(size: 19))
.foregroundColor(Color.primary)
}
}
Button(action: {
print("Tap on Google button")
}) {
ZStack {
RoundedRectangle(cornerRadius: 6)
.fill(Color(.systemGray5))
Image(systemName: "apple.logo")
.font(.system(size: 19))
.foregroundColor(Color.primary)
}
}
Button(action: {
print("Tap on Facebook button")
}) {
ZStack {
RoundedRectangle(cornerRadius: 6)
.fill(Color(.systemGray5))
Image(systemName: "apple.logo")
.font(.system(size: 19))
.foregroundColor(Color.primary)
}
}
}
.frame(maxHeight: 50)
}
.padding(.horizontal, 16)
.background(Color(.systemBackground))
.navigationBarHidden(true)
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct RegistrationView_Previews: PreviewProvider {
static var previews: some View {
Registration()
}
}
to try to solve my problem I tried to make a NavigationLink by looking well on the official documentation apple but it did not work and I do not know if it is the good method thank you to you
2
Answers
If you are looking to leverage
NavigationLink
, you can do something like this instead of the Button you have:If you want to navigate to next view after validating an email, you can use NavigationLink: