react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.4

package/src/components/GestureButtonsProps.ts

@@ -1,11 +1,12 @@
-import * as React from 'react';
-import {
+import type * as React from 'react';
+import type {
   AccessibilityProps,
   ColorValue,
   LayoutChangeEvent,
   StyleProp,
   ViewStyle,
 } from 'react-native';
+
 import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
 
 /**
@@ -18,42 +19,42 @@ export interface LegacyRawButtonProps
    * Defines if more than one button could be pressed simultaneously. By default
    * set true.
    */
-  exclusive?: boolean;
+  exclusive?: boolean | undefined;
   // TODO: we should transform props in `createNativeWrapper`
   /**
    * Android only.
    *
    * Defines color of native ripple animation used since API level 21.
    */
-  rippleColor?: number | ColorValue | null;
+  rippleColor?: number | ColorValue | null | undefined;
 
   /**
    * Android only.
    *
    * Defines radius of native ripple animation used since API level 21.
    */
-  rippleRadius?: number | null;
+  rippleRadius?: number | null | undefined;
 
   /**
    * Android only.
    *
    * Set this to true if you want the ripple animation to render outside the view bounds.
    */
-  borderless?: boolean;
+  borderless?: boolean | undefined;
 
   /**
    * Android only.
    *
    * Defines whether the ripple animation should be drawn on the foreground of the view.
    */
-  foreground?: boolean;
+  foreground?: boolean | undefined;
 
   /**
    * Android only.
    *
    * Set this to true if you don't want the system to play sound when the button is pressed.
    */
-  touchSoundDisabled?: boolean;
+  touchSoundDisabled?: boolean | undefined;
 
   /**
    * Style object, use it to set additional styles.
@@ -70,31 +71,31 @@ export interface LegacyRawButtonProps
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPress?: Function | null;
+  testOnly_onPress?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressIn?: Function | null;
+  testOnly_onPressIn?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressOut?: Function | null;
+  testOnly_onPressOut?: Function | null | undefined;
 
   /**
    * Used for testing-library compatibility, not passed to the native component.
    * @deprecated test-only props are deprecated and will be removed in the future.
    */
   // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onLongPress?: Function | null;
+  testOnly_onLongPress?: Function | null | undefined;
 }
 interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
+  innerRef?: React.Ref<React.ComponentType<any>> | undefined;
 }
 
 /**
@@ -105,28 +106,28 @@ export interface LegacyBaseButtonProps extends LegacyRawButtonProps {
    * Called when the button gets pressed (analogous to `onPress` in
    * `TouchableHighlight` from RN core).
    */
-  onPress?: (pointerInside: boolean) => void;
+  onPress?: ((pointerInside: boolean) => void) | undefined;
 
   /**
    * Called when the button gets pressed and is held for `delayLongPress`
    * milliseconds.
    */
-  onLongPress?: () => void;
+  onLongPress?: (() => void) | undefined;
 
   /**
    * 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;
+  onActiveStateChange?: ((active: boolean) => void) | undefined;
   style?: StyleProp<ViewStyle>;
-  testID?: string;
+  testID?: string | undefined;
 
   /**
    * Delay, in milliseconds, after which the `onLongPress` callback gets called.
    * Defaults to 600.
    */
-  delayLongPress?: number;
+  delayLongPress?: number | undefined;
 }
 export interface BaseButtonWithRefProps
   extends LegacyBaseButtonProps,
