Using an image picker in SwiftUI

Lots of apps need to deal with selecting or taking photos but in SwiftUI we’ll need to wrap UIKit’s UIImagePickerController with a SwiftUI view.

Wrapping UIImagePickerController in SwiftUI

UIImagePickerController has been available since iOS 2 and it supports both selecting photos from photo albums and taking new photos with a camera. If we would like to use an image picker in a SwiftUI view then the first step is wrapping this view controller with a SwiftUI view. UIViewControllerRepresentable protocol defines required methods for representing an UIViewController. We’ll provide a completion handler for passing back the selected image. We need to implement a coordinator which acts as a delegate for the UIImagePickerController. When the imagePickerController(_:didFinishPickingMediaWithInfo:) delegate method is called, then we can call the completion handler and handle the selected image in a SwiftUI view. As UIImagePickerController supports both the camera function and accessing existing photos, we’ll add a source type property for configuring which mode to use.

	struct ImagePicker: UIViewControllerRepresentable {
	typealias UIViewControllerType = UIImagePickerController
	typealias SourceType = UIImagePickerController.SourceType
	let sourceType: SourceType
	let completionHandler: (UIImage?) -> Void
	func makeUIViewController(context: Context) -> UIImagePickerController {
	let viewController = UIImagePickerController()
	viewController.delegate = context.coordinator
	viewController.sourceType = sourceType
	return viewController
	}
	func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
	func makeCoordinator() -> Coordinator {
	return Coordinator(completionHandler: completionHandler)
	}
	final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
	let completionHandler: (UIImage?) -> Void
	init(completionHandler: @escaping (UIImage?) -> Void) {
	self.completionHandler = completionHandler
	}
	func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
	let image: UIImage? = {
	if let image = info[.editedImage] as? UIImage {
	return image
	}
	return info[.originalImage] as? UIImage
	}()
	completionHandler(image)
	}
	func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
	completionHandler(nil)
	}
	}
	}

view raw ImagePicker.swift hosted with ❤ by GitHub

The ImagePicker can then be presented with the fullScreenCover view modifier. The presented state and the selected image is stored in the view’s view model. When the image picker is displayed and an image is selected, the completion handler is called and the selectedImage property is updated in the view model which in turn reloads the SwiftUI view.

	var body: some View {
	VStack(spacing: 32) {
	imageView(for: viewModel.selectedImage)
	controlBar()
	}
	.fullScreenCover(isPresented: $viewModel.isPresentingImagePicker, content: {
	ImagePicker(sourceType: viewModel.sourceType, completionHandler: viewModel.didSelectImage)
	})
	}

view raw ContentView.swift hosted with ❤ by GitHub

	extension ContentView {
	final class ViewModel: ObservableObject {
	@Published var selectedImage: UIImage?
	@Published var isPresentingImagePicker = false
	private(set) var sourceType: ImagePicker.SourceType = .camera
	func choosePhoto() {
	sourceType = .photoLibrary
	isPresentingImagePicker = true
	}
	func takePhoto() {
	sourceType = .camera
	isPresentingImagePicker = true
	}
	func didSelectImage(_ image: UIImage?) {
	selectedImage = image
	isPresentingImagePicker = false
	}
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

Summary

Wrapping UIKit views with a SwiftUI view is fairly simple. The coordinator object is a perfect fit for handling delegate methods which UIKit views often provide. As we saw, adding a SwiftUI compatible image picker was pretty easy to do. Please check the full example project on GitHub.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Project

SwiftUIImagePicker (Xcode 12.2)