@amazon-devices/react-native-gesture-handler 2.0.1759135970 → 4.0.0

package/src/components/DrawerLayout.tsx

@@ -28,15 +28,14 @@ import {
   HandlerStateChangeEvent,
   UserSelect,
   ActiveCursor,
+  MouseButton,
 } from '../handlers/gestureHandlerCommon';
-import {
-  PanGestureHandler,
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+import type {
   PanGestureHandlerEventPayload,
-} from '../handlers/PanGestureHandler';
-import {
-  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/TapGestureHandler';
+} from '../handlers/GestureHandlerEventPayload';
+import { TapGestureHandler } from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -45,20 +44,39 @@ const IDLE: DrawerState = 'Idle';
 const DRAGGING: DrawerState = 'Dragging';
 const SETTLING: DrawerState = 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerPosition = 'left' | 'right';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerType = 'front' | 'back' | 'slide';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 // Animated.AnimatedInterpolation has been converted to a generic type
 // in @types/react-native 0.70. This way we can maintain compatibility
 // with all versions of @types/react-native`
 type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export interface DrawerLayoutProps {
   /**
    * This attribute is present in the standard implementation already and is one
@@ -155,10 +173,10 @@ export interface DrawerLayoutProps {
 
   onGestureRef?: (ref: PanGestureHandler) => void;
 
-  // implicit `children` prop has been removed in @types/react^18.0.0
+  // Implicit `children` prop has been removed in @types/react^18.0.0
   children?:
-    | React.ReactNode
-    | ((openValue?: AnimatedInterpolation) => React.ReactNode);
+  | React.ReactNode
+  | ((openValue?: AnimatedInterpolation) => React.ReactNode);
 
   /**
    * @default 'none'
@@ -173,8 +191,23 @@ export interface DrawerLayoutProps {
    * Values: see CSS cursor values
    */
   activeCursor?: ActiveCursor;
+
+  /**
+   * @default 'MouseButton.LEFT'
+   * Allows to choose which mouse button should underlying pan handler react to.
+   */
+  mouseButton?: MouseButton;
+
+  /**
+   * @default 'false if MouseButton.RIGHT is specified'
+   * Allows to enable/disable context menu.
+   */
+  enableContextMenu?: boolean;
 }
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerLayoutState = {
   dragX: Animated.Value;
   touchX: Animated.Value;
@@ -184,10 +217,17 @@ export type DrawerLayoutState = {
   drawerOpened: boolean;
 };
 
+/**
+ * @deprecated DrawerLayout is deprecated. Use Reanimated version of DrawerLayout instead.
+ */
 export type DrawerMovementOption = {
   velocity?: number;
   speed?: number;
 };
+
+/**
+ * @deprecated use Reanimated version of DrawerLayout instead
+ */
 export default class DrawerLayout extends Component<
   DrawerLayoutProps,
   DrawerLayoutState
@@ -240,8 +280,10 @@ export default class DrawerLayout extends Component<
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
-  private accessibilityIsModalView = React.createRef<View>();
-  private pointerEventsView = React.createRef<View>();
+  private accessibilityIsModalView =
+    React.createRef<React.ComponentRef<typeof View>>();
+  private pointerEventsView =
+    React.createRef<React.ComponentRef<typeof View>>();
   private panGestureHandler = React.createRef<PanGestureHandler | null>();
   private drawerShown = false;
 
@@ -508,7 +550,7 @@ export default class DrawerLayout extends Component<
         this.emitStateChanged(IDLE, willShow);
         this.setState({ drawerOpened: willShow });
         if (this.state.drawerState !== DRAGGING) {
-          // it's possilbe that user started drag while the drawer
+          // It's possilbe that user started drag while the drawer
           // was settling, don't override state in this case
           this.setState({ drawerState: IDLE });
         }
@@ -521,6 +563,7 @@ export default class DrawerLayout extends Component<
     });
   };
 
