0

I'm trying to make the user select photos (max of 3) to display for my dating app, similar to tinder. The problem occurs after selecting one image, which gets displayed on the three add buttons displays instead of only one.

Example from the Tinder app

What my app shows

@State private var personImage: UIImage?
@State private var isShowingPhotoPicker = false  

var body: some View {

   VStack {

       HStack {

           ForEach(0..<3) { personImage in
               Button {
                   isShowingPhotoPicker.toggle()
               } label: {
                   if let personImage = self.personImage 
                       Image(uiImage: personImage)
                       .resizable()
                   } else {
                       Image(systemName: "plus.app.fill")
                           .font(.system(size: 64))
                   }
                }
             }
          }
       }
    }
    .fullScreenCover(isPresented: $isShowingPhotoPicker, onDismiss: nil) {
            PhotoPicker(personImage: $personImage)
    }

Here is the PhotoPicker():

struct PhotoPicker: UIViewControllerRepresentable {
    
    @Binding var personImage: UIImage?

    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        picker.allowsEditing = true
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) { }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(photoPicker: self)
    }
    
    final class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        
        let photoPicker: PhotoPicker
        
        init(photoPicker: PhotoPicker) {
            self.photoPicker = photoPicker
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let image = info[.editedImage] as? UIImage {
                guard let data = image.jpegData(compressionQuality: 0.2), let compressedImage = UIImage(data: data) else {
                    // return an error show an alert
                    return
                }
                photoPicker.personImage = compressedImage
            } else {
                // return an error show an alert
            }
            picker.dismiss(animated: true)
        }
    }
}
Swifter64
  • 5
  • 3
  • your `PhotoPicker`only returns one image – ChrisR Feb 26 '22 at 22:18
  • You are using a loop to check if there is a ‘personImage’ and set it 3 times according to your code. Instead, keep an array with number of images you want to display. If array has only one image, display it and show the + icon in the next button. – shehanrg Feb 26 '22 at 22:46
  • So ``personimage`` should be an array of three images? @shehanrg – Swifter64 Feb 26 '22 at 22:52
  • @Swifter64 I would call it ‘pickedImages’ or something along those lines. But yes, that is how I would do it. – shehanrg Feb 26 '22 at 22:56

0 Answers0