Messages PhotoPicker

MessagesPhotoPickerView.swift

import PhotosUI
import SwiftUI

// Attempt to replicate the behaviour of the photos picker with the text input field and keyboard area in the iOS 18 Messages app.
struct MessagesPhotosPickerView: View {
	@State private var text: String = ""
	@State private var showPhotosPicker: Bool = false
	@State private var photoItem: PhotosPickerItem?

	var body: some View {
		NavigationStack {
			VStack {
				ScrollView(.vertical) {
					MessagesList()
				}
				.scrollDismissesKeyboard(.interactively)
				Spacer()
				MessageInput()
			}
			.sheet(isPresented: $showPhotosPicker) {
				PhotosPicker(selection: $photoItem) {}
					.photosPickerStyle(.inline)
					.photosPickerDisabledCapabilities([.collectionNavigation, .search])
					.presentationDetents([.height(336), .large])
					.presentationBackground(.clear)
					.presentationBackgroundInteraction(.enabled(upThrough: .large))
			}
		}
	}

	@ViewBuilder
	func MessagesList() -> some View {
		ForEach(0..<10, id: \.self) { index in
			HStack(alignment: .top) {
				VStack(alignment: .leading) {
					Text("Sender \(index + 1)")
					Text("Message \(index + 1)")
						.font(.subheadline)
						.foregroundStyle(.secondary)
				}
				Spacer()
				Text(Date().formatted(date: .abbreviated, time: .omitted))
					.font(.subheadline)
			}
			.padding(.vertical, 5)
			.padding(.horizontal)
			.frame(maxWidth: .infinity, alignment: .leading)
		}
	}

	@ViewBuilder
	func MessageInput() -> some View {
		HStack {
			Button {
				// UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
				showPhotosPicker = true
			} label: {
				Image(systemName: "plus.circle.fill")
					.font(.title)
					.foregroundStyle(.tertiary)
			}
			.buttonStyle(.plain)

			HStack(alignment: .bottom) {
				TextField(
					"iMessage",
					text: $text,
					axis: .vertical
				)
				.lineLimit(10)
				Button {
				} label: {
					Image(systemName: "arrow.up.circle.fill")
						.font(.title2)
				}
				.tint(.primary)
				.disabled(text.isEmpty)
			}
			.padding(.vertical, 5)
			.padding(.horizontal, 10)
			.background(.regularMaterial, in: .rect(cornerRadius: 30))
		}
		.padding(.horizontal, 10)
		.padding(.bottom, 10)
	}
}

#Preview {
	MessagesPhotosPickerView()
}