react-native-gesture-handler 1.10.3 → 2.0.0

package/lib/typescript/web/TapGestureHandler.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="hammerjs" />
 import DiscreteGestureHandler from './DiscreteGestureHandler';
 import { HammerInputExt } from './GestureHandler';
 declare class TapGestureHandler extends DiscreteGestureHandler {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "1.10.3",
+  "version": "2.0.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",
@@ -22,6 +22,7 @@
     "!**/__fixtures__",
     "!**/__mocks__",
     "android/build.gradle",
+    "android/gradle.properties",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
     "android/lib/build.gradle",
@@ -49,9 +50,9 @@
   "homepage": "https://github.com/software-mansion/react-native-gesture-handler#readme",
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
-    "fbjs": "^3.0.0",
     "hoist-non-react-statics": "^3.3.0",
     "invariant": "^2.2.4",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2"
   },
   "jest": {
@@ -66,11 +67,11 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^26.0.19",
-    "@types/hammerjs": "^2.0.38",
     "@types/react": "^17.0.0",
-    "@types/react-native": "^0.63.49",
+    "@types/react-native": "^0.64.2",
     "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
@@ -89,8 +90,9 @@
     "prettier": "^2.2.1",
     "react": "^16.8.6",
     "react-dom": "^16.12.0",
-    "react-native": "^0.63.4",
+    "react-native": "^0.64.0",
     "react-native-builder-bob": "^0.17.1",
+    "react-native-reanimated": "^2.0.0",
     "react-native-web": "^0.11.7",
     "react-test-renderer": "16.8.6",
     "release-it": "^13.6.5",

package/src/EventType.ts

@@ -0,0 +1,10 @@
+export const EventType = {
+  UNDETERMINED: 0,
+  TOUCHES_DOWN: 1,
+  TOUCHES_MOVE: 2,
+  TOUCHES_UP: 3,
+  TOUCHES_CANCELLED: 4,
+} as const;
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
+export type EventType = typeof EventType[keyof typeof EventType];

package/src/GestureHandlerRootView.android.tsx

@@ -1,34 +1,18 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, requireNativeComponent } from 'react-native';
+import { requireNativeComponent } from 'react-native';
+import { GestureHandlerRootViewProps } from './GestureHandlerRootView';
 
 const GestureHandlerRootViewNative = requireNativeComponent(
   'GestureHandlerRootView'
 );
 
-const GestureHandlerRootViewContext = React.createContext(false);
-
-type Props = PropsWithChildren<Record<string, unknown>>;
-
-export default function GestureHandlerRootView({ children, ...rest }: Props) {
+export default function GestureHandlerRootView({
+  children,
+  ...rest
+}: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Consumer>
-      {(available) => {
-        if (available) {
-          // If we already have a parent wrapped in the gesture handler root view,
-          // We don't need to wrap it again in root view
-          // We still wrap it in a normal view so our styling stays the same
-          return <View {...rest}>{children}</View>;
-        }
-
-        return (
-          <GestureHandlerRootViewContext.Provider value>
-            <GestureHandlerRootViewNative {...rest}>
-              {children}
-            </GestureHandlerRootViewNative>
-          </GestureHandlerRootViewContext.Provider>
-        );
-      }}
-    </GestureHandlerRootViewContext.Consumer>
+    <GestureHandlerRootViewNative {...rest}>
+      {children}
+    </GestureHandlerRootViewNative>
   );
 }

package/src/GestureHandlerRootView.tsx

@@ -1,3 +1,12 @@
-import { View } from 'react-native';
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { View, ViewProps } from 'react-native';
 
-export default View;
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView({
+  ...rest
+}: GestureHandlerRootViewProps) {
+  return <View {...rest} />;
+}

package/src/RNGestureHandlerModule.ts

@@ -20,7 +20,11 @@ export type RNGestureHandlerModuleProps = {
     handlerTag: number,
     config: Readonly<Record<string, unknown>>
   ) => void;
