Skip to content

Commit 3c664a6

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. 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`.
1 parent 718880f commit 3c664a6

1 file changed

Lines changed: 105 additions & 15 deletions

File tree

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

Lines changed: 105 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -373,13 +373,16 @@ label="Show composed types definitions"
373373
expandedLabel="Hide composed types definitions"
374374
lineBounds={[0, 1]}
375375
src={`
376-
onPressIn?: (e: GestureEvent<NativeHandlerData>) => void;
376+
onPressIn?: (e: ButtonEvent) => void;
377377
378-
type GestureEvent<NativeHandlerData> = {
379-
handlerTag: number;
378+
type ButtonEvent = {
379+
pointerInside: boolean;
380+
x: number;
381+
y: number;
382+
absoluteX: number;
383+
absoluteY: number;
380384
numberOfPointers: number;
381385
pointerType: PointerType;
382-
pointerInside: boolean;
383386
}
384387
385388
enum PointerType {
@@ -400,13 +403,16 @@ label="Show composed types definitions"
400403
expandedLabel="Hide composed types definitions"
401404
lineBounds={[0, 1]}
402405
src={`
403-
onPressOut?: (e: GestureEvent<NativeHandlerData>) => void;
406+
onPressOut?: (e: ButtonEvent) => void;
404407
405-
type GestureEvent<NativeHandlerData> = {
406-
handlerTag: number;
408+
type ButtonEvent = {
409+
pointerInside: boolean;
410+
x: number;
411+
y: number;
412+
absoluteX: number;
413+
absoluteY: number;
407414
numberOfPointers: number;
408415
pointerType: PointerType;
409-
pointerInside: boolean;
410416
}
411417
412418
enum PointerType {
@@ -427,13 +433,16 @@ label="Show composed types definitions"
427433
expandedLabel="Hide composed types definitions"
428434
lineBounds={[0, 1]}
429435
src={`
430-
onPress?: (e: GestureEvent<NativeHandlerData>) => void;
436+
onPress?: (e: ButtonEvent) => void;
431437
432-
type GestureEvent<NativeHandlerData> = {
433-
handlerTag: number;
438+
type ButtonEvent = {
439+
pointerInside: boolean;
440+
x: number;
441+
y: number;
442+
absoluteX: number;
443+
absoluteY: number;
434444
numberOfPointers: number;
435445
pointerType: PointerType;
436-
pointerInside: boolean;
437446
}
438447
439448
enum PointerType {
@@ -449,12 +458,93 @@ Triggered when the button gets pressed (analogous to `onPress` in `Pressable` fr
449458

450459
### onLongPress
451460

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+
`}/>
455486

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

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).
458548

459549
### delayLongPress
460550

0 commit comments

Comments
 (0)