SwiftUI: How to take screenshot of ScrollView Content?

In this tutorial, We will be converting ScrollView’s content into a UIImage.
First, we will convert any view into the UIImage then we will extend the same logic to screenshot the entire Scroll view content.

extension View {    
func takeScreenshot(origin: CGPoint, size: CGSize) -> UIImage {
let window = UIWindow(frame: CGRect(origin: origin, size: size))
let hosting = UIHostingController(rootView: self)
hosting.view.frame = window.frame
return hosting.view.screenShot

2. Getting Image from UIKit’s UIView: For this, we are going to use simple core graphics apis like following:

extension UIView {   
var screenShot: UIImage {
let rect = self.bounds
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
let context: CGContext = UIGraphicsGetCurrentContext()!
self.layer.render(in: context)
let capturedImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
return capturedImage

3. Triggering Image from SwiftUI View: As we need to pass frame, We need to wrap view in Geometry Reader.

GeometryReader { proxy in           
VStack {
Button(action: {
let image = self.takeScreenshot(origin: proxy.frame(in: .global).origin, size: proxy.size)
print(image) //save your image here
}) {
RoundedRectangle(cornerRadius: 20)
VStack {
Text("size: \(proxy.size.debugDescription)")
}.frame(height: 100)

4. Reading ScrollView’s content frame: We will add Geometry Reader on ScrollView’s content background and repeat step 3 to take the screenshot.
We will be building ScrollView’s content in a separate view container, As we want to create UIHostingView on Content view and not on its parent.

iOS Developer | Swift | Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store