react-native-gesture-handler 3.0.0-beta.1 → 3.0.0-beta.3

package/src/jestUtils/jestUtils.ts

@@ -1,33 +1,16 @@
 import invariant from 'invariant';
 import { DeviceEventEmitter } from 'react-native';
-import { ReactTestInstance } from 'react-test-renderer';
-import {
-  FlingGestureHandler,
-  flingHandlerName,
-} from '../handlers/FlingGestureHandler';
-import {
-  ForceTouchGestureHandler,
-  forceTouchHandlerName,
-} from '../handlers/ForceTouchGestureHandler';
-import {
+import type { ReactTestInstance } from 'react-test-renderer';
+
+import type { FlingGestureHandler } from '../handlers/FlingGestureHandler';
+import { flingHandlerName } from '../handlers/FlingGestureHandler';
+import type { ForceTouchGestureHandler } from '../handlers/ForceTouchGestureHandler';
+import { forceTouchHandlerName } from '../handlers/ForceTouchGestureHandler';
+import type {
   BaseGestureHandlerProps,
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
-import { FlingGesture } from '../handlers/gestures/flingGesture';
-import { ForceTouchGesture } from '../handlers/gestures/forceTouchGesture';
-import { BaseGesture, GestureType } from '../handlers/gestures/gesture';
-import { LongPressGesture } from '../handlers/gestures/longPressGesture';
-import { NativeGesture } from '../handlers/gestures/nativeGesture';
-import { PanGesture } from '../handlers/gestures/panGesture';
-import { PinchGesture } from '../handlers/gestures/pinchGesture';
-import { RotationGesture } from '../handlers/gestures/rotationGesture';
-import { TapGesture } from '../handlers/gestures/tapGesture';
-import { findHandlerByTestID } from '../handlers/handlersRegistry';
-import {
-  LongPressGestureHandler,
-  longPressHandlerName,
-} from '../handlers/LongPressGestureHandler';
 import type {
   FlingGestureHandlerEventPayload,
   ForceTouchGestureHandlerEventPayload,
@@ -38,30 +21,33 @@ import type {
   RotationGestureHandlerEventPayload,
   TapGestureHandlerEventPayload,
 } from '../handlers/GestureHandlerEventPayload';
-import {
-  NativeViewGestureHandler,
-  nativeViewHandlerName,
-} from '../handlers/NativeViewGestureHandler';
-import {
-  PanGestureHandler,
-  panHandlerName,
-} from '../handlers/PanGestureHandler';
-import {
-  PinchGestureHandler,
-  pinchHandlerName,
-} from '../handlers/PinchGestureHandler';
-import {
-  RotationGestureHandler,
-  rotationHandlerName,
-} from '../handlers/RotationGestureHandler';
-import {
-  TapGestureHandler,
-  tapHandlerName,
-} from '../handlers/TapGestureHandler';
+import type { FlingGesture } from '../handlers/gestures/flingGesture';
+import type { ForceTouchGesture } from '../handlers/gestures/forceTouchGesture';
+import type { GestureType } from '../handlers/gestures/gesture';
+import { BaseGesture } from '../handlers/gestures/gesture';
+import type { LongPressGesture } from '../handlers/gestures/longPressGesture';
+import type { NativeGesture } from '../handlers/gestures/nativeGesture';
+import type { PanGesture } from '../handlers/gestures/panGesture';
+import type { PinchGesture } from '../handlers/gestures/pinchGesture';
+import type { RotationGesture } from '../handlers/gestures/rotationGesture';
+import type { TapGesture } from '../handlers/gestures/tapGesture';
+import { findHandlerByTestID } from '../handlers/handlersRegistry';
+import type { LongPressGestureHandler } from '../handlers/LongPressGestureHandler';
+import { longPressHandlerName } from '../handlers/LongPressGestureHandler';
+import type { NativeViewGestureHandler } from '../handlers/NativeViewGestureHandler';
+import { nativeViewHandlerName } from '../handlers/NativeViewGestureHandler';
+import type { PanGestureHandler } from '../handlers/PanGestureHandler';
+import { panHandlerName } from '../handlers/PanGestureHandler';
+import type { PinchGestureHandler } from '../handlers/PinchGestureHandler';
+import { pinchHandlerName } from '../handlers/PinchGestureHandler';
+import type { RotationGestureHandler } from '../handlers/RotationGestureHandler';
+import { rotationHandlerName } from '../handlers/RotationGestureHandler';
+import type { TapGestureHandler } from '../handlers/TapGestureHandler';
+import { tapHandlerName } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 import { hasProperty, withPrevAndCurrent } from '../utils';
-import type { SingleGesture } from '../v3/types';
 import { maybeUnpackValue } from '../v3/hooks/utils';
+import type { SingleGesture } from '../v3/types';
 
 // Load fireEvent conditionally, so RNGH may be used in setups without testing-library
 let fireEvent = (
@@ -166,14 +152,17 @@ const handlersDefaultEvents: DefaultEventsMapping = {
 };
 
 function isGesture(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): componentOrGesture is GestureType {
   return componentOrGesture instanceof BaseGesture;
 }
 
 function isHookGesture(
-  componentOrGesture: ReactTestInstance | SingleGesture<any, any>
-): componentOrGesture is SingleGesture<any, any> {
+  componentOrGesture: ReactTestInstance | SingleGesture<any, any, any>
+): componentOrGesture is SingleGesture<any, any, any> {
   return 'detectorCallbacks' in componentOrGesture;
 }
 
@@ -416,7 +405,10 @@ interface HandlerData {
   enabled: boolean | undefined;
 }
 function getHandlerData(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>
 ): HandlerData {
   if (isGesture(componentOrGesture)) {
     const gesture = componentOrGesture;
@@ -500,7 +492,10 @@ type ExtractConfig<T> =
       : Record<string, unknown>;
 
 export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
-  componentOrGesture: ReactTestInstance | GestureType | SingleGesture<any, any>,
+  componentOrGesture:
+    | ReactTestInstance
+    | GestureType
+    | SingleGesture<any, any, any>,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
   const { emitEvent, handlerType, handlerTag, enabled } =

package/src/mocks/GestureButtons.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { TouchableNativeFeedback, View } from 'react-native';
-export const RawButton = ({ enabled, ...rest }: any) => (
+
+const RawButton = ({ enabled, children, ...rest }: any) => (
   <TouchableNativeFeedback disabled={enabled === false} {...rest}>
-    <View />
+    {children ?? <View />}
   </TouchableNativeFeedback>
 );
-export const BaseButton = RawButton;
-export const RectButton = RawButton;
-export const BorderlessButton = TouchableNativeFeedback;
+
+export const LegacyRawButton = RawButton;
+export const LegacyBaseButton = RawButton;
+export const LegacyRectButton = RawButton;
+export const LegacyBorderlessButton = RawButton;
+export const LegacyPureNativeButton = RawButton;

package/src/mocks/Touchables.tsx

@@ -0,0 +1,6 @@
+export {
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';

package/src/mocks/gestureComponents.tsx

@@ -1,23 +1,8 @@
-import {
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  ScrollView,
-  FlatList,
-  Switch,
-  TextInput,
-  DrawerLayoutAndroid,
+export {
+  DrawerLayoutAndroid as LegacyDrawerLayoutAndroid,
+  FlatList as LegacyFlatList,
+  RefreshControl as LegacyRefreshControl,
+  ScrollView as LegacyScrollView,
+  Switch as LegacySwitch,
+  TextInput as LegacyTextInput,
 } from 'react-native';
-
-export default {
-  TouchableHighlight,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  ScrollView,
-  FlatList,
-  Switch,
-  TextInput,
-  DrawerLayoutAndroid,
-} as const;

package/src/mountRegistry.ts

@@ -1,4 +1,4 @@
-import { GestureType } from './handlers/gestures/gesture';
+import type { GestureType } from './handlers/gestures/gesture';
 
 interface ReactComponentWithHandlerTag extends React.Component {
   handlerTag: number;

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -1,5 +1,6 @@
-import { TurboModuleRegistry, TurboModule } from 'react-native';
-import { Double } from 'react-native/Libraries/Types/CodegenTypes';
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Spec extends TurboModule {
   // This method returns a boolean only to force the codegen to generate

package/src/specs/RNGestureHandlerButtonNativeComponent.ts

@@ -1,10 +1,10 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ColorValue, ViewProps } from 'react-native';
 import type {
+  Float,
   Int32,
   WithDefault,
-  Float,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps, ColorValue } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 // @ts-ignore - Redefining pointerEvents with WithDefault for codegen, conflicts with ViewProps type but codegen needs it
 interface NativeProps extends ViewProps {
@@ -15,13 +15,56 @@ interface NativeProps extends ViewProps {
   rippleColor?: ColorValue;
   rippleRadius?: Int32;
   touchSoundDisabled?: WithDefault<boolean, false>;
-  borderWidth?: Float;
-  borderColor?: ColorValue;
-  borderStyle?: WithDefault<string, 'solid'>;
   pointerEvents?: WithDefault<
     'box-none' | 'none' | 'box-only' | 'auto',
     'auto'
   >;
+  pressAndHoldAnimationDuration?: WithDefault<Int32, -1>;
+  tapAnimationDuration?: WithDefault<Int32, 100>;
+  activeOpacity?: WithDefault<Float, 1>;
+  activeScale?: WithDefault<Float, 1>;
+  activeUnderlayOpacity?: WithDefault<Float, 0>;
+  defaultOpacity?: WithDefault<Float, 1>;
+  defaultScale?: WithDefault<Float, 1>;
+  defaultUnderlayOpacity?: WithDefault<Float, 0>;
+  underlayColor?: ColorValue;
+
+  // Border style
+  borderWidth?: Float;
+  borderColor?: ColorValue;
+  borderStyle?: WithDefault<string, 'solid'>;
+  overflow?: WithDefault<string, 'visible'>;
+
+  // Border width per-edge
+  borderLeftWidth?: Float;
+  borderRightWidth?: Float;
+  borderTopWidth?: Float;
+  borderBottomWidth?: Float;
+  borderStartWidth?: Float;
+  borderEndWidth?: Float;
+
+  // Border color per-edge
+  borderLeftColor?: ColorValue;
+  borderRightColor?: ColorValue;
+  borderTopColor?: ColorValue;
+  borderBottomColor?: ColorValue;
+  borderStartColor?: ColorValue;
+  borderEndColor?: ColorValue;
+  borderBlockColor?: ColorValue;
+  borderBlockEndColor?: ColorValue;
+  borderBlockStartColor?: ColorValue;
+
+  // Border radius — logical variants beyond what ViewProps provides
+  // WithDefault -1 so the codegen sends -1 (our "unset" sentinel) instead of 0
+  // when the prop is absent, letting physical / general radii take effect.
+  borderTopStartRadius?: WithDefault<Float, -1>;
+  borderTopEndRadius?: WithDefault<Float, -1>;
+  borderBottomStartRadius?: WithDefault<Float, -1>;
+  borderBottomEndRadius?: WithDefault<Float, -1>;
+  borderEndEndRadius?: WithDefault<Float, -1>;
+  borderEndStartRadius?: WithDefault<Float, -1>;
+  borderStartEndRadius?: WithDefault<Float, -1>;
+  borderStartStartRadius?: WithDefault<Float, -1>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -1,12 +1,12 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
 import type {
-  Int32,
   DirectEventHandler,
-  UnsafeMixed,
   Double,
+  Int32,
+  UnsafeMixed,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 type GestureHandlerEvent = Readonly<{
   handlerTag: Int32;
@@ -51,13 +51,25 @@ export interface VirtualChildrenProps {
 // @ts-expect-error WithDefault adds `| null` to the type, which doesn't align with ViewProps.pointerEvents
 // Using Exclude to remove null from the type makes the error go away, but breaks codegen.
 export interface NativeProps extends ViewProps {
-  onGestureHandlerEvent?: DirectEventHandler<GestureHandlerEvent>;
-  onGestureHandlerStateChange?: DirectEventHandler<GestureHandlerStateChangeEvent>;
-  onGestureHandlerTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
-  onGestureHandlerReanimatedEvent?: DirectEventHandler<GestureHandlerEvent>;
-  onGestureHandlerReanimatedStateChange?: DirectEventHandler<GestureHandlerStateChangeEvent>;
-  onGestureHandlerReanimatedTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
-  onGestureHandlerAnimatedEvent?: DirectEventHandler<GestureHandlerEvent>;
+  onGestureHandlerEvent?: DirectEventHandler<GestureHandlerEvent> | undefined;
+  onGestureHandlerStateChange?:
+    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | undefined;
+  onGestureHandlerTouchEvent?:
+    | DirectEventHandler<GestureHandlerTouchEvent>
+    | undefined;
+  onGestureHandlerReanimatedEvent?:
+    | DirectEventHandler<GestureHandlerEvent>
+    | undefined;
+  onGestureHandlerReanimatedStateChange?:
+    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | undefined;
+  onGestureHandlerReanimatedTouchEvent?:
+    | DirectEventHandler<GestureHandlerTouchEvent>
+    | undefined;
+  onGestureHandlerAnimatedEvent?:
+    | DirectEventHandler<GestureHandlerEvent>
+    | undefined;
 
   handlerTags: Int32[];
   moduleId: Int32;

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,6 +1,6 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 import type { ViewProps } from 'react-native';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 // Publicly accessible type, moduleId is set internally
 export interface RootViewNativeProps extends ViewProps {

package/src/useIsScreenReaderEnabled.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export function useIsScreenReaderEnabled() {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const res = await AccessibilityInfo.isScreenReaderEnabled();
+        setIsEnabled(res);
+      } catch (error) {
+        console.warn('Could not read accessibility info: defaulting to false');
+      }
+    };
+
+    checkStatus();
+
+    const listener = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      (enabled) => {
+        setIsEnabled(enabled);
+      }
+    );
+
+    return () => {
+      listener.remove();
+    };
+  }, []);
+  return isEnabled;
+}

package/src/v3/NativeProxy.ts

@@ -1,6 +1,6 @@
 import { scheduleOperationToBeFlushed } from '../handlers/utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import {
+import type {
   BaseGestureConfig,
   GestureRelations,
   SingleGestureName,
@@ -22,9 +22,13 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     scheduleOperationToBeFlushed(() => {
       RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
@@ -33,9 +37,13 @@ export const NativeProxy = {
   // updateGestureHandlerConfig can be called on the UI thread when using
   // SharedValue binding. Therefore, it needs to be a worklet and we flush
   // immediately since we're likely already on the UI thread.
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     'worklet';
     updateGestureHandlerConfig(handlerTag, newConfig);

package/src/v3/NativeProxy.web.ts

@@ -1,5 +1,5 @@
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import {
+import type {
   BaseGestureConfig,
   GestureRelations,
   SingleGestureName,
@@ -17,15 +17,23 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
   },
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.updateGestureHandlerConfig(handlerTag, newConfig);
   },

package/src/v3/components/GestureButtons.tsx

@@ -1,23 +1,34 @@
 import React, { useRef } from 'react';
-import { Platform, StyleSheet, Animated } from 'react-native';
-import createNativeWrapper from '../createNativeWrapper';
+import { Animated, Platform, StyleSheet } from 'react-native';
+
 import GestureHandlerButton from '../../components/GestureHandlerButton';
+import createNativeWrapper from '../createNativeWrapper';
+import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
+import type { GestureEndEvent, GestureEvent } from '../types';
 import type {
   BaseButtonProps,
   BorderlessButtonProps,
+  RawButtonProps,
   RectButtonProps,
 } from './GestureButtonsProps';
 
-import type { GestureEvent } from '../types';
-import type { NativeViewHandlerData } from '../hooks/gestures/native/useNativeGesture';
-
-type CallbackEventType = GestureEvent<NativeViewHandlerData>;
+type CallbackEventType = GestureEvent<NativeHandlerData>;
+type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
 
-export const RawButton = createNativeWrapper(GestureHandlerButton, {
+/**
+ * @deprecated `RawButton` is deprecated, use `Clickable` instead
+ */
+export const RawButton = createNativeWrapper<
+  React.ComponentRef<typeof GestureHandlerButton>,
+  RawButtonProps
+>(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
-  shouldActivateOnStart: false,
+  shouldActivateOnStart: true,
 });
 
+/**
+ * @deprecated `BaseButton` is deprecated, use `Touchable` instead
+ */
 export const BaseButton = (props: BaseButtonProps) => {
   const longPressDetected = useRef(false);
   const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -34,43 +45,46 @@ export const BaseButton = (props: BaseButtonProps) => {
   };
 
   const onBegin = (e: CallbackEventType) => {
-    if (Platform.OS === 'android' && e.pointerInside) {
-      longPressDetected.current = false;
-      if (onLongPress) {
-        longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
-      }
+    if (!e.pointerInside) {
+      return;
     }
-  };
 
-  const onActivate = (e: CallbackEventType) => {
     onActiveStateChange?.(true);
 
-    if (Platform.OS !== 'android' && e.pointerInside) {
-      longPressDetected.current = false;
-      if (onLongPress) {
-        longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
-      }
+    longPressDetected.current = false;
+    if (onLongPress) {
+      longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
     }
 
+    props.onBegin?.(e);
+  };
+
+  const onActivate = (e: CallbackEventType) => {
     if (!e.pointerInside && longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;
     }
+
+    props.onActivate?.(e);
   };
 
-  const onDeactivate = (e: CallbackEventType, success: boolean) => {
+  const onDeactivate = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
-    if (success && !longPressDetected.current) {
+    if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
+
+    props.onDeactivate?.(e);
   };
 
-  const onFinalize = (_e: CallbackEventType) => {
+  const onFinalize = (e: EndCallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;
     }
+
+    props.onFinalize?.(e);
   };
 
   return (
@@ -97,9 +111,17 @@ const btnStyles = StyleSheet.create({
   },
 });
 
+/**
+ * @deprecated `RectButton` is deprecated, use `Touchable` with `activeUnderlayOpacity={0.7}` instead
+ */
 export const RectButton = (props: RectButtonProps) => {
-  const activeOpacity = props.activeOpacity ?? 0.105;
-  const underlayColor = props.underlayColor ?? 'black';
+  const {
+    children,
+    style,
+    activeOpacity = 0.105,
+    underlayColor = 'black',
+    ...rest
+  } = props;
 
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -111,8 +133,6 @@ export const RectButton = (props: RectButtonProps) => {
     props.onActiveStateChange?.(active);
   };
 
-  const { children, style, ...rest } = props;
-
   const resolvedStyle = StyleSheet.flatten(style ?? {});
 
   return (
@@ -139,6 +159,9 @@ export const RectButton = (props: RectButtonProps) => {
   );
 };
 
+/**
+ * @deprecated `BorderlessButton` is deprecated, use `Touchable` with `activeOpacity={0.3}` instead
+ */
 export const BorderlessButton = (props: BorderlessButtonProps) => {
   const activeOpacity = props.activeOpacity ?? 0.3;
   const opacity = useRef(new Animated.Value(1)).current;
@@ -151,11 +174,12 @@ export const BorderlessButton = (props: BorderlessButtonProps) => {
     props.onActiveStateChange?.(active);
   };
 
-  const { children, style, ...rest } = props;
+  const { children, style, ref, ...rest } = props;
 
   return (
     <AnimatedBaseButton
       {...rest}
+      ref={ref ?? null}
       onActiveStateChange={onActiveStateChange}
       style={[style, Platform.OS === 'ios' && { opacity }]}>
       {children}