-  attachGestureHandler: (handlerTag: number, newView: number) => void;
+  attachGestureHandler: (
+    handlerTag: number,
+    newView: number,
+    usingDeviceEvents: boolean
+  ) => void;
   updateGestureHandler: (
     handlerTag: number,
     newConfig: Readonly<Record<string, unknown>>

package/src/RNGestureHandlerModule.web.ts

@@ -44,6 +44,7 @@ export default {
   attachGestureHandler(
     handlerTag: number,
     newView: number,
+    _usingDeviceEvents: boolean,
     propsRef: React.RefObject<unknown>
   ) {
     NodeManager.getHandler(handlerTag).setView(newView, propsRef);

package/src/components/DrawerLayout.tsx

@@ -1,10 +1,10 @@
 // This component is based on RN's DrawerLayoutAndroid API
 //
-// It perhaps deserves to be put in a separate repo, but since it relies
-// on react-native-gesture-handler library which isn't very popular at the
-// moment I decided to keep it here for the time being. It will allow us
-// to move faster and fix issues that may arise in gesture handler library
-// that could be found when using the drawer component
+// It perhaps deserves to be put in a separate repo, but since it relies on
+// react-native-gesture-handler library which isn't very popular at the moment I
+// decided to keep it here for the time being. It will allow us to move faster
+// and fix issues that may arise in gesture handler library that could be found
+// when using the drawer component
 
 import * as React from 'react';
 import { Component } from 'react';
@@ -25,12 +25,16 @@ import {
 
 import {
   GestureEvent,
+  HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
   PanGestureHandler,
   PanGestureHandlerEventPayload,
+} from '../handlers/PanGestureHandler';
+import {
   TapGestureHandler,
-  HandlerStateChangeEvent,
   TapGestureHandlerEventPayload,
-} from '../handlers/gestureHandlers';
+} from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -50,16 +54,42 @@ export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 export interface DrawerLayoutProps {
+  /**
+   * This attribute is present in the standard implementation already and is one
+   * of the required params. Gesture handler version of DrawerLayout make it
+   * possible for the function passed as `renderNavigationView` to take an
+   * Animated value as a parameter that indicates the progress of drawer
+   * opening/closing animation (progress value is 0 when closed and 1 when
+   * opened). This can be used by the drawer component to animated its children
+   * while the drawer is opening or closing.
+   */
   renderNavigationView: (
     progressAnimatedValue: Animated.Value
   ) => React.ReactNode;
+
   drawerPosition?: DrawerPosition;
+
   drawerWidth?: number;
+
   drawerBackgroundColor?: string;
+
   drawerLockMode?: DrawerLockMode;
+
   keyboardDismissMode?: DrawerKeyboardDismissMode;
+
+  /**
+   * Called when the drawer is closed.
+   */
   onDrawerClose?: () => void;
+
+  /**
+   * Called when the drawer is opened.
+   */
   onDrawerOpen?: () => void;
+
+  /**
+   * Called when the status of the drawer changes.
+   */
   onDrawerStateChanged?: (
     newState: DrawerState,
     drawerWillShow: boolean
@@ -67,15 +97,56 @@ export interface DrawerLayoutProps {
   useNativeAnimations?: boolean;
 
   drawerType?: DrawerType;
+
+  /**
+   * Defines how far from the edge of the content view the gesture should
+   * activate.
+   */
   edgeWidth?: number;
+
   minSwipeDistance?: number;
+
+  /**
+   * When set to true Drawer component will use
+   * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS
+   * status bar whenever the drawer is pulled or when its in an "open" state.
+   */
   hideStatusBar?: boolean;
+
+  /**
+   * @default 'slide'
+   *
+   * Can be used when hideStatusBar is set to true and will select the animation
+   * used for hiding/showing the status bar. See
+   * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for
+   * more details
+   */
   statusBarAnimation?: StatusBarAnimation;
+
+  /**
+   * @default black
+   *
+   * Color of a semi-transparent overlay to be displayed on top of the content
+   * view when drawer gets open. A solid color should be used as the opacity is
+   * added by the Drawer itself and the opacity of the overlay is animated (from
+   * 0% to 70%).
+   */
   overlayColor?: string;
+
   contentContainerStyle?: StyleProp<ViewStyle>;
+
   drawerContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Enables two-finger gestures on supported devices, for example iPads with
+   * trackpads. If not enabled the gesture will require click + drag, with
+   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+   * the gesture.
+   */
   enableTrackpadTwoFingerGesture?: boolean;
+
   onDrawerSlide?: (position: number) => void;
+
   onGestureRef?: (ref: PanGestureHandler) => void;
 }
 
@@ -168,13 +239,12 @@ export default class DrawerLayout extends Component<
     let touchX = touchXValue;
 
     if (drawerPosition !== 'left') {
-      // Most of the code is written in a way to handle left-side drawer.
-      // In order to handle right-side drawer the only thing we need to
-      // do is to reverse events coming from gesture handler in a way they
-      // emulate left-side drawer gestures. E.g. dragX is simply -dragX, and
-      // touchX is calulcated by subtracing real touchX from the width of the
-      // container (such that when touch happens at the right edge the value
-      // is simply 0)
+      // Most of the code is written in a way to handle left-side drawer. In
+      // order to handle right-side drawer the only thing we need to do is to
+      // reverse events coming from gesture handler in a way they emulate
+      // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
+      // calulcated by subtracing real touchX from the width of the container
+      // (such that when touch happens at the right edge the value is simply 0)
       dragX = Animated.multiply(
         new Animated.Value(-1),
         dragXValue
@@ -204,11 +274,12 @@ export default class DrawerLayout extends Component<
     //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
     //    +---------------+    +---------------+    +---------------+    +---------------+
     //
-    // For the above to work properly we define animated value that will keep start position
-    // of the gesture. Then we use that value to calculate how much we need to subtract from
-    // the dragX. If the gesture started on the greyed out area we take the distance from the
-    // edge of the drawer to the start position. Otherwise we don't subtract at all and the
-    // drawer be pulled back as soon as you start the pan.
+    // For the above to work properly we define animated value that will keep
+    // start position of the gesture. Then we use that value to calculate how
+    // much we need to subtract from the dragX. If the gesture started on the
+    // greyed out area we take the distance from the edge of the drawer to the
+    // start position. Otherwise we don't subtract at all and the drawer be
+    // pulled back as soon as you start the pan.
     //
     // This is used only when drawerType is "front"
     //
@@ -345,14 +416,14 @@ export default class DrawerLayout extends Component<
     });
     const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;
     const fromLeft = drawerPosition === 'left';
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: showing ? undefined : edgeWidth }
       : { right: 0, width: showing ? undefined : edgeWidth };
@@ -377,10 +448,10 @@ export default class DrawerLayout extends Component<
     if (fromValue != null) {
       let nextFramePosition = fromValue;
       if (this.props.useNativeAnimations) {
-        // When using native driver, we predict the next position of the animation
-        // because it takes one frame of a roundtrip to pass RELEASE event from
-        // native driver to JS before we can start animating. Without it, it is more
-        // noticable that the frame is dropped.
+        // When using native driver, we predict the next position of the
+        // animation because it takes one frame of a roundtrip to pass RELEASE
+        // event from native driver to JS before we can start animating. Without
+        // it, it is more noticable that the frame is dropped.
         if (fromValue < toValue && velocity > 0) {
           nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
         } else if (fromValue > toValue && velocity < 0) {
@@ -422,7 +493,8 @@ export default class DrawerLayout extends Component<
       options.velocity ? options.velocity : 0
     );
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would not be clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would not be clickable
     this.forceUpdate();
   };
 
@@ -430,7 +502,8 @@ export default class DrawerLayout extends Component<
     // TODO: decide if it should be null or undefined is the proper value
     this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would be still clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would be still clickable
     this.forceUpdate();
   };
 
@@ -474,8 +547,8 @@ export default class DrawerLayout extends Component<
 
     // 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
+    // the opposite setting for the drawer to appear from left or right
+    // according to the drawerPosition prop
     const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
 
     const dynamicDrawerStyles = {
@@ -546,8 +619,8 @@ export default class DrawerLayout extends Component<
   };
 
   private setPanGestureRef = (ref: PanGestureHandler) => {
-    // TODO(TS): make sure it is OK
-    // taken from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
+    // TODO(TS): make sure it is OK taken from
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
     (this
       .panGestureHandler as React.MutableRefObject<PanGestureHandler>).current = ref;
     this.props.onGestureRef?.(ref);
@@ -563,15 +636,15 @@ export default class DrawerLayout extends Component<
 
     const fromLeft = drawerPosition === 'left';
 
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
 
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }
       : { right: 0, width: this.drawerShown ? undefined : edgeWidth };

package/src/components/GestureButtons.tsx

@@ -15,32 +15,72 @@ import { State } from '../State';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-} from '../handlers/gestureHandlers';
+} 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
 }
 
 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 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;
 }
 
 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 {
+  /**
+   * Android only.
+   *
+   * Set this to false if you want the ripple animation to render only within view bounds.
+   */
   borderless?: boolean;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
   activeOpacity?: number;
 }
 
