refactor: migrate to Pressable

packages/drawer/src/views/Drawer.tsx

@@ -10,7 +10,7 @@ import {
   StyleProp,
   View,
   InteractionManager,
-  TouchableWithoutFeedback,
+  Pressable,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
 import {
@@ -661,13 +661,13 @@ export default class DrawerView extends React.Component<Props> {
               drawerType === 'permanent' ? null : Platform.OS === 'web' ||
                 Platform.OS === 'windows' ||
                 Platform.OS === 'macos' ? (
-                <TouchableWithoutFeedback
+                <Pressable
                   onPress={
                     gestureEnabled ? () => this.toggleDrawer(false) : undefined
                   }
                 >
                   <Overlay progress={progress} style={overlayStyle as any} />
-                </TouchableWithoutFeedback>
+                </Pressable>
               ) : (
                 <TapGestureHandler
                   enabled={gestureEnabled}

packages/drawer/src/views/DrawerItem.tsx

@@ -79,15 +79,17 @@ type Props = {
   style?: StyleProp<ViewStyle>;
 };
 
-const Touchable = ({
+const LinkPressable = ({
   children,
   style,
   onPress,
+  onLongPress,
   to,
   accessibilityRole,
-  delayPressIn,
   ...rest
-}: React.ComponentProps<typeof PlatformPressable> & {
+}: Omit<React.ComponentProps<typeof PlatformPressable>, 'style'> & {
+  style: StyleProp<ViewStyle>;
+} & {
   to?: string;
   children: React.ReactNode;
   onPress?: () => void;
@@ -109,6 +111,7 @@ const Touchable = ({
             onPress?.(e);
           }
         }}
+        onLongPress={onLongPress ?? undefined}
       >
         {children}
       </Link>
@@ -118,7 +121,6 @@ const Touchable = ({
       <PlatformPressable
         {...rest}
         accessibilityRole={accessibilityRole}
-        delayPressIn={delayPressIn}
         onPress={onPress}
       >
         <View style={style}>{children}</View>
@@ -164,8 +166,7 @@ export default function DrawerItem(props: Props) {
       {...rest}
       style={[styles.container, { borderRadius, backgroundColor }, style]}
     >
-      <Touchable
-        delayPressIn={0}
+      <LinkPressable
         onPress={onPress}
         style={[styles.wrapper, { borderRadius }]}
         accessibilityRole="button"
@@ -200,7 +201,7 @@ export default function DrawerItem(props: Props) {
             )}
           </View>
         </React.Fragment>
-      </Touchable>
+      </LinkPressable>
     </View>
   );
 }

packages/drawer/src/views/DrawerToggleButton.tsx

@@ -23,14 +23,13 @@ export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
       {...rest}
       accessible
       accessibilityRole="button"
-      delayPressIn={0}
+      android_ripple={{ borderless: true }}
       onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
       style={styles.touchable}
       hitSlop={Platform.select({
         ios: undefined,
         default: { top: 16, right: 16, bottom: 16, left: 16 },
       })}
-      borderless
     >
       <Image
         style={[styles.icon, tintColor ? { tintColor } : null]}