New in SwiftUI 4: Share Sheet with ShareLink
ShareLink is another cool feature introduced in SwiftUI 4. ShareLink is a view that controls share sheet presentation AKA share interface.
ShareLink view generates a link which, upon tapping presents share interface. This link uses system standard appearance of link view so all you need to do is to supply content which needed sharing.
Let’s start with an example, we will share a simple message that can be copied in clipboard.
We will create a view with TextEditor and ShareLink. ShareLink will have the content to be shared and just for demo purposes, we will paste copied content via ShareLink API into the text editor.
struct ContentView: View {
@State private var text = ""
var body: some View {
VStack {
TextEditor(text: $text)
ShareLink(item: "", subject: Text("DevTechie.com"), message: Text("Visit DevTechie.com for iOS Development Content!"))
}
}
}
Note that subject and message are optional parameters
We can pass URLs directly into the ShareLink view.
struct ContentView: View {
let url = URL(string: "https://www.devtechie.com")!
var body: some View {
VStack {
Text("DevTechie.com")
ShareLink(item: url)
}
}
}
We can even customize the ShareLink to our own custom view as shown below:
struct ContentView: View {
let url = URL(string: "https://www.devtechie.com")!
var body: some View {
VStack {
Text("DevTechie")
.font(.largeTitle)
ShareLink(item: url) {
Label("Visit DevTechie Website!", systemImage: "globe")
.foregroundColor(.white)
.padding()
.background(.orange.gradient.shadow(.drop(radius: 1, x: 2, y: 2)), in: RoundedRectangle(cornerRadius: 5))
}
}
}
}
ShareLink with SharePreview
With the introduction to Transferable protocol we can share images. With the help of SharePreview, we can show the preview of the image being shared via ShareLink.
For this first we will create a custom struct and make it conform to Transferable protocol.
struct Photo: Transferable {
static var transferRepresentation: some TransferRepresentation {
ProxyRepresentation(exporting: \.image)
}public var image: Image
public var caption: String
}Next we will use this Photo struct along with SharePreview inside the ShareLink:
struct ContentView: View {
var imgToShare = Photo(image: Image("DT"), caption: "DevTechie.com")
var body: some View {
VStack {
Text("DevTechie")
.font(.largeTitle)
ShareLink(
item: imgToShare,
preview: SharePreview(
"DevTechie",
image: imgToShare.image)) {
Text("Share DevTechie.com")
}
}
}
}Notice the preview of DevTechie logo at the top of Share sheet.
With that we have reached the end of this article. Thank you once again for reading. Subscribe our newsletter at https://www.devtechie.com