Create gesturized pressable component

Pressable/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/components/Pressable",
+  "module": "../lib/module/components/Pressable",
+  "react-native": "../src/components/Pressable",
+  "types": "../lib/typescript/components/Pressable.d.ts"
+}

example/App.tsx

@@ -65,6 +65,7 @@
 import HoverableIcons from './src/new_api/hoverable_icons';
 import VelocityTest from './src/new_api/velocityTest';
 import Swipeable from 'src/new_api/swipeable';
+import Pressable from 'src/new_api/pressable';
 
 import EmptyExample from './src/empty/EmptyExample';
 import RectButtonBorders from './src/release_tests/rectButton';
@@ -162,6 +163,7 @@
       { name: 'Chat Heads', component: ChatHeadsNewApi },
       { name: 'Drag and drop', component: DragNDrop },
       { name: 'Swipeable', component: Swipeable },
+      { name: 'Pressable', component: Pressable },
       {
         name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
         component: BetterHorizontalDrawer,
@@ -260,7 +262,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/src/new_api/pressable/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Pressable } from 'react-native-gesture-handler';
+
+export default function EmptyExample() {
+  const pressIn = () => {
+    console.log('Pressable pressed in');
+  };
+
+  const pressOut = () => {
+    console.log('Pressable pressed out');
+  };
+
+  const hoverIn = () => {
+    console.log('Hovered in');
+  };
+
+  const hoverOut = () => {
+    console.log('Hovered out');
+  };
+
+  const focus = () => {
+    console.log('Focused pressable');
+  };
+
+  const blur = () => {
+    console.log('Blurred pressable');
+  };
+
+  const longPress = () => {
+    console.log('Long pressed');
+  };
+  return (
+    <View style={styles.container}>
+      <Pressable
+        style={styles.pressable}
+        onPressIn={pressIn}
+        onPressOut={pressOut}
+        onHoverIn={hoverIn}
+        onHoverOut={hoverOut}
+        onFocus={focus}
+        onBlur={blur}
+        onLongPress={longPress}>
+        <View style={styles.textWrapper}>
+          <Text style={styles.text}>Pressable!</Text>
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  pressable: {
+    backgroundColor: 'mediumpurple',
+    width: 120,
+    height: 120,
+    margin: 'auto',
+  },
+  textWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#F5FCFF',
+  },
+});

package.json

@@ -39,6 +39,7 @@
     "android/noreanimated/src/main/java/",
     "apple/",
     "Swipeable/",
+    "Pressable/",
     "jest-utils/",
     "DrawerLayout/",
     "README.md",

src/components/Pressable.tsx