@@ -79,10 +119,10 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     this.lastActive = active;
   };
 
-  // Normally, the parent would execute it's handler first,
-  // then forward the event to listeners. However, here our handler
-  // is virtually only forwarding events to listeners, so we reverse the order
-  // to keep the proper order of the callbacks (from "raw" ones to "processed").
+  // Normally, the parent would execute it's handler first, then forward the
+  // event to listeners. However, here our handler is virtually only forwarding
+  // events to listeners, so we reverse the order to keep the proper order of
+  // the callbacks (from "raw" ones to "processed").
   private onHandlerStateChange = (
     e: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>
   ) => {

package/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,
@@ -15,7 +20,10 @@ import {
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 
-import { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+import {
+  NativeViewGestureHandlerProps,
+  nativeViewProps,
+} from '../handlers/NativeViewGestureHandler';
 
 export const ScrollView = createNativeWrapper<
   PropsWithChildren<RNScrollViewProps>
@@ -24,15 +32,9 @@ 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,
@@ -40,47 +42,51 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   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) => (
+export const FlatList = React.forwardRef((props, ref) => {
+  const flatListProps = {};
+  const scrollViewProps = {};
+  for (const [propName, value] of Object.entries(props)) {
+    // https://github.com/microsoft/TypeScript/issues/26255
+    if ((nativeViewProps as readonly string[]).includes(propName)) {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      scrollViewProps[propName] = value;
+    } else {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      flatListProps[propName] = value;
+    }
+  }
+  return (
+    // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
       ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+      {...flatListProps}
+      renderScrollComponent={(scrollProps) => (
+        <ScrollView {...{ ...scrollProps, ...scrollViewProps }} />
+      )}
     />
-  )
-);
+  );
+}) 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>;