SIGN IN SIGN UP
facebook / react UNCLAIMED

The library for web and native user interfaces.

244272 0 0 JavaScript

Add Example of a SwipeRecognizer (#32422)

Stacked on #32412.

To effectively `useSwipeTransition` you need something to start and stop
the gesture as well as triggering an Action.

This adds an example Gesture Recognizer to the fixture. Instead of
having this built-in to React itself, instead the idea is to leave this
to various user space Component libraries. It can be done in different
ways for different use cases. It could use JS driven or native
ScrollTimeline or both.

This example uses a native scroll with scroll snapping to two edges. If
you swipe far enough to snap to the other edge, it triggers an Action at
the end.

This particular example uses a `position: sticky` to wrap the content of
the Gesture Recognizer. This means that it's inert by itself. It doesn't
scroll its content just like a plain JS recognizer using pointer events
would. This is useful because it means that scrolling doesn't affect
content before we start (the "scroll" event fires after scrolling has
already started) so we don't have to both trying to start it earlier. It
also means that scrolling doesn't affect the live content which can lead
to unexpected effects on the View Transition.

I find the inert recognizer the most useful pairing with
`useSwipeTransition` but it's not the only way to do it. E.g. you can
also have a scrollable surface that uses plain scrolling with snapping
and then just progressively enhances swiping between steps.
S
Sebastian Markbåge committed
27ba5e8b1fcb5724e653caf154dcf4f9519f08f1
Parent: 662957c
Committed by GitHub <[email protected]> on 2/21/2025, 4:27:05 PM