You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit a3acc5a
Browse filesBrowse the repository at this point in the historyBrowse files
## Description
Documents `onHoverIn`/`onHoverOut` on the `Touchable` page, together
with the behaviour that isn't obvious from the signature: how the two
pair up, what `disabled` does to an open hover, which platforms report
the crossings during a press, tvOS driving hover from focus, and hover
state not surviving an unmount or a detach.
Also refreshes the press callbacks on the same page, which still
described the pre-#4342/#4343 signature. `onPress`, `onPressIn` and
`onPressOut` take a `ButtonEvent` rather than a
`GestureEvent<NativeHandlerData>`, and `onLongPress` takes an event at
all — the old snippets additionally listed a `handlerTag` field that
`ButtonEvent` does not carry, and omitted `x`/`y`/`absoluteX`/`absoluteY`.
Leaving them alone would have put contradictory signatures directly
above the new hover blocks.
## Test plan
`yarn start` in `packages/docs-gesture-handler`.
@@ -449,12 +458,102 @@ Triggered when the button gets pressed (analogous to `onPress` in `Pressable` fr
449
458
450
459
### onLongPress
451
460
452
-
```ts
453
-
onLongPress?: () =>void;
454
-
```
461
+
<CollapsibleCode
462
+
label="Show composed types definitions"
463
+
expandedLabel="Hide composed types definitions"
464
+
lineBounds={[0, 1]}
465
+
src={`
466
+
onLongPress?: (e: ButtonEvent) => void;
467
+
468
+
type ButtonEvent = {
469
+
pointerInside: boolean;
470
+
x: number;
471
+
y: number;
472
+
absoluteX: number;
473
+
absoluteY: number;
474
+
numberOfPointers: number;
475
+
pointerType: PointerType;
476
+
}
477
+
478
+
enum PointerType {
479
+
TOUCH,
480
+
STYLUS,
481
+
MOUSE,
482
+
KEY,
483
+
OTHER,
484
+
}
485
+
`}/>
455
486
456
487
Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds.
457
488
489
+
### onHoverIn
490
+
491
+
<CollapsibleCode
492
+
label="Show composed types definitions"
493
+
expandedLabel="Hide composed types definitions"
494
+
lineBounds={[0, 1]}
495
+
src={`
496
+
onHoverIn?: (e: ButtonEvent) => void;
497
+
498
+
type ButtonEvent = {
499
+
pointerInside: boolean;
500
+
x: number;
501
+
y: number;
502
+
absoluteX: number;
503
+
absoluteY: number;
504
+
numberOfPointers: number;
505
+
pointerType: PointerType;
506
+
}
507
+
508
+
enum PointerType {
509
+
TOUCH,
510
+
STYLUS,
511
+
MOUSE,
512
+
KEY,
513
+
OTHER,
514
+
}
515
+
`}/>
516
+
517
+
Triggered when a non-touch pointer — a mouse, a trackpad cursor, or a hovering stylus — moves over the button (analogous to `onHoverIn` in `Pressable` from RN core). Touch pointers never report hover.
518
+
519
+
### onHoverOut
520
+
521
+
<CollapsibleCode
522
+
label="Show composed types definitions"
523
+
expandedLabel="Hide composed types definitions"
524
+
lineBounds={[0, 1]}
525
+
src={`
526
+
onHoverOut?: (e: ButtonEvent) => void;
527
+
528
+
type ButtonEvent = {
529
+
pointerInside: boolean;
530
+
x: number;
531
+
y: number;
532
+
absoluteX: number;
533
+
absoluteY: number;
534
+
numberOfPointers: number;
535
+
pointerType: PointerType;
536
+
}
537
+
538
+
enum PointerType {
539
+
TOUCH,
540
+
STYLUS,
541
+
MOUSE,
542
+
KEY,
543
+
OTHER,
544
+
}
545
+
`}/>
546
+
547
+
Triggered when the hovering pointer leaves the button (analogous to `onHoverOut` in `Pressable` from RN core).
548
+
549
+
The two callbacks are paired — an `onHoverIn` is followed by exactly one `onHoverOut` once the pointer leaves. Because hover is only reported while the button is not `disabled`, disabling a hovered button reports `onHoverOut`, and re-enabling it while the pointer is still inside reports `onHoverIn` again.
550
+
551
+
On Android, iOS, and macOS the crossings are reported during a press as well: dragging a held pointer off the button and back on reports `onHoverOut` and `onHoverIn`, provided a hover was already open when the press started — which for a stylus needs hardware that reports stylus hover at all. On web nothing is reported while a stylus is in contact, because the browser captures the pointer for the duration of the press.
552
+
553
+
On tvOS hover follows focus rather than a pointer. Focusing the button reports `onHoverIn` and moving focus away reports `onHoverOut`, with the event describing the center of the button and a `pointerType` of `OTHER`.
554
+
555
+
Unmounting a hovered component does not report `onHoverOut` — the callback goes away with the component. On Android, iOS, and macOS the hover state is also not carried across a detach: if the component moves in the tree while hovered and lands away from the pointer, the pending `onHoverOut` is not delivered, and the next hover over it is treated as a continuation rather than a new `onHoverIn`, resynchronizing on the following `onHoverOut`. On web the component is rebuilt instead, so the next hover reports a fresh `onHoverIn`. Use these callbacks to drive presentation, not to hold state that has to be unwound.
0 commit comments