How to disable user interaction on SwiftUI view?

Question

Let's say I have a SwiftUI view hierarchy that looks like this:

ZStack() {
    ScrollView {
        ...
    }
    Text("Hello.")
}

The Text view blocks touch events from reaching the underlying ScrollView.

With UIKit, I'd use something like .isUserInteractionEnabled to control this, but I can't find any way to do this with SwiftUI.

I've tried adding a Gesture with a GestureMask of .none on the text view, but that doesn't seem to work.

I hope I'm missing something obvious here, because I need to put some status information on top of the scroll view.

Between the "rawness" of SwiftUI and the outlier need you described, I'd be surprised if you are missing something obvious - it probably doesn't (yet) exist. — user7014451
– user7014451, Commented Sep 11, 2019 at 20:40
You probably want to put the Text in a frame to make it smaller and contentShape may help too. — Michael Salmon
– Michael Salmon, Commented Sep 12, 2019 at 8:36
@chockenberry It's exactly one year later. Did you find a working solution for the Problem and would you might share it? — Jonas Deichelmann
– Jonas Deichelmann, Commented Sep 11, 2020 at 12:54
Interesting how SwiftUI seemed to automatically disable user interaction if opacity was ≤ 0.5 if I didn't set allowsHitTesting. — bjb568
– bjb568, Commented Sep 15, 2020 at 1:34
Found an answer: stackoverflow.com/a/61225965/11912101 .allowsHitTesting(false)applying to the UIViewControllerWrapper() did the trick for me. — leonboe1
– leonboe1, Commented Oct 21, 2020 at 12:27

MihaiL · Accepted Answer · 2019-11-18 10:47:29Z

133

What about using the .allowsHitTesting()?

https://developer.apple.com/documentation/swiftui/image/3269586-allowshittesting

From my understanding it should pass the gesture to the view behind if it's disabled.

ZStack() {
    ScrollView {
        ...
    }
    Text("Hello.").allowsHitTesting(false)
}

answered Nov 18, 2019 at 10:47

MihaiL

1,7981 gold badge11 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Michał Ziobro Over a year ago

It works for me. I have images over background view and want to detect gestures on background. So adding allowsHitTesting(false) on images disables them from interfering with gesture recognitiona and all touches are handled by background view.

OldManMcDonalds Over a year ago

As a sidenote, this was not working for me initially since I was adding a drop modifier, but when I moved this to be the last modifier it started working.

Mattia Righetti Over a year ago

This is currently not working for me, I have a Circle in front of a Map UIViewRepresentable and I can't scroll the map if I'm dragging on the Circle itself

Jonny Over a year ago

This does not work with iOS14; the Text will block taps where the Text appears in the ZStack.

Dimitar Marinov Over a year ago

omg, Macromedia Flash is back

LuLuGaGa · Accepted Answer · 2019-09-11 20:44:47Z

51

There is a modifier on View to disable or enable user interaction:

disabled(_ disabled: Bool)

answered Sep 11, 2019 at 20:44

LuLuGaGa

14.5k8 gold badges56 silver badges63 bronze badges

4 Comments

chockenberry Over a year ago

I tried putting .disabled(true) on both the Text and ZStack and that didn't help.

LuLuGaGa Over a year ago

Apple doc say: "The higher views in a view hierarchy can override the value you set on this view. In the following example, the button isn't interactive because the outer disabled(_:) modifier overrides the inner one: HStack { Button(Text("Press")) {} .disabled(false) } .disabled(true)

LuLuGaGa Over a year ago

Have you tried setting zIndex(1) on one of the views to bring it forward?

chockenberry Over a year ago

See my own answer above: it appears that the problem isn't the stack or views within it, but rather a problem with .border() doing something unexpected.

Gene Z. Ragan · Accepted Answer · 2021-07-09 16:52:32Z

34

You want to make sure you fill your view with some color, except Clear color (you can always change opacity). I've also added blur to hide elements. Here's what worked for me:

SwiftUI:

ZStack{
    SomeView().blur(radius: 12)
    Rectangle()
        .fill(Color.white.opacity(0))
        .allowsHitTesting(false)
}

Another way to disable user interactions like scroll or button taps, but attach an action to user taps (for example a message to users that this feature is coming or behind a paywall):

SwiftUI:

VStack{
    SomeView().blur(radius: 12)
}
.contentShape(Rectangle())
.onTapGesture {
    print("No access!")
}

