Kevin
Kevin

Reputation: 51

How to bind an image to the next view in SwiftUI?

trying to create an onboarding flow of views with text fields to capture profile data and in the last view I will store the data in Firestore. However, need to pass all the data down to the last view to register the user with this data.

View 0 has Username, email, and password View 1 has first name, last name and image View 2 has Job title, company name

I am able to pass the username, email, and password to view 1 and first name, last name, and image to view 2.

I am NOT able to pass the image to view 3 because it is now binding and is asking for an argument in the "Preview" that I can't figure out.

The String bindings I pass with .constant("") BUT what do I do to pass the image see code below.

```
import SwiftUI

    struct Step1: View {
        @State var firstname = ""
        @State var lastname = ""
        @Binding var email: String
        @Binding var password:String
        @Binding var username: String
        @State var image: Image?
        @State var showImagePicker = false
        @State private var selectedImage: UIImage?
        var body: some View {
            VStack{
            HStack{
                VStack(alignment: .leading, spacing: 4) {
                Text("Create profile")
                    .font(.system(size: 30))
                    .fontWeight(.bold)
            Text("Basic profile information")
                .font(.system(size: 18))
            }
                .padding(.horizontal, 32)
                .padding(.bottom, 50)
                .padding(.top, 50)
                Spacer()
            }

            
            VStack(spacing: 20){
                
                HStack{

                        if image != nil {
                            image?
                                .resizable()
                                .scaledToFill()
                                .frame(width: 80, height: 80)
                                .clipShape(RoundedRectangle(cornerRadius: 10.0))
                                    
                        } else {
                        Image("upload")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 80, height: 80)
                            .clipShape(RoundedRectangle(cornerRadius: 10.0))
                    }
                    Spacer()
                    
                    }
                .onTapGesture {
                    self.showImagePicker = true
                }
                
            
                CustomTextField(text: $firstname, placeholder: Text("First name"), ImageName: "person")
                    .padding()
                    .background(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 0.2611568921)))
                    .cornerRadius(10)
                    
                    CustomTextField(text: $lastname, placeholder: Text("Last name"), ImageName: "person")
                        .padding()
                        .background(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 0.2611568921)))
                        .cornerRadius(10)
      
            }
            .padding(.horizontal, 32)
        

            Spacer()
            
            NavigationLink(
                destination: Step2(firstname: $email, lastname: $password, email: $username, password: $firstname, username: $lastname, image: $image)
                    .navigationBarBackButtonHidden(true)
                    .navigationTitle("")
                    .navigationBarHidden(true),
                label: {
                    Text("Sign Up")
                        .font(.headline)
                        .foregroundColor(.white)
                        .frame(width:360, height: 50)
                        .background(Color(#colorLiteral(red: 0.03573478386, green: 0.4008729458, blue: 0.7616711259, alpha: 1)))
                        .cornerRadius(10)
                        .padding()
                            
                        Spacer()
                    })
            
            .navigationTitle("")
            .navigationBarHidden(true)
            
        }.sheet(isPresented: $showImagePicker, onDismiss: loadImage) {
            ImagePicker(image: self.$selectedImage)
        }
    }
    
    func loadImage() {
        guard let selectedImage = selectedImage else { return }
        image = Image(uiImage: selectedImage)
    }
}


struct Step1_Previews: PreviewProvider {
    static var previews: some View {
        Step1(email: .constant(""), password: .constant(""), username: .constant(""))
    }
}
```

  
 
```
import SwiftUI

struct Step2: View {
    @Binding var firstname: String
    @Binding var lastname: String
    @Binding var email: String
    @Binding var password:String
    @Binding var username: String
    @Binding var image: Image?
    
    var body: some View {
        VStack{

            HStack{
                VStack(alignment: .leading, spacing: 4) {
                Text("Create profile")
                    .font(.system(size: 30))
                    .fontWeight(.bold)
            Text("Basic profile information")
                .font(.system(size: 18))
            }
                .padding(.horizontal, 32)
                .padding(.bottom, 50)
                .padding(.top, 50)
                Spacer()
            }

            
            VStack(spacing: 20){
                
            
                CustomTextField(text: $firstname, placeholder: Text("First name"), ImageName: "person")
                    .padding()
                    .background(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 0.2611568921)))
                    .cornerRadius(10)
                    
                    CustomTextField(text: $lastname, placeholder: Text("Last name"), ImageName: "person")
                        .padding()
                        .background(Color(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 0.2611568921)))
                        .cornerRadius(10)
      
            }
            .padding(.horizontal, 32)
        

            Spacer()
            
           
            
            .navigationTitle("")
            .navigationBarHidden(true)
            
        }
        }
    }


struct Step2_Previews: PreviewProvider {
    static var previews: some View {
        Step2(firstname: .constant(""), lastname: .constant(""), email: .constant(""), password: .constant(""), username: .constant(""), image: WHAT TO PUT HERE????)
    }
}
```

Upvotes: 3

Views: 2377

Answers (1)

Raja Kishan
Raja Kishan

Reputation: 18924

You can use .constant(Image(uiImage: UIImage())) or set any static image like this .constant(Image("image_name")))

Upvotes: 3

Related Questions