react-native-gesture-handler 3.1.0 → 3.2.0-nightly-20260720-9c6135950

package/src/components/GestureButtons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { HostComponent } from 'react-native';
+import type { HostComponent, ViewStyle } from 'react-native';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -134,13 +134,12 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   };
 
   override render() {
-    const { rippleColor, style, ...rest } = this.props;
+    const { rippleColor, ...rest } = this.props;
 
     return (
       <LegacyRawButton
         ref={this.props.innerRef}
         rippleColor={rippleColor}
-        style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}
@@ -216,15 +215,15 @@ class InnerRectButton extends React.Component<RectButtonWithRefProps> {
         <Animated.View
           style={[
             btnStyles.underlay,
+            { opacity: this.opacity },
             {
-              opacity: this.opacity,
               backgroundColor: this.props.underlayColor,
               borderRadius: resolvedStyle.borderRadius,
               borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
               borderTopRightRadius: resolvedStyle.borderTopRightRadius,
               borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
               borderBottomRightRadius: resolvedStyle.borderBottomRightRadius,
-            },
+            } as ViewStyle,
           ]}
         />
         {children}
@@ -294,6 +293,13 @@ export const LegacyBorderlessButton = ({
 /**
  * @deprecated use `PureNativeButton` instead
  */
-export const LegacyPureNativeButton = (
-  props: Omit<ButtonProps, 'needsOffscreenAlphaCompositing'>
-) => <GestureHandlerButton {...props} needsOffscreenAlphaCompositing />;
+export const LegacyPureNativeButton = ({
+  ref,
+  ...props
+}: Omit<ButtonProps, 'needsOffscreenAlphaCompositing'>) => (
+  <GestureHandlerButton
+    {...props}
+    ref={ref as React.Ref<React.ComponentRef<typeof GestureHandlerButton>>}
+    needsOffscreenAlphaCompositing
+  />
+);

package/src/components/GestureComponents.tsx

@@ -47,15 +47,16 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 export const LegacyScrollView = (
   props: RNScrollViewProps &
     NativeViewGestureHandlerProps & {
-      ref?: React.Ref<RNScrollView | null>;
+      ref?: React.Ref<React.ComponentRef<typeof RNScrollView> | null>;
     }
 ) => {
   const refreshControlGestureRef = React.useRef<LegacyRefreshControl>(null);
-  const { refreshControl, waitFor, ...rest } = props;
+  const { refreshControl, waitFor, ref, ...rest } = props;
 
   return (
     <GHScrollView
       {...rest}
+      ref={ref as React.Ref<React.ComponentType<any> | null>}
       waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
@@ -73,7 +74,8 @@ export const LegacyScrollView = (
 // 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 LegacyScrollView = typeof GHScrollView & RNScrollView;
+export type LegacyScrollView = typeof GHScrollView &
+  React.ComponentRef<typeof RNScrollView>;
 
 /**
  * @deprecated use `Switch` instead
@@ -97,9 +99,12 @@ export type LegacyTextInput = typeof LegacyTextInput & RNTextInput;
 /**
  * @deprecated use `DrawerLayoutAndroid` instead
  */
-export const LegacyDrawerLayoutAndroid = createNativeWrapper<
-  PropsWithChildren<RNDrawerLayoutAndroidProps>
->(RNDrawerLayoutAndroid, { disallowInterruption: true });
+export const LegacyDrawerLayoutAndroid: React.ComponentType<
+  PropsWithChildren<RNDrawerLayoutAndroidProps> & NativeViewGestureHandlerProps
+> = createNativeWrapper<PropsWithChildren<RNDrawerLayoutAndroidProps>>(
+  RNDrawerLayoutAndroid,
+  { disallowInterruption: true }
+);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type LegacyDrawerLayoutAndroid = typeof LegacyDrawerLayoutAndroid &
   RNDrawerLayoutAndroid;

package/src/components/Pressable/Pressable.tsx

@@ -68,6 +68,7 @@ const LegacyPressable = (props: LegacyPressableProps) => {
     simultaneousWithExternalGesture,
     requireExternalGestureToFail,
     blocksExternalGesture,
+    ref,
     ...remainingProps
   } = props;
 
@@ -385,6 +386,7 @@ const LegacyPressable = (props: LegacyPressableProps) => {
     <GestureDetector gesture={gesture}>
       <NativeButton
         {...remainingProps}
+        ref={ref as React.Ref<React.ComponentRef<typeof NativeButton>>}
         needsOffscreenAlphaCompositing
         onLayout={setDimensions}
         accessible={accessible !== false}

package/src/components/Pressable/PressableProps.tsx

@@ -109,7 +109,7 @@ interface CommonPressableProps
   /**
    * A reference to the pressable element.
    */
-  ref?: React.Ref<View>;
+  ref?: React.Ref<React.ComponentRef<typeof View>>;
 
   /**
    * Either children or a render prop that receives a boolean reflecting whether

package/src/components/ReanimatedDrawerLayout.tsx

@@ -596,8 +596,10 @@ const DrawerLayout = function DrawerLayout(
   const reverseContentDirection = I18nManager.isRTL ? isFromLeft : !isFromLeft;
 
   const dynamicDrawerStyles = {
-    backgroundColor: drawerBackgroundColor,
     width: drawerWidth,
+    ...(drawerBackgroundColor !== undefined && {
+      backgroundColor: drawerBackgroundColor,
+    }),
   };
 
   const containerStyles = useAnimatedStyle(() => {

package/src/components/Text.tsx

@@ -9,7 +9,7 @@ import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 type TextProps = RNTextProps & {
   ref?: Ref<ComponentRef<typeof RNText> | null>;
 };
-type RNGHTextRef = Ref<RNText | null> & { rngh?: boolean };
+type RNGHTextRef = Ref<ComponentRef<typeof RNText> | null> & { rngh?: boolean };
 
 /**
  * @deprecated `LegacyText` is deprecated. Since Gesture Handler 3, you should wrap `Text` with `GestureDetector`, `InterceptingGestureDetector`, or `VirtualGestureDetector`.
@@ -17,11 +17,11 @@ type RNGHTextRef = Ref<RNText | null> & { rngh?: boolean };
 export const LegacyText = (props: TextProps) => {
   const { onPress, onLongPress, ref, ...rest } = props;
 
-  const textRef = useRef<RNText | null>(null);
+  const textRef = useRef<ComponentRef<typeof RNText> | null>(null);
   const native = useMemo(() => Gesture.Native().runOnJS(true), []);
 
   const refHandler = useMemo(() => {
-    const handler: RNGHTextRef = (node: RNText | null) => {
+    const handler: RNGHTextRef = (node: ComponentRef<typeof RNText> | null) => {
       textRef.current = node;
 
       if (!ref) {

package/src/components/touchables/TouchableHighlight.tsx

@@ -4,8 +4,9 @@ import type {
   ColorValue,
   TouchableHighlightProps as RNTouchableHighlightProps,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 
 import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
 import type { GenericTouchableProps } from './GenericTouchableProps';
@@ -88,7 +89,9 @@ export default class TouchableHighlight extends Component<
       this.props.children
     ) as React.ReactElement<ViewProps>; // TODO: not sure if OK but fixes error
     return React.cloneElement(child, {
-      style: StyleSheet.compose(child.props.style, this.state.extraChildStyle),
+      style: this.state.extraChildStyle
+        ? [child.props.style, this.state.extraChildStyle as ViewStyle]
+        : child.props.style,
     });
   }
 
@@ -109,7 +112,7 @@ export default class TouchableHighlight extends Component<
     return (
       <GenericTouchable
         {...rest}
-        style={[style, extraUnderlayStyle]}
+        style={[style, extraUnderlayStyle as ViewStyle]}
         onStateChange={this.onStateChange}>
         {this.renderChildren()}
       </GenericTouchable>

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -43,7 +43,12 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
     color: ColorValue,
     borderless: boolean,
     rippleRadius?: number
-  ) => ({
+  ): {
+    type: 'RippleAndroid';
+    color: ColorValue;
+    borderless: boolean;
+    rippleRadius: number | undefined;
+  } => ({
     type: 'RippleAndroid',
     color,
     borderless,
@@ -61,7 +66,8 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
       // TODO(TS): check if it works the same as previous implementation - looks like it works the same as RN component, so it should be ok
       if (background.type === 'RippleAndroid') {
         extraProps['borderless'] = background.borderless;
-        extraProps['rippleColor'] = background.color;
+        extraProps['rippleColor'] =
+          background.color as TouchableNativeFeedbackExtraProps['rippleColor'];
       } else if (background.type === 'ThemeAttrAndroid') {
         extraProps['borderless'] =
           background.attribute === 'selectableItemBackgroundBorderless';

package/src/handlers/gestures/reanimatedWrapper.ts

@@ -1,4 +1,4 @@
-import type { ComponentClass } from 'react';
+import type { ComponentClass, ComponentType } from 'react';
 
 import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 import { tagMessage } from '../../utils';
@@ -50,7 +50,7 @@ let Reanimated:
       default: {
         // Slightly modified definition copied from 'react-native-reanimated'
         createAnimatedComponent<P extends object>(
-          component: ComponentClass<P>,
+          component: ComponentType<P>,
           options?: unknown
         ): ComponentClass<P>;
       };

package/src/specs/NativeRNGestureHandlerModule.ts

@@ -1,27 +1,38 @@
-import type { TurboModule } from 'react-native';
+import type { CodegenTypes, TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
-import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface Spec extends TurboModule {
   createGestureHandler: (
     handlerName: string,
-    handlerTag: Double,
+    handlerTag: CodegenTypes.Double,
     // Record<> is not supported by codegen
     // eslint-disable-next-line @typescript-eslint/ban-types
     config: Object
   ) => void;
   attachGestureHandler: (
-    handlerTag: Double,
-    newView: Double,
-    actionType: Double
+    handlerTag: CodegenTypes.Double,
+    newView: CodegenTypes.Double,
+    actionType: CodegenTypes.Double
   ) => void;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  setGestureHandlerConfig: (handlerTag: Double, newConfig: Object) => void;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  updateGestureHandlerConfig: (handlerTag: Double, newConfig: Object) => void;
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  configureRelations: (handlerTag: Double, relations: Object) => void;
-  dropGestureHandler: (handlerTag: Double) => void;
+
+  setGestureHandlerConfig: (
+    handlerTag: CodegenTypes.Double,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    newConfig: Object
+  ) => void;
+
+  updateGestureHandlerConfig: (
+    handlerTag: CodegenTypes.Double,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    newConfig: Object
+  ) => void;
+
+  configureRelations: (
+    handlerTag: CodegenTypes.Double,
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    relations: Object
+  ) => void;
+  dropGestureHandler: (handlerTag: CodegenTypes.Double) => void;
   flushOperations: () => void;
   installUIRuntimeBindings: () => boolean;
 }

package/src/specs/RNGestureHandlerButtonNativeComponent.ts

@@ -1,59 +1,61 @@
-import type { ColorValue, ViewProps } from 'react-native';
 import type {
-  Float,
-  Int32,
-  UnsafeMixed,
-  WithDefault,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+  CodegenTypes,
+  ColorValue,
+  HostComponent,
+  ViewProps,
+} from 'react-native';
+import { codegenNativeComponent } from 'react-native';
 
 // @ts-ignore - Redefining pointerEvents with WithDefault for codegen, conflicts with ViewProps type but codegen needs it
 interface NativeProps extends ViewProps {
-  exclusive?: WithDefault<boolean, true>;
+  exclusive?: CodegenTypes.WithDefault<boolean, true>;
   foreground?: boolean;
   borderless?: boolean;
-  enabled?: WithDefault<boolean, true>;
+  enabled?: CodegenTypes.WithDefault<boolean, true>;
   rippleColor?: ColorValue;
-  rippleRadius?: Int32;
-  touchSoundDisabled?: WithDefault<boolean, false>;
-  pointerEvents?: WithDefault<
+  rippleRadius?: CodegenTypes.Int32;
+  touchSoundDisabled?: CodegenTypes.WithDefault<boolean, false>;
+  pointerEvents?: CodegenTypes.WithDefault<
     'box-none' | 'none' | 'box-only' | 'auto',
     'auto'
   >;
-  tapAnimationInDuration?: WithDefault<Int32, 50>;
-  tapAnimationOutDuration?: WithDefault<Int32, 100>;
-  longPressDuration?: WithDefault<Int32, -1>;
-  longPressAnimationOutDuration?: WithDefault<Int32, -1>;
-  needsOffscreenAlphaCompositing?: WithDefault<boolean, false>;
-  activeOpacity?: WithDefault<Float, 1>;
-  activeScale?: WithDefault<Float, 1>;
-  activeUnderlayOpacity?: WithDefault<Float, 0>;
+  tapAnimationInDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 50>;
+  tapAnimationOutDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 100>;
+  longPressDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
+  longPressAnimationOutDuration?: CodegenTypes.WithDefault<
+    CodegenTypes.Int32,
+    -1
+  >;
+  needsOffscreenAlphaCompositing?: CodegenTypes.WithDefault<boolean, false>;
+  activeOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
+  activeScale?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
+  activeUnderlayOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
   // Hover values default to -1 as an "unset" sentinel; the native side
   // resolves them to the corresponding default* value (matching web, where
   // an omitted hover value falls back to its default counterpart).
-  hoverOpacity?: WithDefault<Float, -1>;
-  hoverScale?: WithDefault<Float, -1>;
-  hoverUnderlayOpacity?: WithDefault<Float, -1>;
-  hoverAnimationInDuration?: WithDefault<Int32, 50>;
-  hoverAnimationOutDuration?: WithDefault<Int32, 100>;
-  defaultOpacity?: WithDefault<Float, 1>;
-  defaultScale?: WithDefault<Float, 1>;
-  defaultUnderlayOpacity?: WithDefault<Float, 0>;
+  hoverOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, -1>;
+  hoverScale?: CodegenTypes.WithDefault<CodegenTypes.Float, -1>;
+  hoverUnderlayOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, -1>;
+  hoverAnimationInDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 50>;
+  hoverAnimationOutDuration?: CodegenTypes.WithDefault<CodegenTypes.Int32, 100>;
+  defaultOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
+  defaultScale?: CodegenTypes.WithDefault<CodegenTypes.Float, 1>;
+  defaultUnderlayOpacity?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
   underlayColor?: ColorValue;
 
   // Border style
-  borderWidth?: Float;
+  borderWidth?: CodegenTypes.Float;
   borderColor?: ColorValue;
-  borderStyle?: WithDefault<string, 'solid'>;
-  overflow?: WithDefault<string, 'visible'>;
+  borderStyle?: CodegenTypes.WithDefault<string, 'solid'>;
+  overflow?: CodegenTypes.WithDefault<string, 'visible'>;
 
   // Border width per-edge
-  borderLeftWidth?: Float;
-  borderRightWidth?: Float;
-  borderTopWidth?: Float;
-  borderBottomWidth?: Float;
-  borderStartWidth?: Float;
-  borderEndWidth?: Float;
+  borderLeftWidth?: CodegenTypes.Float;
+  borderRightWidth?: CodegenTypes.Float;
+  borderTopWidth?: CodegenTypes.Float;
+  borderBottomWidth?: CodegenTypes.Float;
+  borderStartWidth?: CodegenTypes.Float;
+  borderEndWidth?: CodegenTypes.Float;
 
   // Border color per-edge
   borderLeftColor?: ColorValue;
@@ -75,19 +77,21 @@ interface NativeProps extends ViewProps {
   // through our delegate instead of falling through to
   // BaseViewManagerDelegate, which casts to Double and would crash on a
   // string value.
-  borderRadius?: UnsafeMixed;
-  borderTopLeftRadius?: UnsafeMixed;
-  borderTopRightRadius?: UnsafeMixed;
-  borderBottomLeftRadius?: UnsafeMixed;
-  borderBottomRightRadius?: UnsafeMixed;
-  borderTopStartRadius?: UnsafeMixed;
-  borderTopEndRadius?: UnsafeMixed;
-  borderBottomStartRadius?: UnsafeMixed;
-  borderBottomEndRadius?: UnsafeMixed;
-  borderEndEndRadius?: UnsafeMixed;
-  borderEndStartRadius?: UnsafeMixed;
-  borderStartEndRadius?: UnsafeMixed;
-  borderStartStartRadius?: UnsafeMixed;
+  borderRadius?: CodegenTypes.UnsafeMixed;
+  borderTopLeftRadius?: CodegenTypes.UnsafeMixed;
+  borderTopRightRadius?: CodegenTypes.UnsafeMixed;
+  borderBottomLeftRadius?: CodegenTypes.UnsafeMixed;
+  borderBottomRightRadius?: CodegenTypes.UnsafeMixed;
+  borderTopStartRadius?: CodegenTypes.UnsafeMixed;
+  borderTopEndRadius?: CodegenTypes.UnsafeMixed;
+  borderBottomStartRadius?: CodegenTypes.UnsafeMixed;
+  borderBottomEndRadius?: CodegenTypes.UnsafeMixed;
+  borderEndEndRadius?: CodegenTypes.UnsafeMixed;
+  borderEndStartRadius?: CodegenTypes.UnsafeMixed;
+  borderStartEndRadius?: CodegenTypes.UnsafeMixed;
+  borderStartStartRadius?: CodegenTypes.UnsafeMixed;
 }
 
-export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');
+export default codegenNativeComponent<NativeProps>(
+  'RNGestureHandlerButton'
+) as HostComponent<NativeProps>;

package/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -1,81 +1,76 @@
-import type { ViewProps } from 'react-native';
-import type {
-  DirectEventHandler,
-  Double,
-  Int32,
-  UnsafeMixed,
-  WithDefault,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
 
 type GestureHandlerEvent = Readonly<{
-  handlerTag: Int32;
-  state: Int32;
-  handlerData: UnsafeMixed;
+  handlerTag: CodegenTypes.Int32;
+  state: CodegenTypes.Int32;
+  handlerData: CodegenTypes.UnsafeMixed;
 }>;
 
 type GestureHandlerStateChangeEvent = Readonly<{
-  handlerTag: Int32;
-  state: Int32;
-  oldState: Int32;
-  handlerData: UnsafeMixed;
+  handlerTag: CodegenTypes.Int32;
+  state: CodegenTypes.Int32;
+  oldState: CodegenTypes.Int32;
+  handlerData: CodegenTypes.UnsafeMixed;
 }>;
 
 type GestureHandlerTouchEvent = Readonly<{
-  handlerTag: Int32;
-  numberOfTouches: Int32;
-  state: Int32;
-  eventType: Int32;
+  handlerTag: CodegenTypes.Int32;
+  numberOfTouches: CodegenTypes.Int32;
+  state: CodegenTypes.Int32;
+  eventType: CodegenTypes.Int32;
   allTouches: {
-    id: Int32;
-    x: Double;
-    y: Double;
-    absoluteX: Double;
-    absoluteY: Double;
+    id: CodegenTypes.Int32;
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    absoluteX: CodegenTypes.Double;
+    absoluteY: CodegenTypes.Double;
   }[];
   changedTouches: {
-    id: Int32;
-    x: Double;
-    y: Double;
-    absoluteX: Double;
-    absoluteY: Double;
+    id: CodegenTypes.Int32;
+    x: CodegenTypes.Double;
+    y: CodegenTypes.Double;
+    absoluteX: CodegenTypes.Double;
+    absoluteY: CodegenTypes.Double;
   }[];
-  pointerType: Int32;
+  pointerType: CodegenTypes.Int32;
 }>;
 
 export interface VirtualChildrenProps {
-  handlerTags: Int32[];
-  viewTag: Int32;
+  handlerTags: CodegenTypes.Int32[];
+  viewTag: CodegenTypes.Int32;
 }
 
 // @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> | undefined;
+  onGestureHandlerEvent?:
+    | CodegenTypes.DirectEventHandler<GestureHandlerEvent>
+    | undefined;
   onGestureHandlerStateChange?:
-    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerStateChangeEvent>
     | undefined;
   onGestureHandlerTouchEvent?:
-    | DirectEventHandler<GestureHandlerTouchEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerTouchEvent>
     | undefined;
   onGestureHandlerReanimatedEvent?:
-    | DirectEventHandler<GestureHandlerEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerEvent>
     | undefined;
   onGestureHandlerReanimatedStateChange?:
-    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerStateChangeEvent>
     | undefined;
   onGestureHandlerReanimatedTouchEvent?:
-    | DirectEventHandler<GestureHandlerTouchEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerTouchEvent>
     | undefined;
   onGestureHandlerAnimatedEvent?:
-    | DirectEventHandler<GestureHandlerEvent>
+    | CodegenTypes.DirectEventHandler<GestureHandlerEvent>
     | undefined;
 
-  handlerTags: Int32[];
-  moduleId: Int32;
+  handlerTags: CodegenTypes.Int32[];
+  moduleId: CodegenTypes.Int32;
   virtualChildren: VirtualChildrenProps[];
 
-  pointerEvents?: WithDefault<
+  pointerEvents?: CodegenTypes.WithDefault<
     'box-none' | 'none' | 'box-only' | 'auto',
     'auto'
   >;
@@ -83,4 +78,4 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>('RNGestureHandlerDetector', {
   interfaceOnly: true,
-});
+}) as HostComponent<NativeProps>;

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,6 +1,5 @@
-import type { ViewProps } from 'react-native';
-import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
 
 // Publicly accessible type, moduleId is set internally
 export interface RootViewNativeProps extends ViewProps {
@@ -8,8 +7,10 @@ export interface RootViewNativeProps extends ViewProps {
 }
 
 interface NativeProps extends ViewProps {
-  moduleId: Int32;
+  moduleId: CodegenTypes.Int32;
   unstable_forceActive?: boolean;
 }
 
-export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');
+export default codegenNativeComponent<NativeProps>(
+  'RNGestureHandlerRootView'
+) as HostComponent<NativeProps>;

package/src/v3/components/GestureButtons.tsx

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import type { ViewStyle } from 'react-native';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
 import GestureHandlerButton from '../../components/GestureHandlerButton';
@@ -23,7 +24,7 @@ type RawButtonInnerProps = RawButtonProps & {
 const RawButtonInner = createNativeWrapper<
   React.ComponentRef<typeof GestureHandlerButton>,
   RawButtonInnerProps
->(GestureHandlerButton, {
+>(GestureHandlerButton as React.ComponentType<RawButtonInnerProps>, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
@@ -46,7 +47,7 @@ export const BaseButton = (props: BaseButtonProps) => {
 
   const delayLongPress = props.delayLongPress ?? 600;
 
-  const { onLongPress, onPress, onActiveStateChange, style, ...rest } = props;
+  const { onLongPress, onPress, onActiveStateChange, ...rest } = props;
 
   const wrappedLongPress = () => {
     longPressDetected.current = true;
@@ -100,7 +101,6 @@ export const BaseButton = (props: BaseButtonProps) => {
 
   return (
     <RawButton
-      style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
       {...rest}
       {...tvProps}
       onBegin={onBegin}
@@ -155,15 +155,15 @@ export const RectButton = (props: RectButtonProps) => {
       <Animated.View
         style={[
           btnStyles.underlay,
+          { opacity },
           {
-            opacity,
             backgroundColor: underlayColor,
-            borderRadius: resolvedStyle.borderRadius,
-            borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
-            borderTopRightRadius: resolvedStyle.borderTopRightRadius,
-            borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
-            borderBottomRightRadius: resolvedStyle.borderBottomRightRadius,
-          },
+            borderRadius: resolvedStyle?.borderRadius,
+            borderTopLeftRadius: resolvedStyle?.borderTopLeftRadius,
+            borderTopRightRadius: resolvedStyle?.borderTopRightRadius,
+            borderBottomLeftRadius: resolvedStyle?.borderBottomLeftRadius,
+            borderBottomRightRadius: resolvedStyle?.borderBottomRightRadius,
+          } as ViewStyle,
         ]}
       />
       {children}

package/src/v3/components/GestureButtonsProps.ts

@@ -20,7 +20,7 @@ export interface RawButtonProps
     >,
     Omit<
       NativeWrapperProperties<React.ComponentRef<typeof GestureHandlerButton>>,
-      'hitSlop' | 'enabled'
+      'hitSlop' | 'enabled' | 'testID'
     > {}
 
 /**