feat: use Pressable in TouchableRipple (#3400)

callstack · Oct 17, 2022 · 74659c6 · 74659c6
1 parent 1b694ea
commit 74659c6
Show file tree

Hide file tree

Showing 31 changed files with 769 additions and 96 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -297,7 +297,6 @@ const Button = ({
     >
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={handlePressIn}

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -256,7 +256,6 @@ const Chip = ({
     >
       <TouchableRipple
         borderless
-        delayPressIn={0}
         style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
         onLongPress={onLongPress}

diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
@@ -106,7 +106,6 @@ const DrawerItem = ({
     <View {...rest}>
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         style={[
           styles.container,

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -202,7 +202,6 @@ const ListAccordion = ({
           accessibilityState={{ expanded: isExpanded }}
           accessibilityLabel={accessibilityLabel}
           testID={testID}
-          delayPressIn={0}
           borderless
         >
           <View style={styles.row} pointerEvents="none">

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -161,7 +161,6 @@ const SegmentedButtonItem = ({
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
         borderless
-        delayPressIn={0}
         onPress={onPress}
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ disabled, checked }}

diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {
-  BackgroundPropType,
+  PressableAndroidRippleConfig,
   StyleProp,
   Platform,
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableWithoutFeedback,
-  View,
   ViewStyle,
   StyleSheet,
+  Pressable,
+  GestureResponderEvent,
 } from 'react-native';
 
 import { withTheme } from '../../core/theming';
@@ -18,9 +16,9 @@ import { getTouchableRippleColors } from './utils';
 const ANDROID_VERSION_LOLLIPOP = 21;
 const ANDROID_VERSION_PIE = 28;
 
-type Props = React.ComponentProps<typeof TouchableWithoutFeedback> & {
+type Props = React.ComponentProps<typeof Pressable> & {
   borderless?: boolean;
-  background?: BackgroundPropType;
+  background?: PressableAndroidRippleConfig;
   disabled?: boolean;
   onPress?: () => void | null;
   rippleColor?: string;
@@ -41,6 +39,8 @@ const TouchableRipple = ({
   theme,
   ...rest
 }: Props) => {
+  const [showUnderlay, setShowUnderlay] = React.useState<boolean>(false);
+
   const disabled = disabledProp || !rest.onPress;
   const { calculatedRippleColor, calculatedUnderlayColor } =
     getTouchableRippleColors({
@@ -56,34 +56,51 @@ const TouchableRipple = ({
     Platform.Version >= ANDROID_VERSION_PIE &&
     borderless;
 
+  const handlePressIn = (e: GestureResponderEvent) => {
+    setShowUnderlay(true);
+    rest.onPressIn?.(e);
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    setShowUnderlay(false);
+    rest.onPressOut?.(e);
+  };
+
   if (TouchableRipple.supported) {
     return (
-      <TouchableNativeFeedback
+      <Pressable
         {...rest}
         disabled={disabled}
-        useForeground={useForeground}
-        background={
+        style={[borderless && styles.overflowHidden, style]}
+        android_ripple={
           background != null
             ? background
-            : TouchableNativeFeedback.Ripple(calculatedRippleColor, borderless)
+            : {
+                color: calculatedRippleColor,
+                borderless,
+                foreground: useForeground,
+              }
         }
       >
-        <View style={[borderless && styles.overflowHidden, style]}>
-          {React.Children.only(children)}
-        </View>
-      </TouchableNativeFeedback>
+        {React.Children.only(children)}
+      </Pressable>
     );
   }
 
   return (
-    <TouchableHighlight
+    <Pressable
       {...rest}
       disabled={disabled}
-      style={[borderless && styles.overflowHidden, style]}
-      underlayColor={calculatedUnderlayColor}
+      style={[
+        borderless && styles.overflowHidden,
+        showUnderlay && { backgroundColor: calculatedUnderlayColor },
+        style,
+      ]}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
     >
       {React.Children.only(children)}
-    </TouchableHighlight>
+    </Pressable>
   );
 };
 

diff --git a/src/components/TouchableRipple/TouchableRipple.tsx b/src/components/TouchableRipple/TouchableRipple.tsx
@@ -1,28 +1,25 @@
 import * as React from 'react';
 import {
-  TouchableWithoutFeedback,
-  View,
   ViewStyle,
   StyleSheet,
   StyleProp,
   GestureResponderEvent,
   Platform,
+  Pressable,
 } from 'react-native';
 
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 import { getTouchableRippleColors } from './utils';
 
-export type Props = React.ComponentPropsWithRef<
-  typeof TouchableWithoutFeedback
-> & {
+export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
   /**
    * Whether to render the ripple outside the view bounds.
    */
   borderless?: boolean;
   /**
    * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/touchablenativefeedback#background
+   * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: Object;
   /**
@@ -89,7 +86,7 @@ export type Props = React.ComponentPropsWithRef<
  * export default MyComponent;
  * ```
  *
- * @extends TouchableWithoutFeedback props https://reactnative.dev/docs/touchablewithoutfeedback#props
+ * @extends Pressable props https://reactnative.dev/docs/Pressable#props
  */
 const TouchableRipple = ({
   style,
@@ -233,16 +230,15 @@ const TouchableRipple = ({
   const disabled = disabledProp || !rest.onPress;
 
   return (
-    <TouchableWithoutFeedback
+    <Pressable
       {...rest}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       disabled={disabled}
+      style={[styles.touchable, borderless && styles.borderless, style]}
     >
-      <View style={[styles.touchable, borderless && styles.borderless, style]}>
-        {React.Children.only(children)}
-      </View>
-    </TouchableWithoutFeedback>
+      {React.Children.only(children)}
+    </Pressable>
   );
 };
 

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -147,15 +147,19 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   }
                 >
                   <View
+                    accessibilityComponentType="button"
                     accessibilityLabel="search"
                     accessibilityRole="button"
                     accessibilityState={
                       Object {
                         "disabled": true,
                       }
                     }
+                    accessibilityTraits="button"
                     accessible={true}
-                    focusable={false}
+                    centered={true}
+                    collapsable={false}
+                    focusable={true}
                     hitSlop={
                       Object {
                         "bottom": 6,
@@ -164,7 +168,9 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         "top": 6,
                       }
                     }
+                    onBlur={[Function]}
                     onClick={[Function]}
+                    onFocus={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
                     onResponderRelease={[Function]}
@@ -176,6 +182,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                         Object {
                           "overflow": "hidden",
                         },
+                        false,
                         Object {
                           "alignItems": "center",
                           "flexGrow": 1,
@@ -288,14 +295,18 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     }
                   >
                     <View
+                      accessibilityComponentType="button"
                       accessibilityLabel="clear"
                       accessibilityRole="button"
                       accessibilityState={
                         Object {
                           "disabled": false,
                         }
                       }
+                      accessibilityTraits="button"
                       accessible={true}
+                      centered={true}
+                      collapsable={false}
                       focusable={true}
                       hitSlop={
                         Object {
@@ -305,7 +316,9 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                           "top": 6,
                         }
                       }
+                      onBlur={[Function]}
                       onClick={[Function]}
+                      onFocus={[Function]}
                       onResponderGrant={[Function]}
                       onResponderMove={[Function]}
                       onResponderRelease={[Function]}
@@ -317,6 +330,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                           Object {
                             "overflow": "hidden",
                           },
+                          false,
                           Object {
                             "alignItems": "center",
                             "flexGrow": 1,
@@ -459,14 +473,18 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             }
           >
             <View
+              accessibilityComponentType="button"
               accessibilityLabel="Back"
               accessibilityRole="button"
               accessibilityState={
                 Object {
                   "disabled": false,
                 }
               }
+              accessibilityTraits="button"
               accessible={true}
+              centered={true}
+              collapsable={false}
               focusable={true}
               hitSlop={
                 Object {
@@ -476,7 +494,9 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   "top": 6,
                 }
               }
+              onBlur={[Function]}
               onClick={[Function]}
+              onFocus={[Function]}
               onResponderGrant={[Function]}
               onResponderMove={[Function]}
               onResponderRelease={[Function]}
@@ -488,6 +508,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   Object {
                     "overflow": "hidden",
                   },
+                  false,
                   Object {
                     "alignItems": "center",
                     "flexGrow": 1,
@@ -697,13 +718,17 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             }
           >
             <View
+              accessibilityComponentType="button"
               accessibilityRole="button"
               accessibilityState={
                 Object {
                   "disabled": false,
                 }
               }
+              accessibilityTraits="button"
               accessible={true}
+              centered={true}
+              collapsable={false}
               focusable={true}
               hitSlop={
                 Object {
@@ -713,7 +738,9 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   "top": 6,
                 }
               }
+              onBlur={[Function]}
               onClick={[Function]}
+              onFocus={[Function]}
               onResponderGrant={[Function]}
               onResponderMove={[Function]}
               onResponderRelease={[Function]}
@@ -725,6 +752,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   Object {
                     "overflow": "hidden",
                   },
+                  false,
                   Object {
                     "alignItems": "center",
                     "flexGrow": 1,