@@ -139,14 +140,14 @@ export interface LegacyRectButtonProps extends LegacyBaseButtonProps {
   /**
    * Background color that will be dimmed when button is in active state.
    */
-  underlayColor?: string;
+  underlayColor?: string | undefined;
 
   /**
    * iOS only.
    *
    * Opacity applied to the underlay when button is in active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
 export interface RectButtonWithRefProps
   extends LegacyRectButtonProps,
@@ -162,7 +163,7 @@ export interface LegacyBorderlessButtonProps extends LegacyBaseButtonProps {
    *
    * Opacity applied to the button when it is in an active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
 export interface BorderlessButtonWithRefProps
   extends LegacyBorderlessButtonProps,

package/src/components/GestureComponents.tsx

@@ -1,31 +1,24 @@
+import type { PropsWithChildren, ReactElement } from 'react';
 import * as React from 'react';
-import {
-  PropsWithChildren,
-  ForwardedRef,
-  RefAttributes,
-  ReactElement,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
+import type {
+  DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
+  FlatListProps as RNFlatListProps,
   ScrollViewProps as RNScrollViewProps,
-  Switch as RNSwitch,
   SwitchProps as RNSwitchProps,
-  TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
+} from 'react-native';
+import {
   DrawerLayoutAndroid as RNDrawerLayoutAndroid,
-  DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
   FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
   RefreshControl as RNRefreshControl,
+  ScrollView as RNScrollView,
+  Switch as RNSwitch,
+  TextInput as RNTextInput,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
-
-import {
-  NativeViewGestureHandlerProps,
-  nativeViewProps,
-} from '../handlers/NativeViewGestureHandler';
-
+import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+import { nativeViewProps } from '../handlers/NativeViewGestureHandler';
 import { toArray } from '../utils';
 
 /**
@@ -51,18 +44,18 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 /**
  * @deprecated use `ScrollView` instead
  */
-export const LegacyScrollView = React.forwardRef<
-  RNScrollView,
-  RNScrollViewProps & NativeViewGestureHandlerProps
->((props, ref) => {
+export const LegacyScrollView = (
+  props: RNScrollViewProps &
+    NativeViewGestureHandlerProps & {
+      ref?: React.Ref<RNScrollView | null>;
+    }
+) => {
   const refreshControlGestureRef = React.useRef<LegacyRefreshControl>(null);
   const { refreshControl, waitFor, ...rest } = props;
 
   return (
     <GHScrollView
       {...rest}
-      // @ts-ignore `ref` exists on `GHScrollView`
-      ref={ref}
       waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
       // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
       refreshControl={
@@ -75,7 +68,7 @@ export const LegacyScrollView = React.forwardRef<
       }
     />
   );
-});
+};
 
 // 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.
@@ -114,7 +107,14 @@ export type LegacyDrawerLayoutAndroid = typeof LegacyDrawerLayoutAndroid &
 /**
  * @deprecated use `FlatList` instead
  */
-export const LegacyFlatList = React.forwardRef((props, ref) => {
+export const LegacyFlatList = <ItemT,>(
+  props: PropsWithChildren<
+    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
+      NativeViewGestureHandlerProps & {
+        ref?: React.Ref<RNFlatList<ItemT> | null>;
+      }
+  >
+): ReactElement | null => {
   const refreshControlGestureRef = React.useRef<LegacyRefreshControl>(null);
 
   const { waitFor, refreshControl, ...rest } = props;
@@ -137,7 +137,6 @@ export const LegacyFlatList = React.forwardRef((props, ref) => {
   return (
     // @ts-ignore - this function cannot have generic type so we have to ignore this error
     <RNFlatList
-      ref={ref}
       {...flatListProps}
       renderScrollComponent={(scrollProps) => (
         <LegacyScrollView
@@ -159,14 +158,8 @@ export const LegacyFlatList = React.forwardRef((props, ref) => {
       }
     />
   );
-}) as <ItemT = any>(
-  props: PropsWithChildren<
-    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
-      RefAttributes<LegacyFlatList<ItemT>> &
-      NativeViewGestureHandlerProps
-  >,
-  ref?: ForwardedRef<LegacyFlatList<ItemT>>
-) => ReactElement | null;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type LegacyFlatList<ItemT = any> = typeof LegacyFlatList &
   RNFlatList<ItemT>;

package/src/components/GestureComponents.web.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import type { FlatListProps } from 'react-native';
 import {
   FlatList as RNFlatList,
+  ScrollView as RNScrollView,
   Switch as RNSwitch,
   TextInput as RNTextInput,
-  ScrollView as RNScrollView,
-  FlatListProps,
   View,
 } from 'react-native';
 
@@ -50,14 +50,11 @@ export const LegacyRefreshControl = createNativeWrapper(View);
 /**
  * @deprecated use `FlatList` instead
  */
-export const LegacyFlatList = React.forwardRef(
-  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => (
-        <LegacyScrollView {...scrollProps} />
-      )}
-    />
-  )
+export const LegacyFlatList = <ItemT,>(props: FlatListProps<ItemT>) => (
+  <RNFlatList
+    {...props}
+    renderScrollComponent={(scrollProps) => (
+      <LegacyScrollView {...scrollProps} />
+    )}
+  />
 );

package/src/components/GestureHandlerButton.tsx

@@ -1,147 +1,153 @@
-import { HostComponent, StyleSheet, View } from 'react-native';
-import type { RawButtonProps } from '../v3/components/GestureButtonsProps';
+import type {
+  AccessibilityProps,
+  ColorValue,
+  HostComponent,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
 import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
-import RNGestureHandlerButtonWrapperNativeComponent from '../specs/RNGestureHandlerButtonWrapperNativeComponent';
-import { useMemo } from 'react';
-
-const ButtonComponent =
-  RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;
-
-export default function GestureHandlerButton({
-  style,
-  ...rest
-}: RawButtonProps) {
-  const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style]);
-
-  const {
-    // Layout properties
-    display,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-    flexDirection,
-    flexWrap,
-    justifyContent,
-    alignItems,
-    alignContent,
-    alignSelf,
-    aspectRatio,
-    gap,
-    rowGap,
-    columnGap,
-    margin,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    marginVertical,
-    marginHorizontal,
-    marginStart,
-    marginEnd,
-    padding,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingVertical,
-    paddingHorizontal,
-    paddingStart,
-    paddingEnd,
-    position,
-    top,
-    right,
-    bottom,
-    left,
-    start,
-    end,
-    overflow,
-
-    // Visual properties
-    ...restStyle
-  } = flattenedStyle;
-
-  // Layout styles for ButtonComponent
-  const layoutStyle = useMemo(
-    () => ({
-      display,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight,
-      flex,
-      flexGrow,
-      flexShrink,
-      flexBasis,
-      flexDirection,
-      flexWrap,
-      justifyContent,
-      alignItems,
-      alignContent,
-      alignSelf,
-      aspectRatio,
-      gap,
-      rowGap,
-      columnGap,
-      margin,
-      marginTop,
-      marginBottom,
-      marginLeft,
-      marginRight,
-      marginVertical,
-      marginHorizontal,
-      marginStart,
-      marginEnd,
-      padding,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-      paddingVertical,
-      paddingHorizontal,
-      paddingStart,
-      paddingEnd,
-      position,
-      top,
-      right,
-      bottom,
-      left,
-      start,
-      end,
-      overflow,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [flattenedStyle]
-  );
-
-  return (
-    <RNGestureHandlerButtonWrapperNativeComponent style={styles.contents}>
-      <View
-        collapsable={false}
-        style={[
-          styles.contents,
-          (!overflow || overflow === 'hidden') && styles.overflowHidden,
-          restStyle,
-        ]}>
-        <ButtonComponent {...rest} style={layoutStyle} />
-      </View>
-    </RNGestureHandlerButtonWrapperNativeComponent>
-  );
+
+export interface ButtonProps extends ViewProps, AccessibilityProps {
+  children?: React.ReactNode;
+  ref?: React.Ref<React.ComponentRef<typeof ButtonComponent>> | undefined;
+  /**
+   * Defines if buttons should respond to touches. By default set to true.
+   */
+  enabled?: boolean | undefined;
+
+  /**
+   * Defines if more than one button could be pressed simultaneously. By default
+   * set true.
+   */
+  exclusive?: boolean | undefined;
+
+  /**
+   * Android only.
+   *
+   * Defines color of native ripple animation used since API level 21.
+   */
+  rippleColor?: number | ColorValue | null | undefined;
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null | undefined;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean | undefined;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean | undefined;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you don't want the system to play sound when the button is pressed.
+   */
+  touchSoundDisabled?: boolean | undefined;
+
+  /**
+   * Duration of the press-in animation when the button is held down, in
+   * milliseconds. Defaults to `tapAnimationDuration` when not set (or set
+   * to any negative value).
+   */
+  pressAndHoldAnimationDuration?: number | undefined;
+
+  /**
+   * Minimum duration (in milliseconds) that the press animation must run
+   * before the press-out animation is allowed to start. Ensures the pressed
+   * state is visible on quick taps. Defaults to 100ms.
+   */
+  tapAnimationDuration?: number | undefined;
+
+  /**
+   * Opacity applied to the button when it is pressed.
+   */
+  activeOpacity?: number | undefined;
+
+  /**
+   * Scale applied to the button when it is pressed.
+   */
+  activeScale?: number | undefined;
+
+  /**
+   * Opacity applied to the underlay when the button is pressed.
+   */
+  activeUnderlayOpacity?: number | undefined;
+
+  /**
+   * Opacity applied to the button when it is not pressed.
+   */
+  defaultOpacity?: number | undefined;
+
+  /**
+   * Scale applied to the button when it is not pressed.
+   */
+  defaultScale?: number | undefined;
+
+  /**
+   * Opacity applied to the underlay when the button is not pressed.
+   */
+  defaultUnderlayOpacity?: number | undefined;
+
+  /**
+   * Color of the underlay.
+   */
+  underlayColor?: ColorValue | undefined;
+
+  /**
+   * Style object, use it to set additional styles.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Invoked on mount and layout changes.
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPress?: Function | null | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressIn?: Function | null | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onPressOut?: Function | null | undefined;
+
+  /**
+   * Used for testing-library compatibility, not passed to the native component.
+   * @deprecated test-only props are deprecated and will be removed in the future.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  testOnly_onLongPress?: Function | null | undefined;
 }
 
-const styles = StyleSheet.create({
-  contents: {
-    display: 'contents',
-  },
-  overflowHidden: {
-    overflow: 'hidden',
-  },
-});
+export const ButtonComponent =
+  RNGestureHandlerButtonNativeComponent as HostComponent<ButtonProps>;
+
+export default ButtonComponent;