Skip to content

Commit 738b03e

Browse files
committed
[Docs] Document Touchable hover callbacks
## 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`.
1 parent 110fe61 commit 738b03e

1 file changed

Lines changed: 68 additions & 0 deletions

File tree

‎packages/docs-gesture-handler/docs/components/touchable.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,74 @@ onLongPress?: () => void;
455455

456456
Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds.
457457

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.
525+
458526

459527
### delayLongPress
460528

0 commit comments

Comments
 (0)