Update types to respect Strict TS API

packages/react-native-gesture-handler/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
+  />
+);

packages/react-native-gesture-handler/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;

packages/react-native-gesture-handler/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}

packages/react-native-gesture-handler/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

packages/react-native-gesture-handler/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(() => {

packages/react-native-gesture-handler/src/components/Text.tsx

@@ -9,19 +9,19 @@ 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`.
  */
 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) {

packages/react-native-gesture-handler/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>

packages/react-native-gesture-handler/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';

packages/react-native-gesture-handler/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>;
       };

packages/react-native-gesture-handler/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;
 }