Improve type definitions of wrapped Gesture Components (#1394)

Co-authored-by: Jakub Gonet <jgonet@MacBook-Pro-Jakub.local>

Author: yfunk

examples/Example/src/App.tsx

@@ -135,7 +135,7 @@ function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
       renderItem={(props) => (
         <MainScreenItem
           {...props}
-          onPressItem={({ key }: { key: string }) => navigation.navigate(key)}
+          onPressItem={({ key }) => navigation.navigate(key)}
         />
       )}
       renderScrollComponent={(props) => <ScrollView {...props} />}

src/components/GestureComponents.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import {
+  PropsWithChildren,
+  ForwardedRef,
+  RefAttributes,
+  ReactElement,
+} from 'react';
 import {
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
@@ -24,63 +29,42 @@ export const ScrollView = createNativeWrapper<
   shouldCancelWhenOutside: false,
 });
 // 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 ScrollView & {
-  scrollTo(
-    y?: number | { x?: number; y?: number; animated?: boolean },
-    x?: number,
-    animated?: boolean
-  ): void;
-  scrollToEnd(options?: { animated: boolean }): void;
-};
+export type ScrollView = typeof ScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
   disallowInterruption: true,
 });
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch;
+export type Switch = typeof Switch & RNSwitch;
 
 export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput;
+export type TextInput = typeof TextInput & RNTextInput;
 
 export const DrawerLayoutAndroid = createNativeWrapper<
   PropsWithChildren<RNDrawerLayoutAndroidProps>
 >(RNDrawerLayoutAndroid, { disallowInterruption: true });
-// we use literal object since TS gives error when using RN's `positions`
-// @ts-ignore FIXME(TS) maybe this should be removed?
-DrawerLayoutAndroid.positions = { Left: 'left', Right: 'right' };
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid;
+export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
+  RNDrawerLayoutAndroid;
 
-export const FlatList = React.forwardRef<RNFlatList<any>, RNFlatListProps<any>>(
-  (props, ref) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
-    />
-  )
-);
+export const FlatList = React.forwardRef((props, ref) => (
+  <RNFlatList
+    ref={ref}
+    {...props}
+    renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+  />
+)) as <ItemT = any>(
+  props: PropsWithChildren<
+    RNFlatListProps<ItemT> &
+      RefAttributes<FlatList<ItemT>> &
+      NativeViewGestureHandlerProps
+  >,
+  ref: ForwardedRef<FlatList<ItemT>>
+) => ReactElement | null;
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList<ItemT> = React.ComponentType<
-  RNFlatListProps<ItemT> &
-    NativeViewGestureHandlerProps &
-    React.RefAttributes<any>
-> & {
-  scrollToEnd: (params?: { animated?: boolean }) => void;
-  scrollToIndex: (params: {
-    animated?: boolean;
-    index: number;
-    viewOffset?: number;
-    viewPosition?: number;
-  }) => void;
-  scrollToItem: (params: {
-    animated?: boolean;
-    item: ItemT;
-    viewPosition?: number;
-  }) => void;
-  scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
-};
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;