ios – How can I customize the appearance of PasteButton in SwiftUI?

0
46


I have an app that allows the user to paste an image from the pasteboard, if it has an image on it. There is also an option for the user to choose a photo from the library. I had two buttons with a matching style, like this:

Matching buttons

struct ButtonView: View {
    var body: some View {
        VStack {
            Button {
                // Paste from pasteboard
            } label: {
                HStack {
                    Image(systemName: "doc.on.clipboard")
                    Text("Paste Photo")
                }
                    .font(.title)
            }
                .padding(.bottom, 8)

            Button
            {
                // Open photo library
            } label: {
                Image(systemName: "photo.on.rectangle.angled")
                Text("Pick a Photo")
            }
                .font(.title)
        }
    }
}

I’m trying to adopt the new PasteButton in iOS 16 to avoid the user prompt every time, but I can’t find any documentation about how to customize it. In the WWDC 2022 session What’s new in privacy, there is a section about the button and the speaker says “customize these buttons to fit with your app’s interface,” but I can’t find any documentation about how to customize or what types of customization are allowed.

I have tried adding a .font(.title) modifier, for example, but that does not affect the text size. Ideally I’d like to change the button text to “Paste Photo” and get rid of the background, in addition to changing the font size, so that it matches how the app used to look with the custom button. How can I achieve this?

Buttons that don't match

struct ButtonView: View {
    
    private let supportedTypes: [UTType] =
        [UTType("public.image")!]
    
    var body: some View {
        VStack {
            PasteButton(supportedContentTypes: supportedTypes) { itemProviders in
                // Handle paste
            }
            .padding(.bottom, 8)

            Button
            {
                // Open photo library
            } label: {
                Image(systemName: "photo.on.rectangle.angled")
                Text("Pick a Photo")
            }
                .font(.title)
        }
    }
}