Repository navigation
Commit 7c6aa7b
committed
[Android] Add hover callbacks to Touchable
## Description
`Touchable` gains `onHoverIn`/`onHoverOut`, reported for a mouse,
trackpad cursor or hovering stylus. The button already tracked hover to
drive its animation — this exposes it to JS as the new
`onButtonHoverIn`/`onButtonHoverOut` direct events, omitted from
`RawButtonProps` since the deprecated buttons never report hover.
- Reporting follows `isHovered && isEnabled`, the same expression that
drives the hover visual, so disabling a hovered button reports a
hover-out and re-enabling it with the pointer still inside reports a
hover-in.
- No hover events arrive while the button is held, so the transitions
are derived from the touch stream during a press — gated so a press can
only maintain a hover that was already open, never open one. The pointer
type carries over from the previous sample, since those events belong to
the pressing pointer.
- The payload is snapshotted when the pointer is seen, because the
events outlive the `MotionEvent` behind them.
## Test plan
`yarn test` covers the prop forwarding; hover itself needs a device or
emulator with a mouse, trackpad or stylus.
<details>
<summary>Example code</summary>
```tsx
import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import {
GestureHandlerRootView,
Touchable,
} from 'react-native-gesture-handler';
export default function Example() {
const [log, setLog] = useState<string[]>([]);
const callbacks = (source: string) => ({
onHoverIn: () => setLog((l) => [`${source} onHoverIn`, ...l]),
onHoverOut: () => setLog((l) => [`${source} onHoverOut`, ...l]),
onPressIn: () => setLog((l) => [`${source} onPressIn`, ...l]),
onPressOut: () => setLog((l) => [`${source} onPressOut`, ...l]),
});
return (
<GestureHandlerRootView style={styles.container}>
<View style={styles.row}>
<Touchable style={styles.box} {...callbacks('Touchable')}>
<Text style={styles.text}>Touchable</Text>
</Touchable>
<Pressable style={styles.box} {...callbacks('Pressable')}>
<Text style={styles.text}>Pressable</Text>
</Pressable>
</View>
{log.slice(0, 12).map((entry, i) => (
<Text key={i}>{entry}</Text>
))}
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 24 },
row: { flexDirection: 'row', gap: 24, marginBottom: 24 },
box: {
width: 120,
height: 120,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#6941C6',
},
text: { color: 'white' },
});
```
</details>1 parent 41d8392 commit 7c6aa7b
10 files changed
Lines changed: 303 additions & 41 deletions
File tree
- packages/react-native-gesture-handler
- android/src/main/java/com/swmansion/gesturehandler
- core
- react
- events
- src
- __tests__
- components
- specs
- v3/components
- Touchable
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
3 | | - | |
4 | 3 | | |
5 | | - | |
6 | 4 | | |
7 | 5 | | |
8 | 6 | | |
9 | 7 | | |
10 | 8 | | |
11 | 9 | | |
12 | | - | |
13 | 10 | | |
14 | 11 | | |
15 | 12 | | |
| |||
20 | 17 | | |
21 | 18 | | |
22 | 19 | | |
| 20 | + | |
| 21 | + | |
23 | 22 | | |
24 | 23 | | |
25 | 24 | | |
| |||
219 | 218 | | |
220 | 219 | | |
221 | 220 | | |
222 | | - | |
| 221 | + | |
223 | 222 | | |
224 | 223 | | |
225 | 224 | | |
| |||
232 | 231 | | |
233 | 232 | | |
234 | 233 | | |
235 | | - | |
236 | | - | |
237 | | - | |
238 | | - | |
239 | | - | |
240 | | - | |
241 | | - | |
242 | 234 | | |
243 | 235 | | |
244 | 236 | | |
| |||
899 | 891 | | |
900 | 892 | | |
901 | 893 | | |
902 | | - | |
903 | | - | |
904 | | - | |
905 | | - | |
906 | | - | |
907 | | - | |
908 | | - | |
909 | | - | |
| 894 | + | |
910 | 895 | | |
911 | 896 | | |
912 | 897 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
| 3 | + | |
3 | 4 | | |
| 5 | + | |
4 | 6 | | |
5 | 7 | | |
6 | 8 | | |
7 | 9 | | |
8 | 10 | | |
| 11 | + | |
9 | 12 | | |
10 | 13 | | |
11 | 14 | | |
12 | 15 | | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
13 | 25 | | |
14 | 26 | | |
15 | 27 | | |
| |||
20 | 32 | | |
21 | 33 | | |
22 | 34 | | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
| 40 | + | |
| 41 | + | |
| 42 | + | |
| 43 | + | |
23 | 44 | | |
24 | 45 | | |
25 | 46 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
79 | 79 | | |
80 | 80 | | |
81 | 81 | | |
| 82 | + | |
82 | 83 | | |
83 | 84 | | |
84 | 85 | | |
| |||
613 | 614 | | |
614 | 615 | | |
615 | 616 | | |
616 | | - | |
| 617 | + | |
617 | 618 | | |
618 | 619 | | |
619 | | - | |
| 620 | + | |
| 621 | + | |
| 622 | + | |
620 | 623 | | |
621 | | - | |
622 | | - | |
623 | | - | |
| 624 | + | |
| 625 | + | |
| 626 | + | |
| 627 | + | |
| 628 | + | |
| 629 | + | |
| 630 | + | |
| 631 | + | |
| 632 | + | |
| 633 | + | |
| 634 | + | |
| 635 | + | |
| 636 | + | |
624 | 637 | | |
625 | 638 | | |
626 | 639 | | |
| |||
858 | 871 | | |
859 | 872 | | |
860 | 873 | | |
861 | | - | |
862 | | - | |
| 874 | + | |
863 | 875 | | |
864 | 876 | | |
865 | 877 | | |
866 | 878 | | |
867 | 879 | | |
868 | | - | |
| 880 | + | |
869 | 881 | | |
870 | | - | |
| 882 | + | |
| 883 | + | |
| 884 | + | |
| 885 | + | |
| 886 | + | |
| 887 | + | |
| 888 | + | |
| 889 | + | |
| 890 | + | |
| 891 | + | |
| 892 | + | |
| 893 | + | |
| 894 | + | |
| 895 | + | |
| 896 | + | |
| 897 | + | |
| 898 | + | |
| 899 | + | |
| 900 | + | |
| 901 | + | |
| 902 | + | |
| 903 | + | |
| 904 | + | |
871 | 905 | | |
872 | | - | |
| 906 | + | |
| 907 | + | |
| 908 | + | |
873 | 909 | | |
874 | 910 | | |
875 | 911 | | |
| |||
904 | 940 | | |
905 | 941 | | |
906 | 942 | | |
907 | | - | |
908 | | - | |
| 943 | + | |
| 944 | + | |
909 | 945 | | |
910 | 946 | | |
911 | 947 | | |
| |||
1000 | 1036 | | |
1001 | 1037 | | |
1002 | 1038 | | |
1003 | | - | |
| 1039 | + | |
1004 | 1040 | | |
1005 | 1041 | | |
1006 | 1042 | | |
1007 | 1043 | | |
1008 | 1044 | | |
1009 | 1045 | | |
1010 | | - | |
| 1046 | + | |
1011 | 1047 | | |
1012 | 1048 | | |
1013 | 1049 | | |
1014 | 1050 | | |
1015 | 1051 | | |
1016 | 1052 | | |
1017 | 1053 | | |
| 1054 | + | |
| 1055 | + | |
| 1056 | + | |
| 1057 | + | |
1018 | 1058 | | |
1019 | 1059 | | |
1020 | 1060 | | |
1021 | | - | |
| 1061 | + | |
1022 | 1062 | | |
1023 | 1063 | | |
| 1064 | + | |
| 1065 | + | |
| 1066 | + | |
| 1067 | + | |
| 1068 | + | |
1024 | 1069 | | |
1025 | 1070 | | |
1026 | 1071 | | |
1027 | 1072 | | |
1028 | 1073 | | |
1029 | 1074 | | |
1030 | 1075 | | |
| 1076 | + | |
| 1077 | + | |
| 1078 | + | |
1031 | 1079 | | |
1032 | 1080 | | |
1033 | 1081 | | |
| 1082 | + | |
| 1083 | + | |
1034 | 1084 | | |
1035 | 1085 | | |
1036 | 1086 | | |
| |||
1043 | 1093 | | |
1044 | 1094 | | |
1045 | 1095 | | |
| 1096 | + | |
| 1097 | + | |
| 1098 | + | |
| 1099 | + | |
| 1100 | + | |
| 1101 | + | |
| 1102 | + | |
| 1103 | + | |
| 1104 | + | |
| 1105 | + | |
| 1106 | + | |
| 1107 | + | |
| 1108 | + | |
| 1109 | + | |
| 1110 | + | |
| 1111 | + | |
| 1112 | + | |
| 1113 | + | |
| 1114 | + | |
| 1115 | + | |
| 1116 | + | |
| 1117 | + | |
| 1118 | + | |
| 1119 | + | |
| 1120 | + | |
| 1121 | + | |
| 1122 | + | |
| 1123 | + | |
| 1124 | + | |
| 1125 | + | |
| 1126 | + | |
| 1127 | + | |
| 1128 | + | |
| 1129 | + | |
| 1130 | + | |
| 1131 | + | |
| 1132 | + | |
| 1133 | + | |
| 1134 | + | |
| 1135 | + | |
| 1136 | + | |
| 1137 | + | |
| 1138 | + | |
| 1139 | + | |
| 1140 | + | |
| 1141 | + | |
| 1142 | + | |
| 1143 | + | |
| 1144 | + | |
| 1145 | + | |
| 1146 | + | |
| 1147 | + | |
| 1148 | + | |
| 1149 | + | |
| 1150 | + | |
| 1151 | + | |
| 1152 | + | |
| 1153 | + | |
| 1154 | + | |
| 1155 | + | |
| 1156 | + | |
| 1157 | + | |
| 1158 | + | |
| 1159 | + | |
| 1160 | + | |
| 1161 | + | |
| 1162 | + | |
| 1163 | + | |
| 1164 | + | |
| 1165 | + | |
| 1166 | + | |
| 1167 | + | |
| 1168 | + | |
| 1169 | + | |
| 1170 | + | |
1046 | 1171 | | |
1047 | 1172 | | |
1048 | 1173 | | |
| |||
1206 | 1331 | | |
1207 | 1332 | | |
1208 | 1333 | | |
| 1334 | + | |
| 1335 | + | |
| 1336 | + | |
1209 | 1337 | | |
1210 | 1338 | | |
1211 | 1339 | | |
| |||
1348 | 1476 | | |
1349 | 1477 | | |
1350 | 1478 | | |
| 1479 | + | |
| 1480 | + | |
1351 | 1481 | | |
1352 | 1482 | | |
1353 | 1483 | | |
| |||
1403 | 1533 | | |
1404 | 1534 | | |
1405 | 1535 | | |
| 1536 | + | |
| 1537 | + | |
| 1538 | + | |
| 1539 | + | |
| 1540 | + | |
| 1541 | + | |
| 1542 | + | |
| 1543 | + | |
| 1544 | + | |
| 1545 | + | |
| 1546 | + | |
| 1547 | + | |
| 1548 | + | |
| 1549 | + | |
| 1550 | + | |
1406 | 1551 | | |
1407 | 1552 | | |
1408 | 1553 | | |
1409 | 1554 | | |
1410 | 1555 | | |
| 1556 | + | |
| 1557 | + | |
1411 | 1558 | | |
1412 | 1559 | | |
1413 | 1560 | | |
| |||
0 commit comments