If there is one thing that defines a truly great iOS app, it’s how it feels under the user’s fingertips. Fluid, intuitive, and responsive interactions are what separate good apps from exceptional ones. In SwiftUI, building these interactions revolves entirely around the Gesture API. While adding a simple .onTapGesture is something we all learn on day one, truly mastering the SwiftUI gesture system—understanding gesture states, transaction animations, and complex composition—unlocks a whole new level of UI development. .onTapGesture In this comprehensive guide, we are going to dive deep into the mechanics of SwiftUI gestures. We’ll start by demystifying the core interactions (Tap, LongPress, Drag, Magnify, and Rotation), exploring their hidden properties and best practices. Finally, we will move into advanced territory: composing multiple gestures using .map, .simultaneously(with:), and .sequenced(before:) to create professional-grade, multi-step interactions. .map .simultaneously(with:) .sequenced(before:) Let’s get started! 1. TapGesture In this example, the onTapGesture modifier uses two highly useful parameters: onTapGesture The count parameter This parameter determines the number of taps required to trigger the gesture. By default, its value is 1 (a standard single tap). However, if you need to implement a double or triple tap on a specific element, you simply increase this number. It's important to note that if you set the count to 2 or higher, single taps will be ignored, and the action will only fire once the exact number of taps is reached in quick succession. The count parameter 1 2 The coordinateSpace parameter This parameter uses the CoordinateSpace enum to define the reference frame for the tap's location. The enum consists of three main cases: The coordinateSpace parameter CoordinateSpace global: The global coordinate space at the root of the view hierarchy. local: The local coordinate space of the current view. named(AnyHashable): A named reference to a view's custom local coordinate space. global: The global coordinate space at the root of the view hierarchy. global local: The local coordinate space of the current view. local named(AnyHashable): A named reference to a view's custom local coordinate space. named(AnyHashable) By specifying the coordinateSpace (in our case, .local), the action closure provides the exact location (a CGPoint) of the tap relative to the chosen coordinate system. This is incredibly useful if you need to know exactly where the user touched the view. coordinateSpace .local location CGPoint struct TapGestureView: View { @State var backgroundColor: Color = .red var body: some View { VStack { Circle() .frame(width: 50, height: 50) .onTapGesture(count: 2, coordinateSpace: .local) { location in print(location) backgroundColor = .getRandomColor() } } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(backgroundColor) }} public extension Color { static func getRandomColor() -> Color { Color( red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1), opacity: .random(in: 0.5...1) ) } } struct TapGestureView: View { @State var backgroundColor: Color = .red var body: some View { VStack { Circle() .frame(width: 50, height: 50) .onTapGesture(count: 2, coordinateSpace: .local) { location in print(location) backgroundColor = .getRandomColor() } } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(backgroundColor) }} public extension Color { static func getRandomColor() -> Color { Color( red: .random(in: 0...1), green: .random(in: 0...1), blue: .random(in: 0...1), opacity: .random(in: 0.5...1) ) } } Try it yourself: > Change the coordinateSpace in the code above from .local to .global and tap the circle again. You'll notice that the values printed in the console are different. This happens because .global calculates the tap's coordinates relative to the entire screen (the root view), whereas .local evaluates the touch exactly within the bounds of the Circle itself. Try it yourself: > Change the coordinateSpace in the code above from .local to .global and tap the circle again. You'll notice that the values printed in the console are different. This happens because .global calculates the tap's coordinates relative to the entire screen (the root view), whereas .local evaluates the touch exactly within the bounds of the Circle itself. Try it yourself: Try it yourself: > Change the coordinateSpace in the code above from .local to .global and tap the circle again. You'll notice that the values printed in the console are different. This happens because .global calculates the tap's coordinates relative to the entire screen (the root view), whereas .local evaluates the touch exactly within the bounds of the Circle itself. 2. LongPressGesture The onLongPressGesture modifier has several key parameters and closures that give you granular control over user interactions: onLongPressGesture The minimumDuration parameter This argument determines exactly how long the user needs to hold their finger on the screen. The main action closure will only execute after this specific duration has passed. The minimumDuration parameter The onPressingChanged closure This closure is incredibly useful for tracking the gesture's lifecycle. It returns a boolean value (press) that updates dynamically depending on the user's touch. The onPressingChanged closure press When the user touches the element and starts holding, it returns true. If the user lifts their finger before the minimumDuration is reached, the value changes to false. When the user touches the element and starts holding, it returns true. true If the user lifts their finger before the minimumDuration is reached, the value changes to false. before minimumDuration false The maximumDistance parameter The gesture can also be interrupted if the user's finger moves too far from the initial touch point. By default, maximumDistance is set to 10 points. If the finger slips past this boundary, the gesture is considered canceled, and onPressingChanged will return false. The maximumDistance parameter maximumDistance onPressingChanged false struct LongPressGestureView: View { @State private var isComplete = false @State private var isPressing = false @State private var isFailed = false var body: some View { VStack { Circle() .fill(isComplete ? Color.green : (isFailed ? Color.red : Color.blue)) .frame(width: 100, height: 100) .scaleEffect(isPressing ? 1.5 : 1.0) .animation(.easeInOut, value: isPressing) .onLongPressGesture( minimumDuration: 2, maximumDistance: 20 ) { print("The action is executed after pressing for 2 seconds") isComplete = true isFailed = false } onPressingChanged: { press in isPressing = press if press { isComplete = false isFailed = false print("Start Pressing") } else if !isComplete { isFailed = true print("Canceled: moved out of bounds or press interrupted") } } } } } struct LongPressGestureView: View { @State private var isComplete = false @State private var isPressing = false @State private var isFailed = false var body: some View { VStack { Circle() .fill(isComplete ? Color.green : (isFailed ? Color.red : Color.blue)) .frame(width: 100, height: 100) .scaleEffect(isPressing ? 1.5 : 1.0) .animation(.easeInOut, value: isPressing) .onLongPressGesture( minimumDuration: 2, maximumDistance: 20 ) { print("The action is executed after pressing for 2 seconds") isComplete = true isFailed = false } onPressingChanged: { press in isPressing = press if press { isComplete = false isFailed = false print("Start Pressing") } else if !isComplete { isFailed = true print("Canceled: moved out of bounds or press interrupted") } } } } } Tip: If you don’t care whether the user’s finger wiggles or moves around during the long press, you can increase this value significantly or simply set it to .infinity. This ensures the action will only be interrupted if the user physically lifts their finger off the screen. Tip: If you don’t care whether the user’s finger wiggles or moves around during the long press, you can increase this value significantly or simply set it to .infinity. This ensures the action will only be interrupted if the user physically lifts their finger off the screen. Tip: Tip: If you don’t care whether the user’s finger wiggles or moves around during the long press, you can increase this value significantly or simply set it to .infinity . This ensures the action will only be interrupted if the user physically lifts their finger off the screen. 3. DragGesture The DragGesture provides a highly interactive way to move views around the screen. Let's break down the key parameters and modifiers used in this example: DragGesture minimumDistance: This defines exactly how far (in points) the user's finger must move before the gesture is officially recognized as a drag. Setting it to 10 means the drag action won't trigger until the finger moves at least 10 points. This is incredibly useful for preventing accidental drags when the user simply intended to tap the screen. coordinateSpace: Just like with other gestures, this determines the reference frame for the drag's coordinate values. Using .global calculates the movement relative to the entire screen, while .local calculates it relative to the view itself. The .onChanged closure: This block executes continuously as the user drags their finger. It provides a value (of type DragGesture.Value), which contains real-time data about the drag. In our code, we use value.translation (the total distance moved from the start of the drag) to update the circle's offset, making the view perfectly follow the user's finger. The .onEnded closure: This triggers the exact moment the user lifts their finger off the screen, successfully ending the gesture. It's the perfect place to reset states or finalize actions. Here, we use withAnimation(.spring()) to smoothly snap the circle back to its original starting point (offset = .zero). minimumDistance: This defines exactly how far (in points) the user's finger must move before the gesture is officially recognized as a drag. Setting it to 10 means the drag action won't trigger until the finger moves at least 10 points. This is incredibly useful for preventing accidental drags when the user simply intended to tap the screen. minimumDistance 10 coordinateSpace: Just like with other gestures, this determines the reference frame for the drag's coordinate values. Using .global calculates the movement relative to the entire screen, while .local calculates it relative to the view itself. coordinateSpace .global .local The .onChanged closure: This block executes continuously as the user drags their finger. It provides a value (of type DragGesture.Value), which contains real-time data about the drag. In our code, we use value.translation (the total distance moved from the start of the drag) to update the circle's offset, making the view perfectly follow the user's finger. The .onChanged closure value DragGesture.Value value.translation offset The .onEnded closure: This triggers the exact moment the user lifts their finger off the screen, successfully ending the gesture. It's the perfect place to reset states or finalize actions. Here, we use withAnimation(.spring()) to smoothly snap the circle back to its original starting point (offset = .zero). The .onEnded closure withAnimation(.spring()) offset = .zero struct DragGestureView: View { @State private var offset = CGSize.zero var body: some View { Circle() .fill(Color.orange) .frame(width: 100, height: 100) .offset(offset) .gesture( DragGesture(minimumDistance: 10, coordinateSpace: .global) .onChanged { value in offset = value.translation } .onEnded { _ in withAnimation(.spring()) { offset = .zero } } ) } } struct DragGestureView: View { @State private var offset = CGSize.zero var body: some View { Circle() .fill(Color.orange) .frame(width: 100, height: 100) .offset(offset) .gesture( DragGesture(minimumDistance: 10, coordinateSpace: .global) .onChanged { value in offset = value.translation } .onEnded { _ in withAnimation(.spring()) { offset = .zero } } ) } } struct DragGestureView: View { @GestureState private var dragOffset = CGSize.zero var body: some View { Circle() .fill(Color.orange) .frame(width: 100, height: 100) .offset(dragOffset) .gesture( DragGesture(minimumDistance: 0) .updating($dragOffset, body: { value, state, transaction in state = value.translation transaction.animation = .interactiveSpring() }) ) } } struct DragGestureView: View { @GestureState private var dragOffset = CGSize.zero var body: some View { Circle() .fill(Color.orange) .frame(width: 100, height: 100) .offset(dragOffset) .gesture( DragGesture(minimumDistance: 0) .updating($dragOffset, body: { value, state, transaction in state = value.translation transaction.animation = .interactiveSpring() }) ) } } In this advanced example, we take full control of the drag interaction by deeply integrating with the .updating modifier. By setting minimumDistance: 0, the gesture responds the exact millisecond the user touches the view. .updating minimumDistance: 0 But the real magic happens inside the closure. Let’s break down the three powerful parameters injected into this block: value, state, and transaction. value state transaction 1. value (Type: DragGesture.Value) value DragGesture.Value This represents the live, real-time data of the gesture at any given frame. It contains several incredibly useful properties: translation: The total distance (CGSize) the finger has moved since the gesture started. We use this to calculate how far our circle should move. location: The exact current coordinate (CGPoint) of the user's finger. startLocation: The coordinate (CGPoint) where the initial touch occurred. velocity: The current speed and direction (CGSize) of the drag. This is extremely valuable if you want to implement "flick" gestures (like swiping away a card) where the view continues moving based on how fast the user swiped. translation: The total distance (CGSize) the finger has moved since the gesture started. We use this to calculate how far our circle should move. translation CGSize location: The exact current coordinate (CGPoint) of the user's finger. location CGPoint startLocation: The coordinate (CGPoint) where the initial touch occurred. startLocation CGPoint velocity: The current speed and direction (CGSize) of the drag. This is extremely valuable if you want to implement "flick" gestures (like swiping away a card) where the view continues moving based on how fast the user swiped. velocity CGSize 2. state (Type: inout CGSize) state inout CGSize This parameter is an inout reference directly tied to your @GestureState variable (in our case, dragOffset). inout @GestureState dragOffset How it works: It doesn’t have custom attributes; instead, it matches the exact type of your @GestureState. By assigning a new value to it (state = value.translation), you are telling SwiftUI: "Update the state, which should instantly trigger a view redraw with the new offset." * The benefit: Remember, because it's tied to @GestureState, the moment the user lifts their finger, SwiftUI automatically resets this state back to its initial value (.zero). How it works: It doesn’t have custom attributes; instead, it matches the exact type of your @GestureState. By assigning a new value to it (state = value.translation), you are telling SwiftUI: "Update the state, which should instantly trigger a view redraw with the new offset." * The benefit: Remember, because it's tied to @GestureState, the moment the user lifts their finger, SwiftUI automatically resets this state back to its initial value (.zero). How it works @GestureState state = value.translation "Update the state, which should instantly trigger a view redraw with the new offset." The benefit @GestureState state .zero 3. transaction (Type: inout Transaction) transaction inout Transaction This is the hidden gem of SwiftUI state management. A Transaction is the context that carries all the animation information for the current state update. Transaction transaction.animation: By injecting an animation directly into the transaction (transaction.animation = .interactiveSpring()), we are specifically animating this exact state change. An interactive spring is perfectly tuned for user-driven gestures because it starts quickly and responds fluidly. transaction.disablesAnimations: A boolean flag. If you set this to true, SwiftUI will aggressively suppress any animations that might otherwise occur during this state update. transaction.isContinuous: A boolean indicating whether the state update is part of an ongoing, continuous interaction (like dragging a slider) rather than a single discrete event. transaction.animation: By injecting an animation directly into the transaction (transaction.animation = .interactiveSpring()), we are specifically animating this exact state change. An interactive spring is perfectly tuned for user-driven gestures because it starts quickly and responds fluidly. transaction.animation transaction.animation = .interactiveSpring() this exact state change transaction.disablesAnimations: A boolean flag. If you set this to true, SwiftUI will aggressively suppress any animations that might otherwise occur during this state update. transaction.disablesAnimations true transaction.isContinuous: A boolean indicating whether the state update is part of an ongoing, continuous interaction (like dragging a slider) rather than a single discrete event. transaction.isContinuous By mutating the transaction directly inside the gesture, we ensure that both the drag movement and the automatic "snap back" to .zero (when the gesture ends) are beautifully animated with a fluid spring effect, all in a few lines of code. transaction .zero 4. MagnifyGesture If you want to allow users to zoom in and out of content (like photos or maps), MagnifyGesture is exactly what you need. It perfectly tracks standard two-finger pinch interactions. MagnifyGesture Just like with the DragGesture, using @GestureState is the most elegant approach here. Because the default magnification value is 1.0 (100% scale), the image will automatically spring back to its original size the moment the user lifts their fingers. DragGesture @GestureState magnification 1.0 Exploring MagnifyGesture.Value Properties When you use the .updating or .onChanged modifiers with this gesture, the value parameter provides a wealth of data about the ongoing pinch. Let's look at the properties available to you: Exploring MagnifyGesture.Value Properties .updating .onChanged value magnification (CGFloat): This is the core property. It represents the total scale factor of the pinch. It starts at 1.0. If the user spreads their fingers apart, it grows (e.g., 1.5 for 150% zoom). If they pinch them together, it shrinks (e.g., 0.5 for 50% zoom). velocity (CGFloat): This tells you how fast the user is pinching or spreading their fingers. You can use this to create custom physics-based animations (for example, if the user zooms out extremely fast, you could use that velocity to close the view entirely). location (CGPoint): This is the current center point (the centroid) between the user's two fingers. If you want the image to scale exactly from the point where the user is pinching (rather than just the center of the image), you can combine this property with the .scaleEffect(anchor:) modifier. startLocation (CGPoint): The initial center point between the two fingers when the gesture first began. magnification (CGFloat): This is the core property. It represents the total scale factor of the pinch. It starts at 1.0. If the user spreads their fingers apart, it grows (e.g., 1.5 for 150% zoom). If they pinch them together, it shrinks (e.g., 0.5 for 50% zoom). magnification (CGFloat): 1.0 1.5 0.5 velocity (CGFloat): This tells you how fast the user is pinching or spreading their fingers. You can use this to create custom physics-based animations (for example, if the user zooms out extremely fast, you could use that velocity to close the view entirely). velocity (CGFloat): location (CGPoint): This is the current center point (the centroid) between the user's two fingers. If you want the image to scale exactly from the point where the user is pinching (rather than just the center of the image), you can combine this property with the .scaleEffect(anchor:) modifier. location (CGPoint): .scaleEffect(anchor:) startLocation (CGPoint): The initial center point between the two fingers when the gesture first began. startLocation (CGPoint): struct MagnificationGesture: View { @GestureState private var magnification: CGFloat = 1 var body: some View { Image("BeatifulImg") .resizable() .frame(width: 400, height: 400) .scaleEffect(magnification) .gesture ( MagnifyGesture() .updating($magnification, body: { value, state, transaction in state = value.magnification }) ) } } struct MagnificationGesture: View { @GestureState private var magnification: CGFloat = 1 var body: some View { Image("BeatifulImg") .resizable() .frame(width: 400, height: 400) .scaleEffect(magnification) .gesture ( MagnifyGesture() .updating($magnification, body: { value, state, transaction in state = value.magnification }) ) } } Watch the short video with example https://youtube.com/shorts/0UVbAkJmNdA https://youtube.com/shorts/0UVbAkJmNdA https://youtube.com/shorts/0UVbAkJmNdA 5. RotationGesture While @GestureState is perfect for interactions that snap back to their original position (like our previous Magnify and Drag examples), sometimes we want the view to stay exactly where the user left it. To achieve this persistent state with a RotationGesture, we need a different approach using two @State properties. @GestureState RotationGesture @State How RotationGesture Works The RotationGesture tracks the circular movement of two fingers across the screen. Unlike other gestures that return complex value objects, the value provided by RotationGesture in its closures is simply an Angle struct. This Angle represents the degree (or radian) of rotation relative to the starting position of the fingers. How RotationGesture Works RotationGesture RotationGesture Angle Angle Why do we need two @State variables? If we only used one @State variable to track the angle, the rectangle would forcefully snap back to 0 degrees the next time the user touches the screen to rotate it again, because the gesture's angle always starts from zero at the beginning of a new touch. Why do we need two @State variables? @State 0 To solve this, we split the responsibility: currentAngle: This handles the transient state. Inside the .onChanged closure, it continuously updates with the real-time angle of the user's fingers. finalAngle: This handles the persistent state. Inside the .onEnded closure, we take the final result of currentAngle and add it (+=) to finalAngle. currentAngle: This handles the transient state. Inside the .onChanged closure, it continuously updates with the real-time angle of the user's fingers. currentAngle transient .onChanged finalAngle: This handles the persistent state. Inside the .onEnded closure, we take the final result of currentAngle and add it (+=) to finalAngle. finalAngle persistent .onEnded currentAngle += finalAngle Finally, the most crucial step happens in .onEnded: we reset currentAngle back to .zero. Because our .rotationEffect combines both properties (currentAngle + finalAngle), the visual rotation remains perfectly seamless, and the view is instantly ready for the next rotation gesture without any jarring jumps. .onEnded currentAngle .zero .rotationEffect currentAngle + finalAngle struct RotationGestureExample: View { // Tracks the rotation only while the gesture is actively happening @State private var currentAngle = Angle.zero // Stores the accumulated rotation after the gesture ends @State private var finalAngle = Angle.zero var body: some View { Rectangle() .fill(Color.yellow) .frame(width: 150, height: 150) // Combine both angles to get the actual visible rotation .rotationEffect(currentAngle + finalAngle) .gesture( RotationGesture() .onChanged { angle in currentAngle = angle } .onEnded { angle in finalAngle += angle currentAngle = .zero } ) } } struct RotationGestureExample: View { // Tracks the rotation only while the gesture is actively happening @State private var currentAngle = Angle.zero // Stores the accumulated rotation after the gesture ends @State private var finalAngle = Angle.zero var body: some View { Rectangle() .fill(Color.yellow) .frame(width: 150, height: 150) // Combine both angles to get the actual visible rotation .rotationEffect(currentAngle + finalAngle) .gesture( RotationGesture() .onChanged { angle in currentAngle = angle } .onEnded { angle in finalAngle += angle currentAngle = .zero } ) } } Hands-On: Working with Composed Gestures Understanding the theory of composition is great, but how do we actually extract the data from these combined gestures? Let’s look at practical examples for each method. 1. Using .map to Clean Up State .map Here, we map a complex DragGesture into a simple, custom SwipeDirection enum. This keeps our view logic clean and decoupled from raw math. DragGesture SwipeDirection enum SwipeDirection: String { case left, right, up, down, none } struct MapGestureExample: View { @State private var direction: SwipeDirection = .none var body: some View { Text("Swiped: \(direction.rawValue.capitalized)") .font(.title) .padding() .background(Color.blue.opacity(0.2)) .cornerRadius(10) .gesture( DragGesture(minimumDistance: 20) .map { value -> SwipeDirection in // Transform the raw CGSize into our custom Enum if abs(value.translation.width) > abs(value.translation.height) { return value.translation.width < 0 ? .left : .right } else { return value.translation.height < 0 ? .up : .down } } .onEnded { mappedDirection in // We receive our clean Enum here, not the DragGesture.Value! self.direction = mappedDirection } ) } } enum SwipeDirection: String { case left, right, up, down, none } struct MapGestureExample: View { @State private var direction: SwipeDirection = .none var body: some View { Text("Swiped: \(direction.rawValue.capitalized)") .font(.title) .padding() .background(Color.blue.opacity(0.2)) .cornerRadius(10) .gesture( DragGesture(minimumDistance: 20) .map { value -> SwipeDirection in // Transform the raw CGSize into our custom Enum if abs(value.translation.width) > abs(value.translation.height) { return value.translation.width < 0 ? .left : .right } else { return value.translation.height < 0 ? .up : .down } } .onEnded { mappedDirection in // We receive our clean Enum here, not the DragGesture.Value! self.direction = mappedDirection } ) } } 2. Handling .simultaneously(with:) Values .simultaneously(with:) When you combine two gestures simultaneously, the resulting value is a specialized struct containing .first and .second properties. Because the user might start one gesture slightly before the other (e.g., placing one finger down before the second for a pinch), both properties are Optionals. value .first .second both properties are Optionals struct SimultaneousGestureExample: View { @State private var scale: CGFloat = 1.0 @State private var angle: Angle = .zero var body: some View { Rectangle() .fill(Color.purple) .frame(width: 200, height: 200) .scaleEffect(scale) .rotationEffect(angle) .gesture( MagnifyGesture() .simultaneously(with: RotationGesture()) .onChanged { value in // Safely unwrap the first gesture's value (Magnify) if let magnifyValue = value.first { scale = magnifyValue.magnification } // Safely unwrap the second gesture's value (Rotation) if let rotationValue = value.second { angle = rotationValue } } ) } } struct SimultaneousGestureExample: View { @State private var scale: CGFloat = 1.0 @State private var angle: Angle = .zero var body: some View { Rectangle() .fill(Color.purple) .frame(width: 200, height: 200) .scaleEffect(scale) .rotationEffect(angle) .gesture( MagnifyGesture() .simultaneously(with: RotationGesture()) .onChanged { value in // Safely unwrap the first gesture's value (Magnify) if let magnifyValue = value.first { scale = magnifyValue.magnification } // Safely unwrap the second gesture's value (Rotation) if let rotationValue = value.second { angle = rotationValue } } ) } } 3. Unpacking the .sequenced(before:) Enum .sequenced(before:) A sequenced gesture returns a SequenceGesture.Value, which is an enum representing a state machine. You must use a switch statement to handle its two primary cases: .first (the first gesture is active) and .second (the first gesture completed, and the second is now active or pending). SequenceGesture.Value enum switch .first .second struct SequencedGestureExample: View { @State private var isLongPressed = false @State private var offset = CGSize.zero var body: some View { Circle() .fill(isLongPressed ? Color.red : Color.blue) .frame(width: 100, height: 100) .offset(offset) .gesture( LongPressGesture(minimumDuration: 0.5) .sequenced(before: DragGesture()) .onChanged { value in // Switch on the Enum to determine our current state switch value { case .first(let isPressing): // State 1: Long press is in progress print("Waiting for long press...") case .second(let pressCompleted, let dragValue): // State 2: Long press finished, drag can begin if pressCompleted { withAnimation { isLongPressed = true } } // Safely unwrap the drag value, as the drag might not have started yet if let drag = dragValue { offset = drag.translation } } } .onEnded { _ in // Reset everything when the user lifts their finger withAnimation { isLongPressed = false offset = .zero } } ) } } struct SequencedGestureExample: View { @State private var isLongPressed = false @State private var offset = CGSize.zero var body: some View { Circle() .fill(isLongPressed ? Color.red : Color.blue) .frame(width: 100, height: 100) .offset(offset) .gesture( LongPressGesture(minimumDuration: 0.5) .sequenced(before: DragGesture()) .onChanged { value in // Switch on the Enum to determine our current state switch value { case .first(let isPressing): // State 1: Long press is in progress print("Waiting for long press...") case .second(let pressCompleted, let dragValue): // State 2: Long press finished, drag can begin if pressCompleted { withAnimation { isLongPressed = true } } // Safely unwrap the drag value, as the drag might not have started yet if let drag = dragValue { offset = drag.translation } } } .onEnded { _ in // Reset everything when the user lifts their finger withAnimation { isLongPressed = false offset = .zero } } ) } } Conclusion Mastering gestures in SwiftUI is like unlocking a superpower for your UI/UX design. We’ve covered a massive amount of ground today — from foundational taps to advanced state management with @GestureState and Transaction, all the way to building complex state machines with sequenced gestures. @GestureState Transaction The secret to getting comfortable with these tools is experimentation. I highly encourage you to take the code snippets from this article, drop them into a fresh SwiftUI project, and start tweaking the parameters. Change the minimumDistance, play with different .interactiveSpring() animations in the transaction, and try combining gestures in creative ways. The more you experiment, the more natural it will feel. minimumDistance .interactiveSpring() If you found this deep dive helpful, please give it a few claps 👏, save it for your next project, and follow me for more advanced iOS development insights. Have any questions or cool gesture tricks of your own? Drop them in the comments below! Happy coding!
