Create a share sheet in SwiftUI
In this tutorial, we will see how to create a share sheet in SwiftUI.
The share sheet is like a menu that pops up on our phone or computer when we want to share something. Suppose we have a video, image, or link and we want to send it to our friend, we can do that easily by using the share sheet.
We can create a share sheet using the sheet
modifier along with the UIActivityViewController
to present the sharing options.
Follow the steps below to create a share sheet.
Create ContentView Struct
First of all, In the ContentView
, I will create a button Share
and when we click on that button a sheet will pop up with a bunch of options.
Example
struct ContentView: View { // State variable to manage the presentation of the share sheet @State private var isSharing = false // Content to be shared let contentToShare = "Share the Content" var body: some View { // Button triggering the share sheet Button(action: { self.isSharing.toggle() // Toggles the state to show/hide the sheet }) { Label("Share", systemImage: "square.and.arrow.up") // Button label with a system image } .sheet(isPresented: $isSharing) { // Presents the share sheet when isSharing is true ShareViewController(shareItems: [contentToShare]) // Passes the content to the ShareViewController } } }
In the above code, I have declared the property isSharing
to manage the presentation of the share sheet.
I have also declared a variable contentToShare
to hold the content that we want to share.
Then, I have used the sheet
modifier to make a sheet appear with some sharing options when users tap the Share
button.
Create ShareViewController Struct
The ShareViewController
struct conforms to UIViewControllerRepresentable
. This will allow the integration of UIKit components (UIActivityViewController
) into SwiftUI and enable the content sharing functionality within our app.
Example
struct ShareViewController: UIViewControllerRepresentable { let shareItems: [Any] // Items to share // Creates the UIActivityViewController to handle sharing func makeUIViewController(context: Context) -> UIActivityViewController { let activityViewController = UIActivityViewController(activityItems: shareItems, applicationActivities: nil) return activityViewController } // Updates the UIActivityViewController if needed (not used in this example) func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {} }
The UIViewControllerRepresentable
protocol requires the makeUIViewController
method. It will create and return a UIActivityViewController
, which is a system-provided view controller used for sharing content through various services like AirDrop, Messages, Mail, etc.
Here is the complete code below.
import SwiftUI struct ContentView: View { @State private var isSharing = false let contentToShare = "Share the Content" var body: some View { Button(action: { self.isSharing.toggle() }) { Label("Share", systemImage: "square.and.arrow.up") } .sheet(isPresented: $isSharing) { ShareViewController(shareItems: [contentToShare]) } } } struct ShareViewController: UIViewControllerRepresentable { let shareItems: [Any] func makeUIViewController(context: Context) -> UIActivityViewController { let activityViewController = UIActivityViewController(activityItems: shareItems, applicationActivities: nil) return activityViewController } func updateUIViewController(_ uiViewController: UIActivityViewController, context: Context) {} }
Output:
Leave a Reply