How to get Screen Width in SwiftUI

As an iOS Developer, one of the most common challenges you will face when transitioning from UIKit to SwiftUI is understanding how spatial layout works. In the old days of imperative UI, you could simply grab the screen dimensions and manually calculate the frames for your views. However, SwiftUI introduces a declarative paradigm where views propose sizes and their parents determine their final placement.

Despite this shift, there are still many scenarios where you need to know the exact screen width. Whether you are building a custom carousel, a complex grid, or a responsive charting component, knowing the precise dimensions is crucial.

In this comprehensive tutorial, we will explore exactly how to get the screen width across Apple’s ecosystem using Swift. We will cover iOS, macOS, and watchOS, diving deep into the tools provided by Xcode.

1. The Paradigm Shift: Why is Getting the Screen Width Different in SwiftUI?

Before we dive into the code, it is essential to understand how SwiftUI thinks. In UIKit, the screen size was the absolute source of truth. You built constraints or frames based on UIScreen.main.bounds.

In SwiftUI, however, the philosophy is different:

1. The Parent Proposes a Size: The parent view tells the child view how much space is available.
2. The Child Chooses its Size: The child view calculates its own size based on its contents and the proposed space.
3. The Parent Places the Child: The parent positions the child within its coordinate space.

Because of this, directly querying the hardware screen width is often considered an anti-pattern if you just want a view to fill the screen (you should use .frame(maxWidth: .infinity) instead). However, when you truly need the hardware or window width, Swift provides several robust tools.

2. The Native SwiftUI Way: Using GeometryReader

The most idiomatic way to get the available width in SwiftUI is by using a GeometryReader.

A GeometryReader is a specialized view that takes up all the available space provided by its parent and gives you access to a GeometryProxy object. This proxy contains the size and coordinate space of the container.

Basic Implementation

Here is how you can use a GeometryReader to get the width:

Swift

import SwiftUI

struct ScreenWidthView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("The available width is:")
                    .font(.headline)
                
                // Accessing the width via the geometry proxy
                Text("\(geometry.size.width, specifier: "%.2f") points")
                    .font(.largeTitle)
                    .foregroundColor(.blue)
                
                // Using the width to create a proportional box
                Rectangle()
                    .fill(Color.orange)
                    .frame(width: geometry.size.width * 0.8, height: 100)
                    .cornerRadius(10)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
    }
}

The “Gotcha” with GeometryReader

While GeometryReader is powerful, any seasoned iOS Developer knows it comes with a catch: it consumes all available space. If you place a GeometryReader inside a stack that doesn’t have a defined size, it will expand aggressively, potentially breaking your layout.

Pro-Tip: If you only want to read the size without affecting the layout, place the GeometryReader inside an invisible .background() or .overlay() modifier using a PreferenceKey.

Advanced: Reading Width Without Breaking Layout (PreferenceKey)

Swift

import SwiftUI

// 1. Define a PreferenceKey
struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct SafeWidthView: View {
    @State private var viewWidth: CGFloat = 0
    
    var body: some View {
        VStack {
            Text("This text dictates the height.")
            Text("Width: \(viewWidth)")
        }
        .padding()
        .background(
            GeometryReader { geo in
                Color.clear
                    // 2. Publish the width to the preference key
                    .preference(key: WidthPreferenceKey.self, value: geo.size.width)
            }
        )
        // 3. Listen for changes
        .onPreferenceChange(WidthPreferenceKey.self) { newWidth in
            self.viewWidth = newWidth
        }
    }
}

This is a staple technique in modern “programación Swift” to maintain layout integrity while extracting dimensions.

3. Platform-Specific Approaches: Bypassing GeometryReader

Sometimes, you don’t want to rely on the view hierarchy to give you the screen size. You might need the absolute screen width in a ViewModel, or before the view is even rendered. Here is how to achieve that across different platforms in Xcode.

iOS: The Modern UIWindowScene Approach

