Hide and show a view with opacity

Sometimes we need to hide and show a view in SwiftUI depending on a setting or state, but don’t want our layout to shift when the view appears.

We can use opacity() modifier to make the view fully opaque or transparent.

struct ContentView: View {
    @State var showMessage = false
    
    var body: some View {
        VStack {
            Button("Toggle message") {
                showMessage.toggle()
            }
            Text("Welcome!")
                .opacity(showMessage ? 1 : 0)
        }
    }
}

Fully transparent views are also hidden from VoiceOver.

If you are enjoying our blog and would like to support us, you can sponsor us on GitHub.