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
## Description
In this PR, I go through each section and make sure that everything is
in the same style, has correct information and there are no broken
links.
## Test plan
Read docs 🤓
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>
either children or a render function that receives a boolean reflecting whether
33
-
the component is currently pressed.
46
+
Either view styles or a function that receives a boolean reflecting whether the component is currently pressed and returns view styles.
34
47
35
-
### `style`
48
+
### onPress
36
49
37
-
either view styles or a function that receives a boolean reflecting whether
38
-
the component is currently pressed and returns view styles.
50
+
```ts
51
+
onPress?:null| ((event:PressableEvent) =>void);
52
+
```
39
53
40
-
### `onPress`
54
+
Called after [`onPressOut`](#onpressout) when a single tap gesture is detected. Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
41
55
42
-
called after `onPressOut` when a single tap gesture is detected.
56
+
### onPressIn
43
57
44
-
### `onPressIn`
58
+
```ts
59
+
onPressIn?:null| ((event:PressableEvent) =>void);
60
+
```
45
61
46
-
called before `onPress` when a touch is engaged.
62
+
Called before `onPress` when a touch is engaged. Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
Called before `onPress` when a touch is released (before [`onPress`](#onpress)). Details about the event object can be found in the [PressableEvent](#pressableevent) section below.
53
71
54
-
called immediately after pointer has been down for at least `delayLongPress` milliseconds (`500` ms by default).
72
+
### onLongPress
55
73
56
-
After `onLongPress` has been called, `onPressOut` will be called as soon as the pointer is lifted and `onPress` will not be called at all.
Called immediately after pointer has been down for at least [`delayLongPress`](#delaylongpress) milliseconds.
59
79
60
-
whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
80
+
After `onLongPress` has been called, [`onPressOut`](#onpressout) will be called as soon as the pointer is lifted and [`onPress`](#onpress) will not be called at all.
61
81
62
-
### `onHoverIn` (Web only)
82
+
### cancelable
63
83
64
-
called when pointer is hovering over the element.
84
+
```ts
85
+
cancelable?:null|boolean;
86
+
```
65
87
66
-
### `onHoverOut` (Web only)
88
+
Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
67
89
68
-
called when pointer stops hovering over the element.
90
+
### onHoverIn (Web only)
69
91
70
-
### `delayHoverIn` (Web only)
92
+
```ts
93
+
onHoverIn?:null| ((event:PressableEvent) =>void);
94
+
```
71
95
72
-
duration to wait after hover in before calling `onHoverIn`.
96
+
Called when pointer is hovering over the element.
73
97
74
-
### `delayHoverOut` (Web only)
98
+
### onHoverOut (Web only)
75
99
76
-
duration to wait after hover out before calling `onHoverOut`.
Called when pointer stops hovering over the element.
79
105
80
-
duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
106
+
### delayHoverIn (Web only)
81
107
82
-
### `disabled`
108
+
```ts
109
+
delayHoverIn?:number|null;
110
+
```
83
111
84
-
whether the `Pressable` behavior is disabled.
112
+
Duration to wait after hover in before calling `onHoverIn`.
85
113
86
-
### `hitSlop` (Android & iOS only)
114
+
### delayHoverOut (Web only)
87
115
88
-
additional distance outside of the view in which a press is detected and `onPressIn` is triggered.
116
+
```ts
117
+
delayHoverOut?:number|null;
118
+
```
89
119
90
-
Accepts values of type `number` or [`Rect`](https://reactnative.dev/docs/rect)
120
+
Duration to wait after hover out before calling `onHoverOut`.
91
121
92
-
### `pressRetentionOffset` (Android & iOS only)
122
+
### delayLongPress
93
123
94
-
additional distance outside of the view (or `hitSlop` if present) in which a touch is considered a
95
-
press before `onPressOut` is triggered.
124
+
```ts
125
+
delayLongPress?:null|number;
126
+
```
96
127
97
-
Accepts values of type `number` or [`Rect`](https://reactnative.dev/docs/rect)
128
+
Duration (in milliseconds) from `onPressIn` before `onLongPress` is called. Default value is `500` ms.
98
129
99
-
### `android_disableSound` (Android only)
130
+
### disabled
100
131
101
-
if `true`, doesn't play system sound on touch.
132
+
```ts
133
+
disabled?:null|boolean;
134
+
```
102
135
103
-
### `android_ripple` (Android only)
136
+
Whether the `Pressable` behavior is disabled.
104
137
105
-
enables the Android ripple effect and configures its color, radius and other parameters.
138
+
### hitSlop (Android & iOS only)
106
139
107
-
Accepts values of type [`RippleConfig`](https://reactnative.dev/docs/pressable#rippleconfig)
140
+
```ts
141
+
hitSlop?:null|Insets|number;
142
+
```
108
143
109
-
### `testOnly_pressed`
144
+
Additional distance outside of the view in which a press is detected and [`onPressIn`](#onpressin) is triggered.
110
145
111
-
used only for documentation or testing (e.g. snapshot testing).
146
+
The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
112
147
113
-
### `unstable_pressDelay`
148
+
### pressRetentionOffset (Android & iOS only)
114
149
115
-
duration (in milliseconds) to wait after press down before calling `onPressIn`.
150
+
```ts
151
+
pressRetentionOffset?:null|Insets|number;
152
+
```
116
153
117
-
### Example:
154
+
Additional distance outside of the view (or [`hitSlop`](#hitslop) if present) in which a touch is considered a
155
+
press before [`onPressOut`](#onpressout) is triggered.
118
156
119
-
See the full [pressable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/new_api/pressable/index.tsx) from `GestureHandler` example app.
157
+
The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
Enables the Android [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) effect and configures its color, radius and other parameters.
174
+
175
+
Accepts values of type [`RippleConfig`](https://reactnative.dev/docs/pressable#rippleconfig).
176
+
177
+
### testOnly_pressed
178
+
179
+
```ts
180
+
testOnly_pressed?:null|boolean;
181
+
```
182
+
183
+
Used only for documentation or testing (e.g. snapshot testing).
184
+
185
+
### unstable_pressDelay
186
+
187
+
```ts
188
+
unstable_pressDelay?:number|undefined;
189
+
```
190
+
191
+
Duration (in milliseconds) to wait after press down before calling [`onPressIn`](#onpressin).
192
+
193
+
## PressableEvent
194
+
195
+
All `Pressable` callbacks receive an event object as a parameter, which is of type `PressableEvent` and has the following structure:
See the full example in [Gesture Handler repository](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/legacy/v2_api/pressable/index.tsx).
217
+
218
+
<CollapsibleCode
219
+
label="Show full example"
220
+
expandedLabel="Hide full example"
221
+
lineBounds={[5, 20]}
222
+
src={`
124
223
import { View, Text, StyleSheet } from 'react-native';
0 commit comments