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
`Clickable` is a versatile new component introduced in Gesture Handler 3 to supersede previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.
9
+
:::note
10
+
This section refers to new `Touchable` component, meant to replace both buttons and touchables. If you are looking for documentation for the deprecated touchable components, check out the [Legacy Touchables](/docs/components/legacy-touchables) section.
11
+
:::
10
12
11
-
`Clickable` provides a simple interface for the common animations like opacity, underlay, and scale, implemented entirely on the platform. On Android, it also exposes the native ripple effect on press (turned off by default).
13
+
`Touchable` is a versatile new component introduced in Gesture Handler 3 to supersede previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.
12
14
13
-
If the provided animations are not sufficient, it's possible to use `Clickable` to create fully custom interactions using either [Reanimated](https://docs.swmansion.com/react-native-reanimated/) or [Animated API](https://reactnative.dev/docs/animated).
15
+
`Touchable` provides a simple interface for the common animations like opacity, underlay, and scale, implemented entirely on the platform. On Android, it also exposes the native ripple effect on press (turned off by default).
16
+
17
+
If the provided animations are not sufficient, it's possible to use `Touchable` to create fully custom interactions using either [Reanimated](https://docs.swmansion.com/react-native-reanimated/) or [Animated API](https://reactnative.dev/docs/animated).
14
18
15
19
## Replacing old buttons
16
20
17
-
If you were using `RectButton` or `BorderlessButton` in your app, you should replace them with `Clickable`. Check out the full code in the [example](#example) section below.
21
+
If you were using `RectButton` or `BorderlessButton` in your app, you should replace them with `Touchable`. Check out the full code in the [example](#example) section below.
18
22
19
23
### RectButton
20
24
21
-
To replace `RectButton` with `Clickable`, simply add `activeUnderlayOpacity={0.105}` to your `Clickable`. This will animate the underlay when the button is pressed.
25
+
To replace `RectButton` with `Touchable`, simply add `activeUnderlayOpacity={0.105}` to your `Touchable`. This will animate the underlay when the button is pressed.
22
26
23
27
```tsx
24
-
<Clickable
28
+
<Touchable
25
29
...
26
30
activeUnderlayOpacity={0.105}/>
27
31
```
28
32
29
33
### BorderlessButton
30
34
31
-
Replacing `BorderlessButton` with `Clickable` is as easy as replacing `RectButton`. Just add `activeOpacity={0.3}` to your `Clickable`. This will animate the whole component when the button is pressed.
35
+
Replacing `BorderlessButton` with `Touchable` is as easy as replacing `RectButton`. Just add `activeOpacity={0.3}` to your `Touchable`. This will animate the whole component when the button is pressed.
32
36
33
37
```tsx
34
-
<Clickable
38
+
<Touchable
35
39
...
36
40
activeOpacity={0.3}/>
37
41
```
38
42
39
43
## Replacing deprecated Touchables
40
44
41
-
If you were using the deprecated [`Touchable`](/docs/components/touchables) components, you can replace them with `Clickable` as well.
45
+
If you were using the deprecated [`Touchables`](/docs/components/touchables), you can replace them with new `Touchable` as well.
42
46
43
47
### TouchableOpacity
44
48
45
-
To replace `TouchableOpacity` with `Clickable`, add `activeOpacity={0.2}`.
49
+
To replace `TouchableOpacity` with `Touchable`, add `activeOpacity={0.2}`.
46
50
47
51
```tsx
48
-
<Clickable
52
+
<Touchable
49
53
...
50
54
activeOpacity={0.2}/>
51
55
```
52
56
53
57
### TouchableHighlight
54
58
55
-
To replace `TouchableHighlight` with `Clickable`, add `activeUnderlayOpacity={1}`.
59
+
To replace `TouchableHighlight` with `Touchable`, add `activeUnderlayOpacity={1}`.
56
60
57
61
```tsx
58
-
<Clickable
62
+
<Touchable
59
63
...
60
64
activeUnderlayOpacity={1}/>
61
65
```
62
66
63
67
### TouchableWithoutFeedback
64
68
65
-
To replace `TouchableWithoutFeedback`, use a plain `Clickable`.
69
+
To replace `TouchableWithoutFeedback`, use a plain `Touchable`.
66
70
67
71
```tsx
68
-
<Clickable... />
72
+
<Touchable... />
69
73
```
70
74
71
75
### TouchableNativeFeedback
72
76
73
77
To replace `TouchableNativeFeedback`, use the [`androidRipple`](#androidripple) prop. Make sure to set `foreground={true}`.
74
78
75
79
```tsx
76
-
<Clickable
80
+
<Touchable
77
81
...
78
82
androidRipple={{
79
83
foreground: true,
@@ -82,7 +86,7 @@ To replace `TouchableNativeFeedback`, use the [`androidRipple`](#androidripple)
82
86
83
87
## Example
84
88
85
-
In this example we will demonstrate how to recreate `RectButton` and `BorderlessButton` effects using the `Clickable` component.
89
+
In this example we will demonstrate how to recreate `RectButton` and `BorderlessButton` effects using the `Touchable` component.
Copy file name to clipboardExpand all lines: packages/docs-gesture-handler/docs/components/touchables.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
---
2
-
id: touchables
3
-
title: Touchables
4
-
sidebar_label: Touchables
2
+
id: legacy-touchables
3
+
title: Legacy Touchables
4
+
sidebar_label: Legacy Touchables
5
5
---
6
6
7
7
:::warning
8
-
Touchables will be removed in the future version of Gesture Handler. Use [`Pressable`](/docs/components/pressable) instead.
8
+
Touchables will be removed in the future version of Gesture Handler. Use [`Touchable`](/docs/components/touchable) instead.
9
9
:::
10
10
11
11
Gesture Handler library provides an implementation of RN's touchable components that are based on [native buttons](buttons.mdx) and do not rely on the JS responder system utilized by RN. Our touchable implementation follows the same API and aims to be a drop-in replacement for touchables available in React Native.
Copy file name to clipboardExpand all lines: skills/gesture-handler-3-migration/SKILL.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -170,9 +170,9 @@ The implementation of buttons has been updated, resolving most button-related is
170
170
171
171
`PureNativeButton` has been removed. If encountered, inform the user that it has been removed and let them decide how to handle that case. They can achieve similar functionality with other buttons.
172
172
173
-
When migrating buttons, you should use `Clickable` component instead. To replace `BaseButton` use `Clickable` with default props, to replace `RectButton` use `Clickable` with `activeUnderlayOpacity={0.105}` and to replace `BorderlessButton` use `Clickable` with `activeOpacity={0.3}`.
173
+
When migrating buttons, you should use new `Touchable` component instead. To replace `BaseButton` use `Touchable` with default props, to replace `RectButton` use `Touchable` with `activeUnderlayOpacity={0.105}` and to replace `BorderlessButton` use `Touchable` with `activeOpacity={0.3}`.
174
174
175
-
Touchables from Gesture Handler are also deprecated and should be replaced with `Clickable`. To replace `TouchableOpacity` use `Clickable` with `activeOpacity={0.2}` and to replace `TouchableHighlight` use `Clickable` with `activeUnderlayOpacity={1}`. To replace `TouchableWithoutFeedback` use a plain `Clickable`. `TouchableNativeFeedback` can be replaced with `Clickable` by setting `androidRipple` property. At minimum, it should be set to `{foregroud: true}`, to mimic `TouchableNativeFeedback` ripple effect.
175
+
Legacy Touchables (`TouchableOpacity`, `TouchableHighlight`, `TouchableWithoutFeedback`, `TouchableNativeFeedback`) from Gesture Handler are also deprecated and should be replaced with `Touchable`. To replace `TouchableOpacity` use `Touchable` with `activeOpacity={0.2}` and to replace `TouchableHighlight` use `Touchable` with `activeUnderlayOpacity={1}`. To replace `TouchableWithoutFeedback` use a plain `Touchable`. `TouchableNativeFeedback` can be replaced with `Touchable` by setting `androidRipple` property. At minimum, it should be set to `{foregroud: true}`, to mimic `TouchableNativeFeedback` ripple effect.
176
176
177
177
Other components have also been internally rewritten using the new hook API but are exported under their original names, so no changes are necessary on your part. However, if you need to use the previous implementation for any reason, the legacy components are also available and are prefixed with `Legacy`, e.g., `ScrollView` is now available as `LegacyScrollView`.
0 commit comments