+  // eslint-disable-next-line @eslint-react/no-unused-class-component-members
   openDrawer = (options: DrawerMovementOption = {}) => {
     this.animateDrawer(
       // TODO: decide if it should be null or undefined is the proper value
@@ -590,7 +633,7 @@ export default class DrawerLayout extends Component<
     const drawerSlide = drawerType !== 'back';
     const containerSlide = drawerType !== 'front';
 
-    // we rely on row and row-reverse flex directions to position the drawer
+    // We rely on row and row-reverse flex directions to position the drawer
     // properly. Apparently for RTL these are flipped which requires us to use
     // the opposite setting for the drawer to appear from left or right
     // according to the drawerPosition prop
@@ -700,6 +743,8 @@ export default class DrawerLayout extends Component<
         // @ts-ignore could be fixed in handler types
         userSelect={this.props.userSelect}
         activeCursor={this.props.activeCursor}
+        mouseButton={this.props.mouseButton}
+        enableContextMenu={this.props.enableContextMenu}
         ref={this.setPanGestureRef}
         hitSlop={hitSlop}
         activeOffsetX={gestureOrientation * minSwipeDistance!}

package/src/components/GestureButtons.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  processColor,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import { Animated, Platform, processColor, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 import GestureHandlerButton from './GestureHandlerButton';
@@ -16,114 +9,26 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
-import {
-  NativeViewGestureHandlerPayload,
-  NativeViewGestureHandlerProps,
-} from '../handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps extends NativeViewGestureHandlerProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-}
-
-export interface BaseButtonProps extends RawButtonProps {
-  /**
-   * Called when the button gets pressed (analogous to `onPress` in
-   * `TouchableHighlight` from RN core).
-   */
-  onPress?: (pointerInside: boolean) => void;
-
-  /**
-   * Called when the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => void;
-
-  /**
-   * Called when button changes from inactive to active and vice versa. It
-   * passes active state as a boolean variable as a first parameter for that
-   * method.
-   */
-  onActiveStateChange?: (active: boolean) => void;
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-
-export interface RectButtonProps extends BaseButtonProps {
-  /**
-   * Background color that will be dimmed when button is in active state.
-   */
-  underlayColor?: string;
-
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the underlay when button is in active state.
-   */
-  activeOpacity?: number;
-}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
+import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
+import type {
+  BaseButtonWithRefProps,
+  BaseButtonProps,
+  RectButtonWithRefProps,
+  RectButtonProps,
+  BorderlessButtonWithRefProps,
+  BorderlessButtonProps,
+} from './GestureButtonsProps';
+import { isFabric } from '../utils';
 
 export const RawButton = createNativeWrapper(GestureHandlerButton, {
-  // @ts-ignore types not correct?
+  // @ts-ignore
   shouldCancelWhenOutside: Platform.OS === 'kepler',
   shouldActivateOnStart: false,
 });
 
-export class BaseButton extends React.Component<BaseButtonProps> {
+let IS_FABRIC: null | boolean = null;
+
+class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   static defaultProps = {
     delayLongPress: 600,
   };
@@ -132,7 +37,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
   private longPressDetected: boolean;
 
-  constructor(props: BaseButtonProps) {
+  constructor(props: BaseButtonWithRefProps) {
     super(props);
     this.lastActive = false;
     this.longPressDetected = false;
@@ -156,7 +61,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       this.lastActive &&
       this.props.onPress
     ) {
-      this.props.onPress(active);
+      this.props.onPress(pointerInside);
     }
 
     if (
@@ -173,7 +78,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
         );
       }
     } else if (
-      // cancel longpress timeout if it's set and the finger moved out of the view
+      // Cancel longpress timeout if it's set and the finger moved out of the view
       state === State.ACTIVE &&
       !pointerInside &&
       this.longPressTimeout !== undefined
@@ -181,7 +86,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       clearTimeout(this.longPressTimeout);
       this.longPressTimeout = undefined;
     } else if (
-      // cancel longpress timeout if it's set and the gesture has finished
+      // Cancel longpress timeout if it's set and the gesture has finished
       this.longPressTimeout !== undefined &&
       (state === State.END ||
         state === State.CANCELLED ||
@@ -220,11 +125,21 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   };
 
   render() {
-    const { rippleColor, ...rest } = this.props;
+    const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
+
+    if (IS_FABRIC === null) {
+      IS_FABRIC = isFabric();
+    }
+
+    const rippleColor = IS_FABRIC
+      ? unprocessedRippleColor
+      : processColor(unprocessedRippleColor ?? undefined);
 
     return (
       <RawButton
-        rippleColor={processColor(rippleColor)}
+        ref={this.props.innerRef}
+        rippleColor={rippleColor}
+        style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}
@@ -233,7 +148,18 @@ export class BaseButton extends React.Component<BaseButtonProps> {
   }
 }
 
-const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+const AnimatedInnerBaseButton =
+  Animated.createAnimatedComponent<typeof InnerBaseButton>(InnerBaseButton);
+
+export const BaseButton = React.forwardRef<
+  React.ComponentType,
+  Omit<BaseButtonProps, 'innerRef'>
+>((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);
+
+const AnimatedBaseButton = React.forwardRef<
+  React.ComponentType,
+  Animated.AnimatedProps<BaseButtonWithRefProps>
+>((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
 
 const btnStyles = StyleSheet.create({
   underlay: {
@@ -245,7 +171,7 @@ const btnStyles = StyleSheet.create({
   },
 });
 
-export class RectButton extends React.Component<RectButtonProps> {
+class InnerRectButton extends React.Component<RectButtonWithRefProps> {
   static defaultProps = {
     activeOpacity: 0.105,
     underlayColor: 'black',
@@ -253,7 +179,7 @@ export class RectButton extends React.Component<RectButtonProps> {
 
   private opacity: Animated.Value;
 
-  constructor(props: RectButtonProps) {
+  constructor(props: RectButtonWithRefProps) {
     super(props);
     this.opacity = new Animated.Value(0);
   }
@@ -269,11 +195,12 @@ export class RectButton extends React.Component<RectButtonProps> {
   render() {
     const { children, style, ...rest } = this.props;
 
-    const resolvedStyle = StyleSheet.flatten(style ?? {});
+    const resolvedStyle = StyleSheet.flatten(style) ?? {};
 
     return (
       <BaseButton
         {...rest}
+        ref={this.props.innerRef}
         style={resolvedStyle}
         onActiveStateChange={this.onActiveStateChange}>
         <Animated.View
@@ -296,7 +223,12 @@ export class RectButton extends React.Component<RectButtonProps> {
   }
 }
 
-export class BorderlessButton extends React.Component<BorderlessButtonProps> {
+export const RectButton = React.forwardRef<
+  React.ComponentType,
+  Omit<RectButtonProps, 'innerRef'>
+>((props, ref) => <InnerRectButton innerRef={ref} {...props} />);
+
+class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
   static defaultProps = {
     activeOpacity: 0.3,
     borderless: true,
@@ -304,7 +236,7 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
 
   private opacity: Animated.Value;
 
-  constructor(props: BorderlessButtonProps) {
+  constructor(props: BorderlessButtonWithRefProps) {
     super(props);
     this.opacity = new Animated.Value(1);
   }
@@ -318,11 +250,12 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
   };
 
   render() {
-    const { children, style, ...rest } = this.props;
+    const { children, style, innerRef, ...rest } = this.props;
 
     return (
       <AnimatedBaseButton
         {...rest}
+        innerRef={innerRef}
         onActiveStateChange={this.onActiveStateChange}
         style={[style, Platform.OS === 'ios' && { opacity: this.opacity }]}>
         {children}
@@ -331,4 +264,9 @@ export class BorderlessButton extends React.Component<BorderlessButtonProps> {
   }
 }
 
+export const BorderlessButton = React.forwardRef<
+  React.ComponentType,
+  Omit<BorderlessButtonProps, 'innerRef'>
+>((props, ref) => <InnerBorderlessButton innerRef={ref} {...props} />);
+
 export { default as PureNativeButton } from './GestureHandlerButton';

package/src/components/GestureButtonsProps.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+  AccessibilityProps,
+  ColorValue,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+
+export interface RawButtonProps
+  extends NativeViewGestureHandlerProps,
+    AccessibilityProps {
+  /**
+   * Defines if more than one button could be pressed simultaneously. By default
+   * set true.
+   */
+  exclusive?: boolean;
+  // TODO: we should transform props in `createNativeWrapper`
+  /**
+   * Android only.
+   *
+   * Defines color of native ripple animation used since API level 21.
+   */
+  rippleColor?: number | ColorValue | null;
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you don't want the system to play sound when the button is pressed.
+   */
+  touchSoundDisabled?: boolean;
+
+  /**
+   * Style object, use it to set additional styles.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Invoked on mount and layout changes.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPress?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressIn?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressOut?: Function | null;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onLongPress?: Function | null;
+}
+interface ButtonWithRefProps {
+  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
+}
+
+export interface BaseButtonProps extends RawButtonProps {
+  /**
+   * Called when the button gets pressed (analogous to `onPress` in
+   * `TouchableHighlight` from RN core).
+   */
+  onPress?: (pointerInside: boolean) => void;
+
+  /**
+   * Called when the button gets pressed and is held for `delayLongPress`
+   * milliseconds.
+   */
+  onLongPress?: () => void;
+
+  /**
+   * Called when button changes from inactive to active and vice versa. It
+   * passes active state as a boolean variable as a first parameter for that
+   * method.
+   */
+  onActiveStateChange?: (active: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+
+  /**
+   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
+   * Defaults to 600.
+   */
+  delayLongPress?: number;
+}
+export interface BaseButtonWithRefProps
+  extends BaseButtonProps,
+    ButtonWithRefProps {}
+
+export interface RectButtonProps extends BaseButtonProps {
+  /**
+   * Background color that will be dimmed when button is in active state.
+   */
+  underlayColor?: string;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the underlay when button is in active state.
+   */
+  activeOpacity?: number;
+}
+export interface RectButtonWithRefProps
+  extends RectButtonProps,
+    ButtonWithRefProps {}
+
+export interface BorderlessButtonProps extends BaseButtonProps {
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
+  activeOpacity?: number;
+}
+export interface BorderlessButtonWithRefProps
+  extends BorderlessButtonProps,
+    ButtonWithRefProps {}

package/src/components/GestureComponents.tsx

@@ -59,15 +59,15 @@ export const ScrollView = React.forwardRef<
       refreshControl={
         refreshControl
           ? React.cloneElement(refreshControl, {
-              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-              ref: refreshControlGestureRef,
-            })
+            // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+            ref: refreshControlGestureRef,
+          })
           : undefined
       }
     />
   );
 });
-// backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
+// Backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
 // include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type ScrollView = typeof GHScrollView & RNScrollView;
@@ -129,20 +129,20 @@ export const FlatList = React.forwardRef((props, ref) => {
       refreshControl={
         refreshControl
           ? React.cloneElement(refreshControl, {
-              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-              ref: refreshControlGestureRef,
-            })
+            // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+            ref: refreshControlGestureRef,
+          })
           : undefined
       }
     />
   );
 }) as <ItemT = any>(
   props: PropsWithChildren<
-    RNFlatListProps<ItemT> &
-      RefAttributes<FlatList<ItemT>> &
-      NativeViewGestureHandlerProps
+    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
+    RefAttributes<FlatList<ItemT>> &
+    NativeViewGestureHandlerProps
   >,
-  ref: ForwardedRef<FlatList<ItemT>>
+  ref?: ForwardedRef<FlatList<ItemT>>
 ) => ReactElement | null;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/components/GestureComponents.web.tsx

@@ -31,7 +31,7 @@ export const DrawerLayoutAndroid = () => {
 export const RefreshControl = createNativeWrapper(View);
 
 export const FlatList = React.forwardRef(
-  <ItemT extends any>(props: FlatListProps<ItemT>, ref: any) => (
+  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
     <RNFlatList
       ref={ref}
       {...props}

package/src/components/GestureHandlerButton.tsx

@@ -1,5 +1,5 @@
 import { HostComponent } from 'react-native';
-import { RawButtonProps } from './GestureButtons';
+import type { RawButtonProps } from './GestureButtonsProps';
 import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
 
 export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-export default React.forwardRef<View>((props, ref) => (
-  <View ref={ref} accessibilityRole="button" {...props} />
-));
+export default React.forwardRef<React.ComponentRef<typeof View>>(
+  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
+);