Instance member '$isBrowsingWebsite' cannot be used on type 'MapPinSheetSectionOneView_Previews'

Question

So I have a Binding declared inside my view and I can't seem to get it to work when generating a preview, and it keeps crashing.

So I have the following view:

struct MapPinSheetSectionOneView: View {
    
    // Safari View - Binding
    @Binding var isBrowsingWebsite: Bool
    
    // Variables
    let item: Place
    
    // Main body
    var body: some View {
        HStack(alignment: .top, spacing: 0) {
            
            // Type/Title/Excerpt
            showSectionOne
                .border(.blue)
            
            // Spacers
            Spacer()
            Spacer()
            Spacer()
            
            // Link & Close Button
            showSheetLinkAndCloseButton
                .border(.red)
        }
        .border(.red)
        
        // Divider
        Divider()
    }
    
    // MARK: Category, Title & Excerpt
    private var showSectionOne: some View {
        VStack(alignment: .leading, spacing: 0) {
            Group {
                if item.category != "" {
                    Text(verbatim: item.category)
                      .padding(8)
                      .background(
                        RoundedRectangle(cornerRadius: 8)
                          .fill(Color.accentColor)
                      )
                }
                if item.title != "" {
                    Text(item.title)
                        .font(.title2.weight(.semibold))
                }
                if item.excerpt != "" {
                    HStack(alignment: .top, spacing: 3) {
                        Text(item.excerpt)
                            .font(.footnote)
                            .foregroundColor(.secondary)
                            .lineLimit(2)
                        Spacer()
                    }
                }
            }
            .lineLimit(1)
        }
    }
    
    // MARK: Link & Close Button
    private var showSheetLinkAndCloseButton: some View {
        Group {
            if item.website != "" {
                Button(action: {
                    self.isBrowsingWebsite = true
                }) {
                    Image(systemName: "link.circle.fill")
                }
                .sheet(isPresented: $isBrowsingWebsite) {
                    SafariViewWrapper(url: URL(string: item.website)!)
                }
            }
            Image(systemName: "xmark.circle.fill")
        }
        .imageScale(.large)
        .foregroundColor(.accentColor)
    }
}

Then, I have the following attempted preview:

struct MapPinSheetSectionOneView_Previews: PreviewProvider {
    @Binding var isBrowsingWebsite: Bool
    static var previews: some View {
        MapPinSheetSectionOneView(
            isBrowsingWebsite: $isBrowsingWebsite,
            item: Place(
                id: 0,
                title: "Title",
                category: "Category",
                type: "Type",
                description: "Description",
                excerpt: "Excerpt",
                address: "Address",
                city: "City",
                state: "State",
                zipcode: 0,
                country: "Country",
                lat: 39.828194,
                long: -98.569611,
                altitude: 0,
                amenity: ("Amenities"),
                admission: "Free",
                website: "Website"
            )
        )
    }
}

For some reason, it keeps crashing and I am getting the following errors:

Instance member '$isBrowsingWebsite' cannot be used on type 'MapPinSheetSectionOneView_Previews'

Does anyone know how to make a binding bool work inside previews?

Answer 1

Approach 1 - Dynamic Value

In order to use a binding in a preview (without declaring it a constant) you will need to create a wrapper.

I had to create a struct for Place since it was not included. You can swap it with out with your version of Place

struct PreviewWrapperWithState<Value, Content: View>: View {
@State var value: Value
var content: (Binding<Value>) -> Content

var body: some View {
    content($value)
}

init(_ value: Value, content: @escaping (Binding<Value>) -> Content) {
    self._value = State(wrappedValue: value)
    self.content = content
  }
}

struct MapPinSheetSectionOneView_Previews: PreviewProvider {
    static var previews: some View {
        var thingToPreview = false  // ERROR
        let place =  Place(
            id: 0,
            title: "Title",
            category: "Category",
            type: "Type",
            description: "Description",
            excerpt: "Excerpt",
            address: "Address",
            city: "City",
            state: "State",
            zipcode: 0,
            country: "Country",
            lat: 39.828194,
            long: -98.569611,
            altitude: 0,
            amenity: ("Amenities"),
            admission: "Free",
            website: "Website"
        )
        
        PreviewWrapperWithState(thingToPreview) { MapPinSheetSectionOneView(isBrowsingWebsite: $0, item: place) }
    }
}

Approach 2 - Constant Value

The alternative is to initialize your Binding with a constant. This will limit functionality to its initialized state.

struct MapPinSheetSectionOneView_Previews: PreviewProvider {
static var previews: some View {
    MapPinSheetSectionOneView(
        isBrowsingWebsite: Binding.constant(true),
        item: Place(
            id: 0,
            title: "Title",
            category: "Category",
            type: "Type",
            description: "Description",
            excerpt: "Excerpt",
            address: "Address",
            city: "City",
            state: "State",
            zipcode: 0,
            country: "Country",
            lat: 39.828194,
            long: -98.569611,
            altitude: 0,
            amenity: ("Amenities"),
            admission: "Free",
            website: "Website"
        )
    )
  }
}