How to show another view when user selects image from the photo library

Viewed 110

My problem is that I can't show selected image in another view because I can't set my variable selected to true.

My variables:

@State private var selectedImage: UIImage?
@State private var isImagePickerDisplay = false
@State private var selected: Bool = false

Step 1 - I present ImagePicker for the user (works fine):

.sheet(isPresented: self.$isImagePickerDisplay) {
        ImagePickerView(selectedImage: self.$selectedImage, sourceType: .photoLibrary)
}

Step 2 - I can't find the right way to know when the user actually selected the image. I tried to do like this:

if selectedImage != nil {
        selected = true
}

But I get error:

Type '()' cannot conform to 'View'; only struct/enum/class types can conform to protocols

Step 3 - Then my plan was to show another view if user actually selected image from photo library:

.fullScreenCover(isPresented: $selected) {
        EditView(selectedImage: $selectedImage)
}

Please, keep in mind that I'm new in SwiftUI. I just finished tutorials and now I'm trying to develop a project on my own.

EDIT (added my entire ContentView()):

struct ContentView: View {
    @State private var selectedImage: UIImage?
    @State private var isImagePickerDisplay = false
    @State private var selected: Bool = false
    
    var body: some View {
        Button(action: {
            self.isImagePickerDisplay.toggle()
        }) {
            Image(systemName: "plus")
                .renderingMode(.original)
                .font(.system(size: 16, weight: .medium))
                .aspectRatio(contentMode: .fit)
                .frame(width: 36, height: 36)
                .background(Color(.white))
                .clipShape(Circle())
                .shadow(radius: 10)
        }.sheet(isPresented: self.$isImagePickerDisplay) {
            ImagePickerView(selectedImage: self.$selectedImage, sourceType: .photoLibrary)
        }
        
        if selectedImage != nil {
            selected = true
        }
        
        .fullScreenCover(isPresented: $selected) {
            EditView(selectedImage: $selectedImage)
        }
    }
}
2 Answers

Possible solution

struct ContentView: View {
    
    private enum SheetType {
        case pickImage, showImage
    }
    
    @State private var selectedImage: UIImage?
    @State private var selected: Bool = false
    
    @State private var currentSheetType: SheetType = .pickImage
    
    var body: some View {
        Button(action: {
            self.selected.toggle()
            self.currentSheetType = .pickImage
        }) {
            Image(systemName: "plus")
                .renderingMode(.original)
                .font(.system(size: 16, weight: .medium))
                .aspectRatio(contentMode: .fit)
                .frame(width: 36, height: 36)
                .background(Color(.white))
                .clipShape(Circle())
                .shadow(radius: 10)
        }
        .sheet(isPresented: self.$selected) {
            if currentSheetType == .pickImage {
                if selectedImage != nil {
                    self.selected.toggle()
                    self.currentSheetType = .showImage
                }
            }
        } content: {
            if currentSheetType == .pickImage {
                ImagePickerView(selectedImage: self.$selectedImage, sourceType: .photoLibrary)
            } else if currentSheetType == .showImage {
                EditView(selectedImage: $selectedImage)
            }
        }
    }
}

Probably you wanted this

struct DFContentView: View {
    @State private var selectedImage: UIImage?
    @State private var isImagePickerDisplay = false
    @State private var selected: Bool = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.isImagePickerDisplay.toggle()
            }) {
                Image(systemName: "plus")
                    .renderingMode(.original)
                    .font(.system(size: 16, weight: .medium))
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 36, height: 36)
                    .background(Color(.white))
                    .clipShape(Circle())
                    .shadow(radius: 10)
            }
            .sheet(isPresented: self.$isImagePickerDisplay, onDismiss: {  // << here !!
                self.selected = selectedImage != nil
            }) {
                ImagePickerView(selectedImage: self.$selectedImage, sourceType: .photoLibrary)
            }
            EmptyView()
                .fullScreenCover(isPresented: $selected) {
                    EditView(selectedImage: $selectedImage)
                }
        }
    }
}

Updated: Thanks to @RajaKishan, about iOS 14.2 - updated with separated .sheet and .fullScreenCover into different views. Tested and worked.

Related