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

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;

package/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +1,154 @@
 import * as React from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
 import { View } from 'react-native';
 
-export default React.forwardRef<React.ComponentRef<typeof View>>(
-  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
-);
+type ButtonProps = ViewProps & {
+  ref?: React.Ref<React.ComponentRef<typeof View>>;
+  enabled?: boolean;
+  pressAndHoldAnimationDuration?: number;
+  tapAnimationDuration?: number;
+  activeOpacity?: number;
+  activeScale?: number;
+  activeUnderlayOpacity?: number;
+  defaultOpacity?: number;
+  defaultScale?: number;
+  defaultUnderlayOpacity?: number;
+  underlayColor?: ColorValue;
+};
+
+export const ButtonComponent = ({
+  enabled = true,
+  pressAndHoldAnimationDuration: pressAndHoldAnimationDurationProp = -1,
+  tapAnimationDuration: tapAnimationDurationProp = 100,
+  activeOpacity = 1,
+  activeScale = 1,
+  activeUnderlayOpacity = 0,
+  defaultOpacity = 1,
+  defaultScale = 1,
+  defaultUnderlayOpacity = 0,
+  underlayColor,
+  style,
+  children,
+  ...rest
+}: ButtonProps) => {
+  const tapAnimationDuration =
+    tapAnimationDurationProp < 0 ? 0 : tapAnimationDurationProp;
+  const pressAndHoldAnimationDuration =
+    pressAndHoldAnimationDurationProp < 0
+      ? tapAnimationDuration
+      : pressAndHoldAnimationDurationProp;
+
+  const [pressed, setPressed] = React.useState(false);
+  const [currentDuration, setCurrentDuration] = React.useState(
+    pressAndHoldAnimationDuration
+  );
+  const pressInTimestamp = React.useRef(0);
+  const pressOutTimer = React.useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+
+  React.useEffect(() => {
+    return () => {
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+      }
+    };
+  }, []);
+
+  const pressIn = React.useCallback(() => {
+    if (enabled) {
+      if (pressOutTimer.current != null) {
+        clearTimeout(pressOutTimer.current);
+        pressOutTimer.current = null;
+      }
+      pressInTimestamp.current = performance.now();
+      setCurrentDuration(pressAndHoldAnimationDuration);
+      setPressed(true);
+    }
+  }, [enabled, pressAndHoldAnimationDuration]);
+
+  const pressOut = React.useCallback(() => {
+    if (pressOutTimer.current != null) {
+      clearTimeout(pressOutTimer.current);
+      pressOutTimer.current = null;
+    }
+    const elapsed = performance.now() - pressInTimestamp.current;
+
+    if (elapsed >= pressAndHoldAnimationDuration) {
+      setCurrentDuration(pressAndHoldAnimationDuration);
+      setPressed(false);
+      // elapsed * 2 to ensure there is at least half of the tapAnimationDuration left for the animation to play
+    } else if (elapsed * 2 >= tapAnimationDuration) {
+      setCurrentDuration(elapsed);
+      setPressed(false);
+    } else {
+      // Let the in-progress CSS press-in transition continue; schedule press-out after remaining time
+      const remaining = tapAnimationDuration - elapsed;
+      pressOutTimer.current = setTimeout(() => {
+        pressOutTimer.current = null;
+        setCurrentDuration(tapAnimationDuration);
+        setPressed(false);
+      }, remaining);
+    }
+  }, [pressAndHoldAnimationDuration, tapAnimationDuration]);
+
+  const currentUnderlayOpacity = pressed
+    ? activeUnderlayOpacity
+    : defaultUnderlayOpacity;
+  const hasUnderlay = underlayColor != null;
+  const hasOpacity = activeOpacity !== 1 || defaultOpacity !== 1;
+  const currentOpacity = pressed ? activeOpacity : defaultOpacity;
+  const hasScale = activeScale !== 1 || defaultScale !== 1;
+  const currentScale = pressed ? activeScale : defaultScale;
+
+  const easing = 'cubic-bezier(0.5, 1, 0.89, 1)';
+  const transitionProps: string[] = [];
+  if (hasOpacity) {
+    transitionProps.push(`opacity ${currentDuration}ms ${easing}`);
+  }
+  if (hasScale) {
+    transitionProps.push(`transform ${currentDuration}ms ${easing}`);
+  }
+  const transition = transitionProps.join(', ');
+
+  return (
+    <View
+      accessibilityRole="button"
+      style={[
+        style,
+        {
+          ...(hasOpacity && { opacity: currentOpacity }),
+          ...(hasScale && { transform: [{ scale: currentScale }] }),
+          // @ts-ignore - web-only CSS property
+          transition,
+          // Clip the underlay to the view bounds (respects borderRadius).
+          ...(hasUnderlay && { overflow: 'hidden' }),
+        },
+      ]}
+      onPointerDown={pressIn}
+      onPointerUp={pressOut}
+      onPointerCancel={pressOut}
+      onPointerLeave={pressOut}
+      {...rest}>
+      {hasUnderlay && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: underlayColor as string,
+            opacity: currentUnderlayOpacity,
+            // @ts-ignore - web-only CSS properties
+            transition: `opacity ${currentDuration}ms ${easing}`,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+      {children}
+    </View>
+  );
+};
+
+export default ButtonComponent;

package/src/components/GestureHandlerRootView.android.tsx

@@ -1,6 +1,7 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
 import { StyleSheet } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';

package/src/components/GestureHandlerRootView.tsx

@@ -1,6 +1,7 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import type { RootViewNativeProps } from '../specs/RNGestureHandlerRootViewNativeComponent';
 
@@ -12,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }
 

package/src/components/GestureHandlerRootView.web.tsx

@@ -1,6 +1,8 @@
+import type { PropsWithChildren } from 'react';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
@@ -11,9 +13,9 @@ export default function GestureHandlerRootView({
   ...rest
 }: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Provider value>
+    <GestureHandlerRootViewContext value>
       <View style={style ?? styles.container} {...rest} />
-    </GestureHandlerRootViewContext.Provider>
+    </GestureHandlerRootViewContext>
   );
 }