Black Friday deal: 30% off our book "Integrating SwiftUI into UIKit apps"! Learn more ...Black Friday deal:30% off "Integrating SwiftUI into UIKit apps" >>
Quick Tip Icon
Quick Tip

Pin a view to the bottom of safe area in SwiftUI

To permanently position a view at the bottom of the screen in a SwiftUI app, we can place it inside safeAreaInset(edge: .bottom) modifier.

Integrating SwiftUI into UIKit Apps by Natalia Panferova book coverIntegrating SwiftUI into UIKit Apps by Natalia Panferova book cover
Black Friday offer
Our book "Integrating SwiftUI into UIKit apps" is now 30% off!

Discover various ways to adopt SwiftUI in existing UIKit projects and take full advantage of the new iOS 16 frameworks and APIs such as Swift Charts.

The offer is active until the 1st of December.

For example, if we want to have a text field that is pinned to the bottom of the safe area and moves to the top of the software keyboard when focused, we can achieve it in the following way.

List(messages) { message in
    Text(message.text)
}
.safeAreaInset(edge: .bottom) {
    TextField(
        "New message",
        text: $newMessageText
    )
        .padding()
        .textFieldStyle(.roundedBorder)
        .background(.ultraThinMaterial)
        .onSubmit {
            // append message
        }
}

I'm also adding a material background in my example so that the scrolled content can go underneath the background, rather than being briefly visible below the text field.

Here is the UI we can achieve with just a few lines of code in SwiftUI.

Screenshots of the sample app where the text field is pinned to the bottom.

You can get the full code for this small example from our GitHub repo.