Data Passing from CustomViews to External View SwiftUI — @ObservedObject

Hello guys! Am back with some interesting concept in SwiftUI. Lots of Developers Moved to or Started SwiftUI. It is very easy to develop UI until it comes to handle data across view. The speciality about SwiftUI is we can reuse components across the code. But getting datas from each reusable component is a question.

Here I had shared a small idea o how to handle datas between Inner Views and External Views. The biggest boon to achieve this is @ObservedObject.

ObserveObject and Published property in SwiftUI

Data transfer

The @ObservedObject property wrapper is used inside a view to store an observable object instance, and the @Published property wrapper is added to any properties inside an observed object that should cause views to update when they change.

Now am gonna create a signup view which has custom textField. And i created the textField as a separate View with title.

Simple Sign Up Screen

Initially create a custom TextField along with title.

Here is a the enum for required field we have gonna used for signup. Take it as titles we have gonna given Title for each custom textField.

enum SignUpFields: String, CaseIterable{
case userNAme = "User Name"
case email = "Email"
case password = "Password"
}

Then we’ve gonna create a view for designing textField.

struct AuthTextField: View {
@State var fieldTitle = "Sample Title"
@State var textFieldValue = ""
@State var textieldType: SignUpFields = .email
var body: some View {
VStack(alignment: .leading){
HStack{
Text(fieldTitle)
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(Color.white)
}
TextField("", text: $textFieldValue)
.padding(.leading, 10.0)
.frame(height: 50, alignment: .center)
.border(.gray, width: 0.5)
.background(Color.white)
.cornerRadius(8)
}
}
}

Above View is completely designed with white color. Here for visual level i have added black to the background. Below is the custom textField we’d created.

AuthTextField View

Now we’ve gonna create SignUp View with this custom textField.

struct ContentView: View {
@StateObject var progress = AuthFieldsValue()
var authViewModel = AuthenticationViewModel()
@State var signUpText = "Sign Up"
var body: some View {
VStack {
ZStack{
BlurView(style: .light)
VStack{
Image("SignUpHeader")
.resizable()
.frame(width: screenSize.height*0.11, height: screenSize.height*0.11)
.foregroundColor(Color.white)
ForEach(SignUpFields.allCases,id: \.rawValue){ field in
AuthTextField(fieldTitle: field.rawValue, progress: progress, textieldType: field)
.padding(.horizontal)
}
VStack{
Button(action: {
print("Add action here")
}) {
NavigationLink(destination: ContentView()){
Text(signUpText)
.foregroundColor(.white)
.fontWeight(.bold)
.frame(width: screenSize.width*0.7, height: 50)
.background(Color(red: 0.058823529411764705, green: 0.2, blue: 0.44313725490196076))
.cornerRadius(6)
}
}
.padding(.top)
}
}
}
.frame(width: screenSize.width*0.87, height: screenSize.height*0.65)
.cornerRadius(12)
}
.background(Image("BG")
.resizable()
.frame(width: screenSize.width, height: screenSize.size.height+30))
}
}

And i had added textfields using ForEach and 3 fields created now.

Now the challenging thing is, have to get each textField value to main ContentView struct.

So here is the trick.

I am gonna create a ObservableObject class.

class AuthFieldsValue: ObservableObject {
@Published var textFieldTextValues = [SignUpFields: String]()
}

Using this class, am gonna store each field values and get in ContentView external class.

Here we will see how to use this class to store data.

Create a variable for the class type in inner customTextField View. And make it as observedObject.

@ObservedObject var progress: AuthFieldsValue

In AuthTextField.Swift

Append each field values to the dictionary inside AuthFieldsValue class.

For identifying end editing have to added code like below.

TextField("", text: $textFieldValue, onEditingChanged: {editing in
if editing {
print("On Editing")
} else {
if textieldType == .email{
progress.textFieldTextValues[.email] = textFieldValue
}else if textieldType == .userNAme{
progress.textFieldTextValues[.userNAme] = textFieldValue
}else{
progress.textFieldTextValues[.password] = textFieldValue
}
}
})

Now Custom class is ready to receive each instance of itself and to store the data.

In ContentView.swift

Here, we have to initiate the class instance.

@StateObject var progress = AuthFieldsValue()

And now pass the instance to custom inside View.

AuthTextField(fieldTitle: field.rawValue, progress: progress, textieldType: field)

Now we can get each textField value like below.

let data = progress.textFieldTextValues
print(username: data[.userNAme] ?? "", password: data[.password] ?? "", email: data[.email] ?? "")

Here it is finally!

I’ll share the repo link soon with another concept implemented in this same project.

Please wait for next part!

Happy Coding💖!