Update usage of types from React Native to make them compatible with Strict API (#3532)

## Description

Updates usage of some types from `react-native` across RNGH codebase.

Note: typecheck with the strict api enabled will fail on the codegen
types in specs - those are available from the package exports since
0.79. Once this is our lowest supported version, we can update those as
well.

## Test plan

`yarn ts-check`

Author: j-piasecki

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

@@ -280,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;
 

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

@@ -156,7 +156,7 @@ export const BaseButton = React.forwardRef<
 
 const AnimatedBaseButton = React.forwardRef<
   React.ComponentType,
-  BaseButtonWithRefProps
+  Animated.AnimatedProps<BaseButtonWithRefProps>
 >((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
 
 const btnStyles = StyleSheet.create({
@@ -193,7 +193,7 @@ class InnerRectButton extends React.Component<RectButtonWithRefProps> {
   render() {
     const { children, style, ...rest } = this.props;
 
-    const resolvedStyle = StyleSheet.flatten(style ?? {});
+    const resolvedStyle = StyleSheet.flatten(style) ?? {};
 
     return (
       <BaseButton

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

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

@@ -41,7 +41,10 @@ const IS_TEST_ENV = isTestEnv();
 let IS_FABRIC: null | boolean = null;
 
 const Pressable = forwardRef(
-  (props: PressableProps, pressableRef: ForwardedRef<View>) => {
+  (
+    props: PressableProps,
+    pressableRef: ForwardedRef<React.ComponentRef<typeof View>>
+  ) => {
     const {
       testOnly_pressed,
       hitSlop,
@@ -246,7 +249,7 @@ const Pressable = forwardRef(
       (delayLongPress ?? DEFAULT_LONG_PRESS_DURATION) +
       (unstable_pressDelay ?? 0);
 
-    const innerPressableRef = useRef<View>(null);
+    const innerPressableRef = useRef<React.ComponentRef<typeof View>>(null);
 
     const measureCallback = useCallback(
       (width: number, height: number, event: GestureTouchEvent) => {
@@ -309,11 +312,11 @@ const Pressable = forwardRef(
           .onTouchesDown((event) => {
             handlingOnTouchesDown.current = true;
             if (pressableRef) {
-              (pressableRef as RefObject<View>).current?.measure(
-                (_x, _y, width, height) => {
-                  measureCallback(width, height, event);
-                }
-              );
+              (
+                pressableRef as RefObject<React.ComponentRef<typeof View>>
+              ).current?.measure((_x, _y, width, height) => {
+                measureCallback(width, height, event);
+              });
             } else {
               innerPressableRef.current?.measure((_x, _y, width, height) => {
                 measureCallback(width, height, event);

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

@@ -269,6 +269,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       simultaneousWithExternalGesture,
       requireExternalGestureToFail,
       blocksExternalGesture,
+      hitSlop,
       ...remainingProps
     } = props;
 
@@ -769,6 +770,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         <Animated.View
           {...remainingProps}
           onLayout={onRowLayout}
+          hitSlop={hitSlop ?? undefined}
           style={[styles.container, containerStyle]}>
           {leftElement()}
           {rightElement()}

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

@@ -15,7 +15,10 @@ import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
 
 export const Text = forwardRef(
-  (props: RNTextProps, ref: ForwardedRef<RNText>) => {
+  (
+    props: RNTextProps,
+    ref: ForwardedRef<React.ComponentRef<typeof RNText>>
+  ) => {
     const { onPress, onLongPress, ...rest } = props;
 
     const textRef = useRef<RNText | null>(null);
@@ -46,7 +49,7 @@ export const Text = forwardRef(
       }
 
       const textElement = ref
-        ? (ref as RefObject<RNText>).current
+        ? (ref as RefObject<React.ComponentRef<typeof RNText>>).current
         : textRef.current;
 
       // At this point we are sure that textElement is div in HTML tree

packages/react-native-gesture-handler/src/handlers/utils.ts

@@ -60,7 +60,7 @@ export function findNodeHandle(
   if (Platform.OS === 'web') {
     return node;
   }
-  return findNodeHandleRN(node);
+  return findNodeHandleRN(node) ?? null;
 }
 let flushOperationsScheduled = false;
 

packages/react-native-gesture-handler/src/web_hammer/GestureHandler.ts

@@ -283,6 +283,7 @@ abstract class GestureHandler {
     this.propsRef = propsRef;
     this.ref = ref;
 
+    // @ts-ignore
     this.view = findNodeHandle(ref);
 
     // When the browser starts handling the gesture (e.g. scrolling), it sends a pointercancel event and stops