Skip to content

Commit da98613

Browse files
m-bertj-piasecki
andauthored
Deprecate Touchable components (#3260)
## Description This PR deprecates `Touchable` components in our repo ## Test plan Try importing any `Touchable` (or its `props`). After importing look at the console. --------- Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>
1 parent 32c360e commit da98613

File tree

7 files changed

+45
-1
lines changed

7 files changed

+45
-1
lines changed

docs/docs/components/touchables.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ title: Touchables
44
sidebar_label: Touchables
55
---
66

7+
:::warning
8+
Touchables will be removed in the future version of Gesture Handler.
9+
:::
10+
711
Gesture Handler library provides an implementation of RN's touchable components that are based on [native buttons](buttons.mdx) and does not rely on 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.
812

913
React Native's touchables API can be found here:

src/components/touchables/TouchableHighlight.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,15 @@ interface State {
1919
};
2020
}
2121

22+
/**
23+
* @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
24+
*/
2225
export type TouchableHighlightProps = RNTouchableHighlightProps &
2326
GenericTouchableProps;
2427

2528
/**
29+
* @deprecated TouchableHighlight will be removed in the future version of Gesture Handler.
30+
*
2631
* TouchableHighlight follows RN's implementation
2732
*/
2833
export default class TouchableHighlight extends Component<

src/components/touchables/TouchableNativeFeedback.android.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
} from './TouchableNativeFeedbackProps';
99

1010
/**
11+
* @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
12+
*
1113
* TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
1214
* There's small difference with handling long press ripple since RN's implementation calls
1315
* ripple animation via bridge. This solution leaves all animations' handling for native components so
Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1-
import { TouchableNativeFeedback } from 'react-native';
1+
import React, { useEffect } from 'react';
2+
import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
3+
import { tagMessage } from '../../utils';
4+
5+
/**
6+
* @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
7+
*/
8+
const TouchableNativeFeedback: React.FC<
9+
React.ComponentProps<typeof RNTouchableNativeFeedback>
10+
> = (props) => {
11+
useEffect(() => {
12+
console.warn(
13+
tagMessage(
14+
'TouchableOpacity component will be removed in the future version of Gesture Handler.'
15+
)
16+
);
17+
}, []);
18+
19+
return <RNTouchableNativeFeedback {...props} />;
20+
};
221

322
export default TouchableNativeFeedback;

src/components/touchables/TouchableNativeFeedbackProps.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,8 @@ export type TouchableNativeFeedbackExtraProps = {
88
foreground?: boolean;
99
};
1010

11+
/**
12+
* @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler.
13+
*/
1114
export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
1215
GenericTouchableProps;

src/components/touchables/TouchableOpacity.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ import type { GenericTouchableProps } from './GenericTouchableProps';
1010
import * as React from 'react';
1111
import { Component } from 'react';
1212

13+
/**
14+
* @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
15+
*/
1316
export type TouchableOpacityProps = RNTouchableOpacityProps &
1417
GenericTouchableProps & {
1518
useNativeAnimations?: boolean;
1619
};
1720

1821
/**
22+
* @deprecated TouchableOpacity will be removed in the future version of Gesture Handler.
23+
*
1924
* TouchableOpacity bases on timing animation which has been used in RN's core
2025
*/
2126
export default class TouchableOpacity extends Component<TouchableOpacityProps> {

src/components/touchables/TouchableWithoutFeedback.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,14 @@ import { PropsWithChildren } from 'react';
33
import GenericTouchable from './GenericTouchable';
44
import type { GenericTouchableProps } from './GenericTouchableProps';
55

6+
/**
7+
* @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
8+
*/
69
export type TouchableWithoutFeedbackProps = GenericTouchableProps;
710

11+
/**
12+
* @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler.
13+
*/
814
const TouchableWithoutFeedback = React.forwardRef<
915
GenericTouchable,
1016
PropsWithChildren<TouchableWithoutFeedbackProps>

0 commit comments

Comments
 (0)