Rename Clickable to Touchable

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

@@ -2,31 +2,31 @@ import React from 'react';
 import { StyleSheet, Text, View, ScrollView } from 'react-native';
 import {
   GestureHandlerRootView,
-  Clickable,
-  ClickableProps,
+  Touchable,
+  TouchableProps,
 } from 'react-native-gesture-handler';
 import { COLORS } from '../../../common';
 
-type ButtonWrapperProps = ClickableProps & {
+type ButtonWrapperProps = TouchableProps & {
   name: string;
   color: string;
 };
 
-function ClickableWrapper({ name, color, ...rest }: ButtonWrapperProps) {
+function TouchableWrapper({ name, color, ...rest }: ButtonWrapperProps) {
   return (
-    <Clickable
+    <Touchable
       style={[styles.button, { backgroundColor: color }]}
       onPressIn={() => console.log(`[${name}] onPressIn`)}
       onPress={() => console.log(`[${name}] onPress`)}
       onLongPress={() => console.log(`[${name}] onLongPress`)}
       onPressOut={() => console.log(`[${name}] onPressOut`)}
       {...rest}>
       <Text style={styles.buttonText}>{name}</Text>
-    </Clickable>
+    </Touchable>
   );
 }
 
-export default function ClickableExample() {
+export default function TouchableExample() {
   return (
     <GestureHandlerRootView style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollContent}>
@@ -35,15 +35,15 @@ export default function ClickableExample() {
           <Text>New component that replaces all buttons and pressables.</Text>
 
           <View style={styles.row}>
-            <ClickableWrapper name="Base" color={COLORS.DARK_PURPLE} />
+            <TouchableWrapper name="Base" color={COLORS.DARK_PURPLE} />
 
-            <ClickableWrapper
+            <TouchableWrapper
               name="Rect"
               color={COLORS.WEB_BLUE}
               activeUnderlayOpacity={0.105}
             />
 
-            <ClickableWrapper
+            <TouchableWrapper
               name="Borderless"
               activeOpacity={0.3}
               color={COLORS.RED}
@@ -56,13 +56,13 @@ export default function ClickableExample() {
           <Text>Animated underlay.</Text>
 
           <View style={styles.row}>
-            <ClickableWrapper
+            <TouchableWrapper
               name="Click me!"
               color={COLORS.YELLOW}
               activeUnderlayOpacity={0.3}
             />
 
-            <ClickableWrapper
+            <TouchableWrapper
               name="Click me!"
               color={COLORS.NAVY}
               defaultUnderlayOpacity={0.7}
@@ -74,14 +74,14 @@ export default function ClickableExample() {
           <Text>Animated component.</Text>
 
           <View style={styles.row}>
-            <ClickableWrapper
+            <TouchableWrapper
               name="Click me!"
               color={COLORS.LIGHT_BLUE}
               defaultOpacity={0.3}
               activeOpacity={0.7}
             />
 
-            <ClickableWrapper
+            <TouchableWrapper
               name="Click me!"
               color={COLORS.DARK_SALMON}
               defaultOpacity={0.7}
@@ -92,16 +92,16 @@ export default function ClickableExample() {
 
         <View style={styles.section}>
           <Text style={styles.sectionHeader}>Android ripple</Text>
-          <Text>Configurable ripple effect on Clickable component.</Text>
+          <Text>Configurable ripple effect on Touchable component.</Text>
 
           <View style={styles.row}>
-            <ClickableWrapper
+            <TouchableWrapper
               name="Default"
               color={COLORS.ANDROID}
               androidRipple={{}}
             />
 
-            <ClickableWrapper
+            <TouchableWrapper
               name="Borderless"
               color={COLORS.ANDROID}
               androidRipple={{

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

@@ -1,6 +1,6 @@
 import { Profiler, useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { Clickable, ScrollView } from 'react-native-gesture-handler';
+import { Touchable, ScrollView } from 'react-native-gesture-handler';
 
 const CLICK_COUNT = 2000;
 const N = 25;
@@ -27,12 +27,12 @@ function getTrimmedAverage(results: number[], dropout: number): number {
   return trimmed.reduce((sum, v) => sum + v, 0) / trimmed.length;
 }
 
-type ClickableListProps = {
+type TouchableListProps = {
   run: number;
   onMountDuration: (duration: number) => void;
 };
 
-function ClickableList({ run, onMountDuration }: ClickableListProps) {
+function TouchableList({ run, onMountDuration }: TouchableListProps) {
   const reportedRef = useRef(-1);
 
   const handleRender = useCallback(
@@ -46,28 +46,28 @@ function ClickableList({ run, onMountDuration }: ClickableListProps) {
   );
 
   return (
-    <Profiler id="ClickableList" onRender={handleRender}>
+    <Profiler id="TouchableList" onRender={handleRender}>
       <ScrollView style={{ flex: 1 }}>
         {STRESS_DATA.map((id) => (
           // <BaseButton key={id} style={styles.button} />
-          <Clickable key={id} style={styles.button} />
+          <Touchable key={id} style={styles.button} />
 
           // <RectButton key={id} style={styles.button} />
-          // <Clickable
+          // <Touchable
           //   key={id}
           //   style={styles.button}
           //   activeUnderlayOpacity={0.105}
           // />
 
           // <BorderlessButton key={id} style={styles.button} />
-          // <Clickable key={id} style={styles.button} activeOpacity={0.3} />
+          // <Touchable key={id} style={styles.button} activeOpacity={0.3} />
         ))}
       </ScrollView>
     </Profiler>
   );
 }
 
-export default function ClickableStress() {
+export default function TouchableStress() {
   const [state, setState] = useState<BenchmarkState>({ phase: 'idle' });
   const resultsRef = useRef<number[]>([]);
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -112,15 +112,15 @@ export default function ClickableStress() {
 
   return (
     <View style={styles.container}>
-      <Clickable
+      <Touchable
         activeUnderlayOpacity={0.105}
         style={[styles.startButton, isRunning && styles.startButtonBusy]}
         onPress={start}
         enabled={!isRunning}>
         <Text style={styles.startButtonText}>
           {isRunning ? `Running ${currentRun}/${N}...` : 'Start test'}
         </Text>
-      </Clickable>
+      </Touchable>
 
       {results && (
         <View style={styles.results}>
@@ -143,7 +143,7 @@ export default function ClickableStress() {
       )}
 
       {isRunning && (
-        <ClickableList run={currentRun} onMountDuration={handleMountDuration} />
+        <TouchableList run={currentRun} onMountDuration={handleMountDuration} />
       )}
     </View>
   );

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

@@ -28,8 +28,8 @@ import TapExample from './simple/tap';
 
 import ButtonsExample from './components/buttons';
 import ButtonUnderlayExample from './components/button_underlay';
-import ClickableExample from './components/clickable';
-import ClickableStressExample from './components/clickable_stress';
+import TouchableExample from './components/touchable';
+import TouchableStressExample from './components/touchable_stress';
 import ReanimatedDrawerLayout from './components/drawer';
 import FlatListExample from './components/flatlist';
 import ScrollViewExample from './components/scrollview';
@@ -109,8 +109,8 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       { name: 'ScrollView example', component: ScrollViewExample },
       { name: 'Buttons example', component: ButtonsExample },
       { name: 'Button underlay example', component: ButtonUnderlayExample },
-      { name: 'Clickable example', component: ClickableExample },
-      { name: 'Clickable stress test', component: ClickableStressExample },
+      { name: 'Touchable example', component: TouchableExample },
+      { name: 'Touchable stress test', component: TouchableStressExample },
       { name: 'Switch & TextInput', component: SwitchTextInputExample },
       { name: 'Reanimated Swipeable', component: Swipeable },
       { name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },

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

@@ -3,7 +3,7 @@
 import { fireGestureHandler, getByGestureTestId } from '../jestUtils';
 import { State } from '../State';
 import GestureHandlerRootView from '../components/GestureHandlerRootView';
-import { RectButton, Clickable } from '../v3/components';
+import { RectButton, Touchable } from '../v3/components';
 import { act } from 'react';
 import type { SingleGesture } from '../v3/types';
 
@@ -15,8 +15,8 @@
     const panGesture = renderHook(() =>
       usePanGesture({
         disableReanimated: true,
         onBegin: (e) => onBegin(e),
         onActivate: (e) => onStart(e),
       })
     ).result.current;
 
@@ -59,18 +59,18 @@
     expect(pressFn).toHaveBeenCalledTimes(1);
   });
 
-  describe('Clickable', () => {
+  describe('Touchable', () => {
     test('calls onPress on successful press', () => {
       const pressFn = jest.fn();
 
       const Example = () => (
         <GestureHandlerRootView>
-          <Clickable testID="clickable" onPress={pressFn} />
+          <Touchable testID="touchable" onPress={pressFn} />
         </GestureHandlerRootView>
       );
 
       render(<Example />);
-      const gesture = getByGestureTestId('clickable');
+      const gesture = getByGestureTestId('touchable');
 
       act(() => {
         fireGestureHandler(gesture, [
@@ -88,12 +88,12 @@
 
       const Example = () => (
         <GestureHandlerRootView>
-          <Clickable testID="clickable" onPress={pressFn} />
+          <Touchable testID="touchable" onPress={pressFn} />
         </GestureHandlerRootView>
       );
 
       render(<Example />);
-      const gesture = getByGestureTestId('clickable');
+      const gesture = getByGestureTestId('touchable');
 
       act(() => {
         fireGestureHandler(gesture, [
@@ -111,12 +111,12 @@
 
       const Example = () => (
         <GestureHandlerRootView>
-          <Clickable testID="clickable" onActiveStateChange={activeStateFn} />
+          <Touchable testID="touchable" onActiveStateChange={activeStateFn} />
         </GestureHandlerRootView>
       );
 
       render(<Example />);
-      const gesture = getByGestureTestId('clickable');
+      const gesture = getByGestureTestId('touchable');
 
       act(() => {
         fireGestureHandler(gesture, [
@@ -140,8 +140,8 @@
 
       const Example = () => (
         <GestureHandlerRootView>
-          <Clickable
-            testID="clickable"
+          <Touchable
+            testID="touchable"
             onPress={pressFn}
             onLongPress={longPressFn}
             delayLongPress={DELAY}
@@ -151,10 +151,10 @@
 
       render(<Example />);
 
-      const gesture = getByGestureTestId('clickable') as SingleGesture<
+      const gesture = getByGestureTestId('touchable') as SingleGesture<
         any,
         any,
         any
       >;
       const { jsEventHandler } = gesture.detectorCallbacks;
 

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

@@ -23,7 +23,7 @@ export const RawButton = createNativeWrapper<
 });
 
 /**
- * @deprecated `BaseButton` is deprecated, use `Clickable` instead
+ * @deprecated `BaseButton` is deprecated, use `Touchable` instead
  */
 export const BaseButton = (props: BaseButtonProps) => {
   const longPressDetected = useRef(false);
@@ -108,7 +108,7 @@ const btnStyles = StyleSheet.create({
 });
 
 /**
- * @deprecated `RectButton` is deprecated, use `Clickable` with `underlayActiveOpacity={0.7}` instead
+ * @deprecated `RectButton` is deprecated, use `Touchable` with `activeUnderlayOpacity={0.7}` instead
  */
 export const RectButton = (props: RectButtonProps) => {
   const {
@@ -156,7 +156,7 @@ export const RectButton = (props: RectButtonProps) => {
 };
 
 /**
- * @deprecated `BorderlessButton` is deprecated, use `Clickable` with `activeOpacity={0.3}` instead
+ * @deprecated `BorderlessButton` is deprecated, use `Touchable` with `activeOpacity={0.3}` instead
  */
 export const BorderlessButton = (props: BorderlessButtonProps) => {
   const activeOpacity = props.activeOpacity ?? 0.3;

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

@@ -3,10 +3,10 @@ import { Platform } from 'react-native';
 import GestureHandlerButton, {
   ButtonProps,
 } from '../../../components/GestureHandlerButton';
-import { CallbackEventType, ClickableProps } from './ClickableProps';
+import { CallbackEventType, TouchableProps } from './TouchableProps';
 import createNativeWrapper from '../../createNativeWrapper';
 
-const ClickableButton = createNativeWrapper<
+const TouchableButton = createNativeWrapper<
   React.ComponentRef<typeof GestureHandlerButton>,
   ButtonProps
 >(GestureHandlerButton, {
@@ -17,7 +17,7 @@ const ClickableButton = createNativeWrapper<
 const isAndroid = Platform.OS === 'android';
 const TRANSPARENT_RIPPLE = { rippleColor: 'transparent' as const };
 
-export const Clickable = (props: ClickableProps) => {
+export const Touchable = (props: TouchableProps) => {
   const {
     underlayColor = 'black',
     defaultUnderlayOpacity = 0,
@@ -111,7 +111,7 @@ export const Clickable = (props: ClickableProps) => {
     : TRANSPARENT_RIPPLE;
 
   return (
-    <ClickableButton
+    <TouchableButton
       {...rest}
       {...rippleProps}
       ref={ref ?? null}
@@ -123,6 +123,6 @@ export const Clickable = (props: ClickableProps) => {
       defaultUnderlayOpacity={defaultUnderlayOpacity}
       underlayColor={underlayColor}>
       {children}
-    </ClickableButton>
+    </TouchableButton>
   );
 };

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

@@ -15,7 +15,7 @@ type PressableAndroidRippleConfig = {
 
 type RippleProps = 'rippleColor' | 'rippleRadius' | 'borderless' | 'foreground';
 
-export type ClickableProps = Omit<ButtonProps, RippleProps> &
+export type TouchableProps = Omit<ButtonProps, RippleProps> &
   Omit<BaseButtonProps, keyof RawButtonProps> & {
     /**
      * Configuration for the ripple effect on Android.

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

@@ -23,5 +23,5 @@ export {
 
 export { default as Pressable } from './Pressable';
 
-export { Clickable } from './Clickable/Clickable';
-export type { ClickableProps } from './Clickable/ClickableProps';
+export { Touchable } from './Touchable/Touchable';
+export type { TouchableProps } from './Touchable/TouchableProps';

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

@@ -66,7 +66,7 @@ export type {
   BaseButtonProps,
   RectButtonProps,
   BorderlessButtonProps,
-  ClickableProps,
+  TouchableProps,
 } from './components';
 
 export {
@@ -80,7 +80,7 @@ export {
   TextInput,
   FlatList,
   RefreshControl,
-  Clickable,
+  Touchable,
 } from './components';
 
 export type { ComposedGesture } from './types';