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 738b03e
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.
## Test plan
`yarn start` in `packages/docs-gesture-handler`.
Copy file name to clipboardExpand all lines: packages/docs-gesture-handler/docs/components/touchable.mdx
+68Lines changed: 68 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -455,6 +455,74 @@ onLongPress?: () => void;
455
455
456
456
Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds.
457
457
458
+
### onHoverIn
459
+
460
+
<CollapsibleCode
461
+
label="Show composed types definitions"
462
+
expandedLabel="Hide composed types definitions"
463
+
lineBounds={[0, 1]}
464
+
src={`
465
+
onHoverIn?: (e: ButtonEvent) => void;
466
+
467
+
type ButtonEvent = {
468
+
pointerInside: boolean;
469
+
x: number;
470
+
y: number;
471
+
absoluteX: number;
472
+
absoluteY: number;
473
+
numberOfPointers: number;
474
+
pointerType: PointerType;
475
+
}
476
+
477
+
enum PointerType {
478
+
TOUCH,
479
+
STYLUS,
480
+
MOUSE,
481
+
KEY,
482
+
OTHER,
483
+
}
484
+
`}/>
485
+
486
+
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.
487
+
488
+
### onHoverOut
489
+
490
+
<CollapsibleCode
491
+
label="Show composed types definitions"
492
+
expandedLabel="Hide composed types definitions"
493
+
lineBounds={[0, 1]}
494
+
src={`
495
+
onHoverOut?: (e: ButtonEvent) => void;
496
+
497
+
type ButtonEvent = {
498
+
pointerInside: boolean;
499
+
x: number;
500
+
y: number;
501
+
absoluteX: number;
502
+
absoluteY: number;
503
+
numberOfPointers: number;
504
+
pointerType: PointerType;
505
+
}
506
+
507
+
enum PointerType {
508
+
TOUCH,
509
+
STYLUS,
510
+
MOUSE,
511
+
KEY,
512
+
OTHER,
513
+
}
514
+
`}/>
515
+
516
+
Triggered when the hovering pointer leaves the button (analogous to `onHoverOut` in `Pressable` from RN core).
517
+
518
+
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.
519
+
520
+
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.
521
+
522
+
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`.
523
+
524
+
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