Skip to content

Commit d1368a0

Browse files
m-bertCopilot
m-bert
and
Copilot
authored
Rename Clickable to Touchable (#4063)
## Description `Clickable` was initial name for our new component, but we all agreed that this name is not the best. Since `Touchable` was basically free - it was used with suffixes, like `TouchableOpacity`, we decided to rename `Clickable` to `Touchable` ## Test plan `yarn ts-check` and `yarn lint-js` --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent b606c5e commit d1368a0

9 files changed

Lines changed: 56 additions & 56 deletions

File tree

apps/common-app/src/new_api/components/clickable/index.tsx renamed to apps/common-app/src/new_api/components/touchable/index.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,31 @@ import React from 'react';
22
import { StyleSheet, Text, View, ScrollView } from 'react-native';
33
import {
44
GestureHandlerRootView,
5-
Clickable,
6-
ClickableProps,
5+
Touchable,
6+
TouchableProps,
77
} from 'react-native-gesture-handler';
88
import { COLORS } from '../../../common';
99

10-
type ButtonWrapperProps = ClickableProps & {
10+
type ButtonWrapperProps = TouchableProps & {
1111
name: string;
1212
color: string;
1313
};
1414

15-
function ClickableWrapper({ name, color, ...rest }: ButtonWrapperProps) {
15+
function TouchableWrapper({ name, color, ...rest }: ButtonWrapperProps) {
1616
return (
17-
<Clickable
17+
<Touchable
1818
style={[styles.button, { backgroundColor: color }]}
1919
onPressIn={() => console.log(`[${name}] onPressIn`)}
2020
onPress={() => console.log(`[${name}] onPress`)}
2121
onLongPress={() => console.log(`[${name}] onLongPress`)}
2222
onPressOut={() => console.log(`[${name}] onPressOut`)}
2323
{...rest}>
2424
<Text style={styles.buttonText}>{name}</Text>
25-
</Clickable>
25+
</Touchable>
2626
);
2727
}
2828

29-
export default function ClickableExample() {
29+
export default function TouchableExample() {
3030
return (
3131
<GestureHandlerRootView style={styles.container}>
3232
<ScrollView contentContainerStyle={styles.scrollContent}>
@@ -35,15 +35,15 @@ export default function ClickableExample() {
3535
<Text>New component that replaces all buttons and pressables.</Text>
3636

3737
<View style={styles.row}>
38-
<ClickableWrapper name="Base" color={COLORS.DARK_PURPLE} />
38+
<TouchableWrapper name="Base" color={COLORS.DARK_PURPLE} />
3939

40-
<ClickableWrapper
40+
<TouchableWrapper
4141
name="Rect"
4242
color={COLORS.WEB_BLUE}
4343
activeUnderlayOpacity={0.105}
4444
/>
4545

46-
<ClickableWrapper
46+
<TouchableWrapper
4747
name="Borderless"
4848
activeOpacity={0.3}
4949
color={COLORS.RED}
@@ -56,13 +56,13 @@ export default function ClickableExample() {
5656
<Text>Animated underlay.</Text>
5757

5858
<View style={styles.row}>
59-
<ClickableWrapper
59+
<TouchableWrapper
6060
name="Click me!"
6161
color={COLORS.YELLOW}
6262
activeUnderlayOpacity={0.3}
6363
/>
6464

65-
<ClickableWrapper
65+
<TouchableWrapper
6666
name="Click me!"
6767
color={COLORS.NAVY}
6868
defaultUnderlayOpacity={0.7}
@@ -74,14 +74,14 @@ export default function ClickableExample() {
7474
<Text>Animated component.</Text>
7575

7676
<View style={styles.row}>
77-
<ClickableWrapper
77+
<TouchableWrapper
7878
name="Click me!"
7979
color={COLORS.LIGHT_BLUE}
8080
defaultOpacity={0.3}
8181
activeOpacity={0.7}
8282
/>
8383

84-
<ClickableWrapper
84+
<TouchableWrapper
8585
name="Click me!"
8686
color={COLORS.DARK_SALMON}
8787
defaultOpacity={0.7}
@@ -92,16 +92,16 @@ export default function ClickableExample() {
9292

9393
<View style={styles.section}>
9494
<Text style={styles.sectionHeader}>Android ripple</Text>
95-
<Text>Configurable ripple effect on Clickable component.</Text>
95+
<Text>Configurable ripple effect on Touchable component.</Text>
9696

9797
<View style={styles.row}>
98-
<ClickableWrapper
98+
<TouchableWrapper
9999
name="Default"
100100
color={COLORS.ANDROID}
101101
androidRipple={{}}
102102
/>
103103

104-
<ClickableWrapper
104+
<TouchableWrapper
105105
name="Borderless"
106106
color={COLORS.ANDROID}
107107
androidRipple={{

apps/common-app/src/new_api/components/clickable_stress/index.tsx renamed to apps/common-app/src/new_api/components/touchable_stress/index.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Profiler, useCallback, useEffect, useRef, useState } from 'react';
22
import { StyleSheet, Text, View } from 'react-native';
3-
import { Clickable, ScrollView } from 'react-native-gesture-handler';
3+
import { Touchable, ScrollView } from 'react-native-gesture-handler';
44

55
const CLICK_COUNT = 2000;
66
const N = 25;
@@ -27,12 +27,12 @@ function getTrimmedAverage(results: number[], dropout: number): number {
2727
return trimmed.reduce((sum, v) => sum + v, 0) / trimmed.length;
2828
}
2929

30-
type ClickableListProps = {
30+
type TouchableListProps = {
3131
run: number;
3232
onMountDuration: (duration: number) => void;
3333
};
3434

35-
function ClickableList({ run, onMountDuration }: ClickableListProps) {
35+
function TouchableList({ run, onMountDuration }: TouchableListProps) {
3636
const reportedRef = useRef(-1);
3737

3838
const handleRender = useCallback(
@@ -46,28 +46,28 @@ function ClickableList({ run, onMountDuration }: ClickableListProps) {
4646
);
4747

4848
return (
49-
<Profiler id="ClickableList" onRender={handleRender}>
49+
<Profiler id="TouchableList" onRender={handleRender}>
5050
<ScrollView style={{ flex: 1 }}>
5151
{STRESS_DATA.map((id) => (
5252
// <BaseButton key={id} style={styles.button} />
53-
<Clickable key={id} style={styles.button} />
53+
<Touchable key={id} style={styles.button} />
5454

5555
// <RectButton key={id} style={styles.button} />
56-
// <Clickable
56+
// <Touchable
5757
// key={id}
5858
// style={styles.button}
5959
// activeUnderlayOpacity={0.105}
6060
// />
6161

6262
// <BorderlessButton key={id} style={styles.button} />
63-
// <Clickable key={id} style={styles.button} activeOpacity={0.3} />
63+
// <Touchable key={id} style={styles.button} activeOpacity={0.3} />
6464
))}
6565
</ScrollView>
6666
</Profiler>
6767
);
6868
}
6969

70-
export default function ClickableStress() {
70+
export default function TouchableStress() {
7171
const [state, setState] = useState<BenchmarkState>({ phase: 'idle' });
7272
const resultsRef = useRef<number[]>([]);
7373
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -112,15 +112,15 @@ export default function ClickableStress() {
112112

113113
return (
114114
<View style={styles.container}>
115-
<Clickable
115+
<Touchable
116116
activeUnderlayOpacity={0.105}
117117
style={[styles.startButton, isRunning && styles.startButtonBusy]}
118118
onPress={start}
119119
enabled={!isRunning}>
120120
<Text style={styles.startButtonText}>
121121
{isRunning ? `Running ${currentRun}/${N}...` : 'Start test'}
122122
</Text>
123-
</Clickable>
123+
</Touchable>
124124

125125
{results && (
126126
<View style={styles.results}>
@@ -143,7 +143,7 @@ export default function ClickableStress() {
143143
)}
144144

145145
{isRunning && (
146-
<ClickableList run={currentRun} onMountDuration={handleMountDuration} />
146+
<TouchableList run={currentRun} onMountDuration={handleMountDuration} />
147147
)}
148148
</View>
149149
);

‎apps/common-app/src/new_api/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ import TapExample from './simple/tap';
2828

2929
import ButtonsExample from './components/buttons';
3030
import ButtonUnderlayExample from './components/button_underlay';
31-
import ClickableExample from './components/clickable';
32-
import ClickableStressExample from './components/clickable_stress';
31+
import TouchableExample from './components/touchable';
32+
import TouchableStressExample from './components/touchable_stress';
3333
import ReanimatedDrawerLayout from './components/drawer';
3434
import FlatListExample from './components/flatlist';
3535
import ScrollViewExample from './components/scrollview';
@@ -109,8 +109,8 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
109109
{ name: 'ScrollView example', component: ScrollViewExample },
110110
{ name: 'Buttons example', component: ButtonsExample },
111111
{ name: 'Button underlay example', component: ButtonUnderlayExample },
112-
{ name: 'Clickable example', component: ClickableExample },
113-
{ name: 'Clickable stress test', component: ClickableStressExample },
112+
{ name: 'Touchable example', component: TouchableExample },
113+
{ name: 'Touchable stress test', component: TouchableStressExample },
114114
{ name: 'Switch & TextInput', component: SwitchTextInputExample },
115115
{ name: 'Reanimated Swipeable', component: Swipeable },
116116
{ name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },

‎packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { render, renderHook } from '@testing-library/react-native';
33
import { fireGestureHandler, getByGestureTestId } from '../jestUtils';
44
import { State } from '../State';
55
import GestureHandlerRootView from '../components/GestureHandlerRootView';
6-
import { RectButton, Clickable } from '../v3/components';
6+
import { RectButton, Touchable } from '../v3/components';
77
import { act } from 'react';
88
import type { SingleGesture } from '../v3/types';
99

@@ -59,18 +59,18 @@ describe('[API v3] Components', () => {
5959
expect(pressFn).toHaveBeenCalledTimes(1);
6060
});
6161

62-
describe('Clickable', () => {
62+
describe('Touchable', () => {
6363
test('calls onPress on successful press', () => {
6464
const pressFn = jest.fn();
6565

6666
const Example = () => (
6767
<GestureHandlerRootView>
68-
<Clickable testID="clickable" onPress={pressFn} />
68+
<Touchable testID="touchable" onPress={pressFn} />
6969
</GestureHandlerRootView>
7070
);
7171

7272
render(<Example />);
73-
const gesture = getByGestureTestId('clickable');
73+
const gesture = getByGestureTestId('touchable');
7474

7575
act(() => {
7676
fireGestureHandler(gesture, [
@@ -88,12 +88,12 @@ describe('[API v3] Components', () => {
8888

8989
const Example = () => (
9090
<GestureHandlerRootView>
91-
<Clickable testID="clickable" onPress={pressFn} />
91+
<Touchable testID="touchable" onPress={pressFn} />
9292
</GestureHandlerRootView>
9393
);
9494

9595
render(<Example />);
96-
const gesture = getByGestureTestId('clickable');
96+
const gesture = getByGestureTestId('touchable');
9797

9898
act(() => {
9999
fireGestureHandler(gesture, [
@@ -111,12 +111,12 @@ describe('[API v3] Components', () => {
111111

112112
const Example = () => (
113113
<GestureHandlerRootView>
114-
<Clickable testID="clickable" onActiveStateChange={activeStateFn} />
114+
<Touchable testID="touchable" onActiveStateChange={activeStateFn} />
115115
</GestureHandlerRootView>
116116
);
117117

118118
render(<Example />);
119-
const gesture = getByGestureTestId('clickable');
119+
const gesture = getByGestureTestId('touchable');
120120

121121
act(() => {
122122
fireGestureHandler(gesture, [
@@ -140,8 +140,8 @@ describe('[API v3] Components', () => {
140140

141141
const Example = () => (
142142
<GestureHandlerRootView>
143-
<Clickable
144-
testID="clickable"
143+
<Touchable
144+
testID="touchable"
145145
onPress={pressFn}
146146
onLongPress={longPressFn}
147147
delayLongPress={DELAY}
@@ -151,7 +151,7 @@ describe('[API v3] Components', () => {
151151

152152
render(<Example />);
153153

154-
const gesture = getByGestureTestId('clickable') as SingleGesture<
154+
const gesture = getByGestureTestId('touchable') as SingleGesture<
155155
any,
156156
any,
157157
any

‎packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const RawButton = createNativeWrapper<
2323
});
2424

2525
/**
26-
* @deprecated `BaseButton` is deprecated, use `Clickable` instead
26+
* @deprecated `BaseButton` is deprecated, use `Touchable` instead
2727
*/
2828
export const BaseButton = (props: BaseButtonProps) => {
2929
const longPressDetected = useRef(false);
@@ -108,7 +108,7 @@ const btnStyles = StyleSheet.create({
108108
});
109109

110110
/**
111-
* @deprecated `RectButton` is deprecated, use `Clickable` with `underlayActiveOpacity={0.7}` instead
111+
* @deprecated `RectButton` is deprecated, use `Touchable` with `activeUnderlayOpacity={0.7}` instead
112112
*/
113113
export const RectButton = (props: RectButtonProps) => {
114114
const {
@@ -156,7 +156,7 @@ export const RectButton = (props: RectButtonProps) => {
156156
};
157157

158158
/**
159-
* @deprecated `BorderlessButton` is deprecated, use `Clickable` with `activeOpacity={0.3}` instead
159+
* @deprecated `BorderlessButton` is deprecated, use `Touchable` with `activeOpacity={0.3}` instead
160160
*/
161161
export const BorderlessButton = (props: BorderlessButtonProps) => {
162162
const activeOpacity = props.activeOpacity ?? 0.3;

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx renamed to packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Platform } from 'react-native';
33
import GestureHandlerButton, {
44
ButtonProps,
55
} from '../../../components/GestureHandlerButton';
6-
import { CallbackEventType, ClickableProps } from './ClickableProps';
6+
import { CallbackEventType, TouchableProps } from './TouchableProps';
77
import createNativeWrapper from '../../createNativeWrapper';
88

9-
const ClickableButton = createNativeWrapper<
9+
const TouchableButton = createNativeWrapper<
1010
React.ComponentRef<typeof GestureHandlerButton>,
1111
ButtonProps
1212
>(GestureHandlerButton, {
@@ -17,7 +17,7 @@ const ClickableButton = createNativeWrapper<
1717
const isAndroid = Platform.OS === 'android';
1818
const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
1919

20-
export const Clickable = (props: ClickableProps) => {
20+
export const Touchable = (props: TouchableProps) => {
2121
const {
2222
underlayColor = 'black',
2323
defaultUnderlayOpacity = 0,
@@ -111,7 +111,7 @@ export const Clickable = (props: ClickableProps) => {
111111
: TRANSPARENT_RIPPLE;
112112

113113
return (
114-
<ClickableButton
114+
<TouchableButton
115115
{...rest}
116116
{...rippleProps}
117117
ref={ref ?? null}
@@ -123,6 +123,6 @@ export const Clickable = (props: ClickableProps) => {
123123
defaultUnderlayOpacity={defaultUnderlayOpacity}
124124
underlayColor={underlayColor}>
125125
{children}
126-
</ClickableButton>
126+
</TouchableButton>
127127
);
128128
};

packages/react-native-gesture-handler/src/v3/components/Clickable/ClickableProps.ts renamed to packages/react-native-gesture-handler/src/v3/components/Touchable/TouchableProps.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ type PressableAndroidRippleConfig = {
1515

1616
type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
1717

18-
export type ClickableProps = Omit<ButtonProps, RippleProps> &
18+
export type TouchableProps = Omit<ButtonProps, RippleProps> &
1919
Omit<BaseButtonProps, keyof RawButtonProps> & {
2020
/**
2121
* Configuration for the ripple effect on Android.

‎packages/react-native-gesture-handler/src/v3/components/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ export {
2323

2424
export { default as Pressable } from './Pressable';
2525

26-
export { Clickable } from './Clickable/Clickable';
27-
export type { ClickableProps } from './Clickable/ClickableProps';
26+
export { Touchable } from './Touchable/Touchable';
27+
export type { TouchableProps } from './Touchable/TouchableProps';

‎packages/react-native-gesture-handler/src/v3/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export type {
6666
BaseButtonProps,
6767
RectButtonProps,
6868
BorderlessButtonProps,
69-
ClickableProps,
69+
TouchableProps,
7070
} from './components';
7171

7272
export {
@@ -80,7 +80,7 @@ export {
8080
TextInput,
8181
FlatList,
8282
RefreshControl,
83-
Clickable,
83+
Touchable,
8484
} from './components';
8585

8686
export type { ComposedGesture } from './types';

0 commit comments

Comments
 (0)