edited Jul 9, 2021 at 16:52

Gene Z. Ragan

2,8832 gold badges35 silver badges42 bronze badges

answered Feb 27, 2020 at 15:48

Repose

2,2071 gold badge26 silver badges26 bronze badges

Comments

zouritre · Accepted Answer · 2022-08-01 21:51:35Z

27

Put your view to be "tap disabled" into a Group then apply the modifier .allowsHitTesting(false) to disable interaction with any view inside the group.

Group {
  Button("Hello")
}
.allowsHitTesting(false)

To enable interaction switch the modifier to true.

answered Aug 1, 2022 at 21:51

zouritre

7037 silver badges10 bronze badges

1 Comment

Vyacheslav Over a year ago

This is the most useful answer

flyingBear · Accepted Answer · 2022-04-11 22:06:48Z

15

SwiftUI 2.0

 ZStack {

    // Your Stack to Disable User Interaction

}.disabled(showLoadingIndicator)

edited Apr 11, 2022 at 22:06

flyingBear

5541 gold badge6 silver badges16 bronze badges

answered Jun 17, 2021 at 9:13

Threadripper

65210 silver badges15 bronze badges

3 Comments

eugeneek Over a year ago

You really can change it just to .disabled(showLoadingIndicator)

Threadripper Over a year ago

.disabled(showLoadingIndicator) here showLoadingIndicator is Boolean

Marchy Dec 8, 2024 at 18:38

This works great with ScrollViews as well as it cancels their partial pagination if you say trigger a navigation gesture on a slight angle, while applying it on a ScrollView that paginates like a pager 🎉

chockenberry · Accepted Answer · 2019-09-11 20:56:05Z

4

This is most likely a bug in SwiftUI, but the workaround for this problem was to remove a .border() that I had put on the Text view for bounds debugging.

answered Sep 11, 2019 at 20:56

chockenberry

8,0016 gold badges35 silver badges43 bronze badges

Comments

noobular · Accepted Answer · 2021-08-21 20:45:05Z

1

Certain elements inside of SwiftUI cannot be disabled through .disabled or .allowHitTesting. A major HACK is to wrap your element in a TabView and apply a paging style to it. Again this is a major hack but it's an interesting solution I'm using currently.

answered Aug 21, 2021 at 20:45

noobular

3,2872 gold badges27 silver badges19 bronze badges

Comments

Neha · Accepted Answer · 2023-06-26 05:49:01Z

1

ZStack {


}
.allowsHitTesting(false)

it will disabled the user interaction

answered Jun 26, 2023 at 5:49

Neha

7521 gold badge11 silver badges17 bronze badges

Comments

Super Kai - Kazuya Ito · Accepted Answer · 2022-02-11 07:30:17Z

0

I'm doing something similar on a watch app, .overlaying a text field over a Slider. I couldn't get either .disable or .allowHitTesting to work when applied to the Text field.

To solve this, I found that placing the Text field in a Group{} (all by itself) and then applying the .allowHitTesting(false) worked perfectly.

edited Feb 11, 2022 at 7:30

Super Kai - Kazuya Ito

42.7k23 gold badges257 silver badges256 bronze badges

answered Feb 6, 2022 at 13:51

BarryD

416 bronze badges

Comments

Metin Atalay · Accepted Answer · 2024-01-03 09:38:36Z

0

You can use the below modifier

EX:

view.loader(isLoading)

Modifer ⬇️

//
//  LoaderModifier.swift
//  
//
//  Created by Metin Atalay 
//

import SwiftUI
import TRTUI

public struct LoaderModifier: ViewModifier {
    public var isLoading: Bool
    
    public func body(content: Content) -> some View {
        content.disabled(isLoading)
            .overlay {
                if isLoading {
                    ZStack(alignment: .center) {
                       ProgressView()
                    }
                    .frame(width: 200, height: 150)
                    .zIndex(100)
                }
            }
    }
}

// MARK: VIEW EXTENSION
public extension View {
    func loader(_ loading: Bool) -> some View {
        self.modifier(LoaderModifier(isLoading: loading))
    }
}

answered Jan 3, 2024 at 9:38

Metin Atalay

1,52520 silver badges30 bronze badges

1 Comment

kelin May 31 at 11:29

So basically only relevant modifier here is .disabled() and everything else is offtopic.

Collectives™ on Stack Overflow

How to disable user interaction on SwiftUI view?

10 Answers 10

5 Comments

4 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

4 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related