@@ -0,0 +1,281 @@
+import React, { useRef } from 'react';
+import {
+  View,
+  AccessibilityProps,
+  ColorValue,
+  Insets,
+  NativeSyntheticEvent,
+  StyleProp,
+  TargetedEvent,
+  ViewProps,
+  ViewStyle,
+  StyleSheet,
+} from 'react-native';
+
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  GestureStateChangeEvent,
+  GestureTouchEvent,
+  LongPressGestureHandlerEventPayload,
+  TouchData,
+} from '../.';
+import { HoverGestureHandlerEventPayload } from '../handlers/gestures/hoverGesture';
+
+const DEFAULT_LONG_PRESS_DURATION = 500;
+const DEFAULT_HOVER_DELAY = 0;
+
+export interface PressableStateCallbackType {
+  readonly pressed: boolean;
+}
+
+export interface PressableAndroidRippleConfig {
+  color?: null | ColorValue | undefined;
+  borderless?: null | boolean | undefined;
+  radius?: null | number | undefined;
+  foreground?: null | boolean | undefined;
+}
+
+export interface PressableProps
+  extends AccessibilityProps,
+    Omit<ViewProps, 'children' | 'style' | 'hitSlop'> {
+  /**
+   * Called when the hover is activated to provide visual feedback.
+   */
+  onHoverIn?:
+    | null
+    | ((
+        event: GestureStateChangeEvent<HoverGestureHandlerEventPayload>
+      ) => void);
+
+  /**
+   * Called when the hover is deactivated to undo visual feedback.
+   */
+  onHoverOut?:
+    | null
+    | ((
+        event: GestureStateChangeEvent<HoverGestureHandlerEventPayload>
+      ) => void);
+
+  /**
+   * Called when a single tap gesture is detected.
+   */
+  onPress?: null | ((event: GestureTouchEvent) => void);
+
+  /**
+   * Called when a touch is engaged before `onPress`.
+   */
+  onPressIn?: null | ((event: GestureTouchEvent) => void);
+
+  /**
+   * Called when a touch is released before `onPress`.
+   */
+  onPressOut?: null | ((event: GestureTouchEvent) => void);
+
+  /**
+   * Called when a long-tap gesture is detected.
+   */
+  onLongPress?:
+    | null
+    | ((
+        event: GestureStateChangeEvent<LongPressGestureHandlerEventPayload>
+      ) => void);
+
+  /**
+   * Called after the element loses focus.
+   * @platform macos windows
+   */
+  onBlur?: null | ((event: NativeSyntheticEvent<TargetedEvent>) => void);
+
+  /**
+   * Called after the element is focused.
+   * @platform macos windows
+   */
+  onFocus?: null | ((event: NativeSyntheticEvent<TargetedEvent>) => void);
+
+  /**
+   * Either children or a render prop that receives a boolean reflecting whether
+   * the component is currently pressed.
+   */
+  children?:
+    | React.ReactNode
+    | ((state: PressableStateCallbackType) => React.ReactNode);
+
+  /**
+   * Whether a press gesture can be interrupted by a parent gesture such as a
+   * scroll event. Defaults to true.
+   */
+  cancelable?: null | boolean;
+
+  /**
+   * Duration to wait after hover in before calling `onHoverIn`.
+   * @platform macos windows
+   */
+  delayHoverIn?: number | null;
+
+  /**
+   * Duration to wait after hover out before calling `onHoverOut`.
+   * @platform macos windows
+   */
+  delayHoverOut?: number | null;
+
+  /**
+   * Duration (in milliseconds) from `onPressIn` before `onLongPress` is called.
+   */
+  delayLongPress?: null | number;
+
+  /**
+   * Whether the press behavior is disabled.
+   */
+  disabled?: null | boolean;
+
+  /**
+   * Additional distance outside of this view in which a press is detected.
+   */
+  hitSlop?: null | Insets | number;
+
+  /**
+   * Additional distance outside of this view in which a touch is considered a
+   * press before `onPressOut` is triggered.
+   */
+  pressRetentionOffset?: null | Insets | number;
+
+  /**
+   * If true, doesn't play system sound on touch.
+   */
+  android_disableSound?: null | boolean;
+
+  /**
+   * Enables the Android ripple effect and configures its color.
+   */
+  android_ripple?: null | PressableAndroidRippleConfig;
+
+  /**
+   * Used only for documentation or testing (e.g. snapshot testing).
+   */
+  testOnly_pressed?: null | boolean;
+
+  /**
+   * Either view styles or a function that receives a boolean reflecting whether
+   * the component is currently pressed and returns view styles.
+   */
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
+
+  /**
+   * Duration (in milliseconds) to wait after press down before calling onPressIn.
+   */
+  unstable_pressDelay?: number;
+}
+
+function touchWithinBounds(touch: TouchData, bounds: Insets): boolean {
+  const leftbound = bounds.left ? bounds.left < touch.absoluteX : true;
+  const rightbound = bounds.right ? bounds.right > touch.absoluteX : true;
+  const bottombound = bounds.bottom ? bounds.bottom < touch.absoluteY : true;
+  const topbound = bounds.top ? bounds.top > touch.absoluteY : true;
+
+  return leftbound && rightbound && topbound && bottombound;
+}
+
+export default function Pressable(props: PressableProps) {
+  const previousTouchData = useRef<TouchData[] | null>(null);
+
+  const pressRetentionOffset: Insets | null | undefined =
+    typeof props.pressRetentionOffset === 'number'
+      ? {
+          top: props.pressRetentionOffset,
+          left: props.pressRetentionOffset,
+          bottom: props.pressRetentionOffset,
+          right: props.pressRetentionOffset,
+        }
+      : props.pressRetentionOffset;
+
+  const touch = Gesture.Manual()
+    .onTouchesDown((event) => {
+      // note: hitslop checking support is built in
+      props.onPressIn?.(event);
+      previousTouchData.current = event.allTouches;
+    })
+    .onTouchesUp((event) => {
+      // doesn't call onPressOut untill the last pointer leaves, while within bounds
+      if (event.allTouches.length > 1) {
+        return;
+      }
+
+      if (!pressRetentionOffset) {
+        props.onPressOut?.(event);
+        return;
+      }
+
+      if (
+        previousTouchData.current?.find((touch) =>
+          touchWithinBounds(touch, pressRetentionOffset)
+        )
+      ) {
+        props.onPressOut?.(event);
+      }
+    });
+
+  const press = Gesture.LongPress().onEnd((event, success) => {
+    if (success) {
+      props.onLongPress?.(event);
+    }
+  });
+
+  const hover = Gesture.Hover()
+    .onBegin((event) => {
+      setTimeout(
+        () => props.onHoverIn?.(event),
+        props.delayHoverIn ?? DEFAULT_HOVER_DELAY
+      );
+    })
+    .onEnd((event) => {
+      setTimeout(
+        () => props.onHoverOut?.(event),
+        props.delayHoverOut ?? DEFAULT_HOVER_DELAY
+      );
+    });
+
+  press.minDuration(props.delayLongPress ?? DEFAULT_LONG_PRESS_DURATION);
+
+  // onBlur and onFocus don't exist in the docs
+
+  touch.hitSlop(props.hitSlop);
+  press.hitSlop(props.hitSlop);
+  hover.hitSlop(props.hitSlop);
+
+  // add props.pressRetentionOffset, according to docs, they're relative to pressable, not hitSlop
+
+  touch.enabled(!(props.disabled ?? false));
+  press.enabled(!(props.disabled ?? false));
+  hover.enabled(!(props.disabled ?? false));
+
+  const gesture = Gesture.Simultaneous(hover, press, touch);
+
+  return (
+    <GestureHandlerRootView>
+      <GestureDetector gesture={gesture}>
+        <View
+          style={[
+            styles.container,
+            typeof props.style === 'function'
+              ? props.style({ pressed: false })
+              : props.style,
+          ]}>
+          {typeof props.children === 'function'
+            ? props.children({ pressed: false })
+            : props.children}
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 'auto',
+    height: 'auto',
+  },
+});

src/index.ts

@@ -158,6 +158,9 @@ export type {
 
 export type { SwipeableProps } from './components/Swipeable';
 export { default as Swipeable } from './components/Swipeable';
+export type { PressableProps } from './components/Pressable';
+export { default as Pressable } from './components/Pressable';
+
 export type {
   DrawerLayoutProps,
   DrawerPosition,