Historically, iOS developers used UIScreen.main.bounds.width. However, since iOS 13 introduced multiple windows (especially on iPadOS), UIScreen.main is officially deprecated in modern iOS SDKs.

The correct way to get the screen width in modern iOS Swift programming is by accessing the active UIWindowScene.

Swift

#if os(iOS)
import SwiftUI
import UIKit

extension UIScreen {
    static var currentWidth: CGFloat {
        guard let windowScene = UIApplication.shared.connectedScenes
                .first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene else {
            return 0
        }
        return windowScene.screen.bounds.width
    }
}

// Usage in SwiftUI:
struct IOSScreenView: View {
    var body: some View {
        Text("iOS Screen Width: \(UIScreen.currentWidth)")
    }
}
#endif

macOS: Accessing NSScreen

If you are building a Mac app with SwiftUI, UIKit is not available. Instead, you must rely on AppKit and NSScreen.

Swift

#if os(macOS)
import SwiftUI
import AppKit

extension NSScreen {
    static var currentWidth: CGFloat {
        // Fallback to the main screen if needed
        return NSScreen.main?.frame.width ?? 0
    }
}

struct MacOSScreenView: View {
    var body: some View {
        Text("macOS Screen Width: \(NSScreen.currentWidth)")
    }
}
#endif

watchOS: Accessing WKInterfaceDevice

For the Apple Watch, the screen size is critical because the real estate is so limited. WatchKit provides a straightforward way to access the device’s screen bounds.

Swift

#if os(watchOS)
import SwiftUI
import WatchKit

extension WKInterfaceDevice {
    static var currentWidth: CGFloat {
        return WKInterfaceDevice.current().screenBounds.width
    }
}

struct WatchOSScreenView: View {
    var body: some View {
        Text("watchOS Screen Width: \(WKInterfaceDevice.currentWidth)")
    }
}
#endif

4. Building a Universal Cross-Platform Utility in Xcode

As a professional iOS Developer (or Apple ecosystem developer), you should aim to write clean, reusable code. If you are developing a multi-platform app in Xcode, writing #if os() blocks inside your views will quickly make your codebase messy.

Let’s create a unified utility struct that works seamlessly across iOS, macOS, and watchOS.

Create a new Swift file in your Xcode project named DeviceMetrics.swift:

Swift

import SwiftUI

#if os(iOS)
import UIKit
#elseif os(macOS)
import AppKit
#elseif os(watchOS)
import WatchKit
#endif

public struct DeviceMetrics {
    
    /// Returns the absolute screen width based on the current platform.
    public static var screenWidth: CGFloat {
        #if os(iOS)
        guard let windowScene = UIApplication.shared.connectedScenes
                .first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene else {
            return UIScreen.main.bounds.width // Fallback
        }
        return windowScene.screen.bounds.width
        
        #elseif os(macOS)
        return NSScreen.main?.frame.width ?? 0
        
        #elseif os(watchOS)
        return WKInterfaceDevice.current().screenBounds.width
        
        #else
        return 0 // Fallback for unsupported platforms (e.g., tvOS if not configured)
        #endif
    }
    
    /// Returns the absolute screen height based on the current platform.
    public static var screenHeight: CGFloat {
        #if os(iOS)
        guard let windowScene = UIApplication.shared.connectedScenes
                .first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene else {
            return UIScreen.main.bounds.height
        }
        return windowScene.screen.bounds.height
        
        #elseif os(macOS)
        return NSScreen.main?.frame.height ?? 0
        
        #elseif os(watchOS)
        return WKInterfaceDevice.current().screenBounds.height
        
        #else
        return 0
        #endif
    }
}

Now, anywhere in your SwiftUI views, you can cleanly access the width without worrying about the underlying platform:

Swift

struct UniversalView: View {
    var body: some View {
        VStack {
            Text("Universal Screen Width")
            Rectangle()
                .frame(width: DeviceMetrics.screenWidth * 0.5, height: 50)
                .foregroundColor(.green)
        }
    }
}

