swiftswiftuivisionosphotosui

How to remove PhotosPicker background colour on visionOS?


When using PhotosPicker on visionOS the content has a background color. How do I remove this? I have noticed the same with Stepper.

Example:

enter image description here

Code:

import SwiftUI
import PhotosUI

struct AddImageView: View {

    @State private var avatarItem: PhotosPickerItem?
    @State private var avatarImage: Image = Image("ProfileImageEmpty")
    @State private var ref: Image = Image("ProfileImageEmpty")
    
    var body: some View {
    VStack(alignment: .center, spacing: 8) {
        PhotosPicker(selection: $avatarItem, matching: .images) {
            ZStack(alignment: .center) {
                avatarImage
                    .resizable()
                    .modifier(CoverImage())
                
                if avatarImage == ref {
                    HStack(alignment: .center, spacing: 8) {
                        Image(systemName: "camera")                              
                            .font(.system(size: 18, weight:.semibold))
                        Text("Upload Image")
                            .modifier(Subtitle())
                    }
                }
            }
        }
        .background(.clear)
        .onChange(of: avatarItem) {
            Task {
                if let loaded = try? await avatarItem?.loadTransferable(type: Image.self) {
                    avatarImage = loaded
                } else {
                    print("Failed")
                }
            }
        }
    }
    .frame(maxWidth: .infinity)
    }
}

Solution

  • You can use .photosPicker instead of PhotosPicker. An .onTapGesture can trigger it.

    struct AddImageView: View {
        
        @State private var avatarItem: PhotosPickerItem?
        @State private var avatarImage: Image = Image("ProfileImageEmpty")
        @State private var ref: Image = Image("ProfileImageEmpty")
        @State private var isPresentingPicker: Bool = false
        var body: some View {
            VStack(alignment: .center, spacing: 8) {
                
                ZStack(alignment: .center) {
                    avatarImage
                        .resizable()
                        .modifier(CoverImage())
                    
                    if avatarImage == ref {
                        HStack(alignment: .center, spacing: 8) {
                            Image(systemName: "camera")
                                .font(.system(size: 18, weight:.semibold))
                            Text("Upload Image")
                                .modifier(Subtitle())
                        }
                    }
                }.onTapGesture {
                    isPresentingPicker.toggle()
                }
                .background(.clear)
                .task(id: avatarItem) { //`task` is safer than `onChange`
                    guard let avatarItem else {return}
    
                    if let loaded = try? await avatarItem.loadTransferable(type: Image.self) {
                        avatarImage = loaded
                    } else {
                        print("Failed")
                    }
                }
                .photosPicker(isPresented: $isPresentingPicker, selection: $avatarItem) //Modifier instead of `View`
            }
            .frame(maxWidth: .infinity)
        }
    }