5. Alternatives to Explicit Width: Responsive Design in SwiftUI

While querying the exact screen width answers the question of “cómo obtener el ancho de pantalla en SwiftUI“, it is often better to rely on SwiftUI‘s built-in responsive tools. Hardcoding widths, even proportionally, can lead to issues during device rotation, Split View on iPad, or resizing windows on macOS.

Here are the best practices every iOS Developer should employ before reaching for manual screen width calculations:

A. Using maxWidth: .infinity

If you want a view to stretch across the entire screen width, you do not need the exact number. Just use the frame modifier:

Swift

Button(action: {
    print("Tapped!")
}) {
    Text("Full Width Button")
        .foregroundColor(.white)
        .padding()
        .frame(maxWidth: .infinity) // Automatically fills horizontal space
        .background(Color.blue)
        .cornerRadius(10)
}
.padding(.horizontal)

B. Size Classes (@Environment(\.horizontalSizeClass))

Instead of checking if the width is greater than 500 pixels to determine if you are on an iPad, use Size Classes. This is a core concept in programación Swift for Apple platforms.

Swift

struct ResponsiveLayoutView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    
    var body: some View {
        if horizontalSizeClass == .compact {
            // iPhone Portrait
            VStack {
                Text("Compact Layout")
            }
        } else {
            // iPad or iPhone Max Landscape
            HStack {
                Text("Regular Layout")
            }
        }
    }
}

C. The ViewThatFits Modifier (iOS 16+)

Introduced recently, ViewThatFits automatically selects the first view that fits within the available space without getting clipped. This completely removes the need to manually measure the screen width for adaptive layouts.

Swift

struct AdaptiveButtonView: View {
    var body: some View {
        ViewThatFits {
            // Tries this first (Requires more width)
            HStack {
                Text("Accept Terms & Conditions")
                Image(systemName: "checkmark.circle")
            }
            
            // Falls back to this if the screen/container is too narrow
            VStack {
                Image(systemName: "checkmark.circle")
                Text("Accept")
            }
        }
    }
}

6. Performance Considerations and Best Practices in Xcode

As you continue your journey in programación Swift, it is crucial to understand the performance implications of the tools you use.

1. Avoid Overusing GeometryReader: GeometryReader triggers layout passes. If you nest multiple GeometryReaders, you can cause a cascade of layout invalidations, which can drop your app’s frame rate. Only use it when absolutely necessary.
2. State Updates: If you are storing screen width in an @State variable (like we did with the PreferenceKey example), remember that every time the device rotates and the width changes, your entire view will re-render. Make sure your views are lightweight to handle these structural updates smoothly.
3. Xcode Previews: When testing cross-platform utilities like our DeviceMetrics struct, take advantage of XcodePreviews. You can preview multiple devices simultaneously to ensure your width calculations scale correctly across iPhones, iPads, and Apple Watches.

Swift

struct UniversalView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            UniversalView()
                .previewDevice("iPhone 14 Pro")
                .previewDisplayName("iPhone")
            
            UniversalView()
                .previewDevice("iPad Pro (11-inch) (4th generation)")
                .previewDisplayName("iPad")
        }
    }
}

Conclusion

Understanding how to manage screen real estate is a fundamental skill for any iOS Developer. Whether you are using the native, declarative GeometryReader, tapping into iOS’s UIWindowScene, macOS’s NSScreen, or watchOS’s WKInterfaceDevice, SwiftUI provides the flexibility to build highly responsive interfaces.

To summarize:

• Use GeometryReader when you need the size of a specific container or view.
• Use UIWindowScene (or our universal DeviceMetrics wrapper) when you need the absolute hardware window width before a view is rendered.
• Whenever possible, embrace SwiftUI‘s responsive modifiers like .frame(maxWidth: .infinity), Size Classes, and ViewThatFits to build adaptive layouts without relying on hardcoded pixel widths.