@amazon-devices/react-native-gesture-handler 4.0.1 → 4.0.2

package/src/components/GestureButtons.tsx

@@ -1,272 +0,0 @@
-import * as React from 'react';
-import { Animated, Platform, processColor, StyleSheet } from 'react-native';
-
-import createNativeWrapper from '../handlers/createNativeWrapper';
-import GestureHandlerButton from './GestureHandlerButton';
-import { State } from '../State';
-
-import {
-  GestureEvent,
-  HandlerStateChangeEvent,
-} from '../handlers/gestureHandlerCommon';
-import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
-import type {
-  BaseButtonWithRefProps,
-  BaseButtonProps,
-  RectButtonWithRefProps,
-  RectButtonProps,
-  BorderlessButtonWithRefProps,
-  BorderlessButtonProps,
-} from './GestureButtonsProps';
-import { isFabric } from '../utils';
-
-export const RawButton = createNativeWrapper(GestureHandlerButton, {
-  // @ts-ignore
-  shouldCancelWhenOutside: Platform.OS === 'kepler',
-  shouldActivateOnStart: false,
-});
-
-let IS_FABRIC: null | boolean = null;
-
-class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
-  static defaultProps = {
-    delayLongPress: 600,
-  };
-
-  private lastActive: boolean;
-  private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
-  private longPressDetected: boolean;
-
-  constructor(props: BaseButtonWithRefProps) {
-    super(props);
-    this.lastActive = false;
-    this.longPressDetected = false;
-  }
-
-  private handleEvent = ({
-    nativeEvent,
-  }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => {
-    const { state, oldState, pointerInside } = nativeEvent;
-    const active = pointerInside && state === State.ACTIVE;
-
-    if (active !== this.lastActive && this.props.onActiveStateChange) {
-      this.props.onActiveStateChange(active);
-    }
-
-    if (
-      !this.longPressDetected &&
-      oldState === State.ACTIVE &&
-      state !== State.CANCELLED &&
-      state !== State.FAILED &&
-      this.lastActive &&
-      this.props.onPress
-    ) {
-      this.props.onPress(pointerInside);
-    }
-
-    if (
-      !this.lastActive &&
-      // NativeViewGestureHandler sends different events based on platform
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
-      pointerInside
-    ) {
-      this.longPressDetected = false;
-      if (this.props.onLongPress) {
-        this.longPressTimeout = setTimeout(
-          this.onLongPress,
-          this.props.delayLongPress
-        );
-      }
-    } else if (
-      // Cancel longpress timeout if it's set and the finger moved out of the view
-      state === State.ACTIVE &&
-      !pointerInside &&
-      this.longPressTimeout !== undefined
-    ) {
-      clearTimeout(this.longPressTimeout);
-      this.longPressTimeout = undefined;
-    } else if (
-      // Cancel longpress timeout if it's set and the gesture has finished
-      this.longPressTimeout !== undefined &&
-      (state === State.END ||
-        state === State.CANCELLED ||
-        state === State.FAILED)
-    ) {
-      clearTimeout(this.longPressTimeout);
-      this.longPressTimeout = undefined;
-    }
-
-    this.lastActive = active;
-  };
-
-  private onLongPress = () => {
-    this.longPressDetected = true;
-    this.props.onLongPress?.();
-  };
-
-  // 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>
-  ) => {
-    this.props.onHandlerStateChange?.(e);
-    this.handleEvent(e);
-  };
-
-  private onGestureEvent = (
-    e: GestureEvent<NativeViewGestureHandlerPayload>
-  ) => {
-    this.props.onGestureEvent?.(e);
-    this.handleEvent(
-      e as HandlerStateChangeEvent<NativeViewGestureHandlerPayload>
-    ); // TODO: maybe it is not correct
-  };
-
-  render() {
-    const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
-
-    if (IS_FABRIC === null) {
-      IS_FABRIC = isFabric();
-    }
-
-    const rippleColor = IS_FABRIC
-      ? unprocessedRippleColor
-      : processColor(unprocessedRippleColor ?? undefined);
-
-    return (
-      <RawButton
-        ref={this.props.innerRef}
-        rippleColor={rippleColor}
-        style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
-        {...rest}
-        onGestureEvent={this.onGestureEvent}
-        onHandlerStateChange={this.onHandlerStateChange}
-      />
-    );
-  }
-}
-
-const AnimatedInnerBaseButton =
-  Animated.createAnimatedComponent<typeof InnerBaseButton>(InnerBaseButton);
-
-export const BaseButton = React.forwardRef<
-  React.ComponentType,
-  Omit<BaseButtonProps, 'innerRef'>
->((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);
-
-const AnimatedBaseButton = React.forwardRef<
-  React.ComponentType,
-  Animated.AnimatedProps<BaseButtonWithRefProps>
->((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
-
-const btnStyles = StyleSheet.create({
-  underlay: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    top: 0,
-  },
-});
-
-class InnerRectButton extends React.Component<RectButtonWithRefProps> {
-  static defaultProps = {
-    activeOpacity: 0.105,
-    underlayColor: 'black',
-  };
-
-  private opacity: Animated.Value;
-
-  constructor(props: RectButtonWithRefProps) {
-    super(props);
-    this.opacity = new Animated.Value(0);
-  }
-
-  private onActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      this.opacity.setValue(active ? this.props.activeOpacity! : 0);
-    }
-
-    this.props.onActiveStateChange?.(active);
-  };
-
-  render() {
-    const { children, style, ...rest } = this.props;
-
-    const resolvedStyle = StyleSheet.flatten(style) ?? {};
-
-    return (
-      <BaseButton
-        {...rest}
-        ref={this.props.innerRef}
-        style={resolvedStyle}
-        onActiveStateChange={this.onActiveStateChange}>
-        <Animated.View
-          style={[
-            btnStyles.underlay,
-            {
-              opacity: this.opacity,
-              backgroundColor: this.props.underlayColor,
-              borderRadius: resolvedStyle.borderRadius,
-              borderTopLeftRadius: resolvedStyle.borderTopLeftRadius,
-              borderTopRightRadius: resolvedStyle.borderTopRightRadius,
-              borderBottomLeftRadius: resolvedStyle.borderBottomLeftRadius,
-              borderBottomRightRadius: resolvedStyle.borderBottomRightRadius,
-            },
-          ]}
-        />
-        {children}
-      </BaseButton>
-    );
-  }
-}
-
-export const RectButton = React.forwardRef<
-  React.ComponentType,
-  Omit<RectButtonProps, 'innerRef'>
->((props, ref) => <InnerRectButton innerRef={ref} {...props} />);
-
-class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
-  static defaultProps = {
-    activeOpacity: 0.3,
-    borderless: true,
-  };
-
-  private opacity: Animated.Value;
-
-  constructor(props: BorderlessButtonWithRefProps) {
-    super(props);
-    this.opacity = new Animated.Value(1);
-  }
-
-  private onActiveStateChange = (active: boolean) => {
-    if (Platform.OS !== 'android') {
-      this.opacity.setValue(active ? this.props.activeOpacity! : 1);
-    }
-
-    this.props.onActiveStateChange?.(active);
-  };
-
-  render() {
-    const { children, style, innerRef, ...rest } = this.props;
-
-    return (
-      <AnimatedBaseButton
-        {...rest}
-        innerRef={innerRef}
-        onActiveStateChange={this.onActiveStateChange}
-        style={[style, Platform.OS === 'ios' && { opacity: this.opacity }]}>
-        {children}
-      </AnimatedBaseButton>
-    );
-  }
-}
-
-export const BorderlessButton = React.forwardRef<
-  React.ComponentType,
-  Omit<BorderlessButtonProps, 'innerRef'>
->((props, ref) => <InnerBorderlessButton innerRef={ref} {...props} />);
-
-export { default as PureNativeButton } from './GestureHandlerButton';

package/src/components/GestureButtonsProps.ts

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import {
-  AccessibilityProps,
-  ColorValue,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import type { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
-
-export interface RawButtonProps
-  extends NativeViewGestureHandlerProps,
-    AccessibilityProps {
-  /**
-   * 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?: number | ColorValue | null;
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-
-  /**
-   * Style object, use it to set additional styles.
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Invoked on mount and layout changes.
-   */
-  onLayout?: (event: LayoutChangeEvent) => void;
-
-  /**
-   * 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;
-
-  /**
-   * 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;
-
-  /**
-   * 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;
-
-  /**
-   * 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;
-}
-interface ButtonWithRefProps {
-  innerRef?: React.ForwardedRef<React.ComponentType<any>>;
-}
-
-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 the button gets pressed and is held for `delayLongPress`
-   * milliseconds.
-   */
-  onLongPress?: () => 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;
-
-  /**
-   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
-   * Defaults to 600.
-   */
-  delayLongPress?: number;
-}
-export interface BaseButtonWithRefProps
-  extends BaseButtonProps,
-    ButtonWithRefProps {}
-
-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 RectButtonWithRefProps
-  extends RectButtonProps,
-    ButtonWithRefProps {}
-
-export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * iOS only.
-   *
-   * Opacity applied to the button when it is in an active state.
-   */
-  activeOpacity?: number;
-}
-export interface BorderlessButtonWithRefProps
-  extends BorderlessButtonProps,
-    ButtonWithRefProps {}

package/src/components/GestureComponents.tsx

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import {
-  PropsWithChildren,
-  ForwardedRef,
-  RefAttributes,
-  ReactElement,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
-  ScrollViewProps as RNScrollViewProps,
-  Switch as RNSwitch,
-  SwitchProps as RNSwitchProps,
-  TextInput as RNTextInput,
-  TextInputProps as RNTextInputProps,
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
-  DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
-  FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
-  RefreshControl as RNRefreshControl,
-} from 'react-native';
-
-import createNativeWrapper from '../handlers/createNativeWrapper';
-
-import {
-  NativeViewGestureHandlerProps,
-  nativeViewProps,
-} from '../handlers/NativeViewGestureHandler';
-
-import { toArray } from '../utils';
-
-export const RefreshControl = createNativeWrapper(RNRefreshControl, {
-  disallowInterruption: true,
-  shouldCancelWhenOutside: false,
-});
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type RefreshControl = typeof RefreshControl & RNRefreshControl;
-
-const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
-  RNScrollView,
-  {
-    disallowInterruption: true,
-    shouldCancelWhenOutside: false,
-  }
-);
-export const ScrollView = React.forwardRef<
-  RNScrollView,
-  RNScrollViewProps & NativeViewGestureHandlerProps
->((props, ref) => {
-  const refreshControlGestureRef = React.useRef<RefreshControl>(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={
-        refreshControl
-          ? React.cloneElement(refreshControl, {
-            // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-            ref: refreshControlGestureRef,
-          })
-          : undefined
-      }
-    />
-  );
-});
-// 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 GHScrollView & 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 & RNSwitch;
-
-export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type TextInput = typeof TextInput & RNTextInput;
-
-export const DrawerLayoutAndroid = createNativeWrapper<
-  PropsWithChildren<RNDrawerLayoutAndroidProps>
->(RNDrawerLayoutAndroid, { disallowInterruption: true });
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
-  RNDrawerLayoutAndroid;
-
-export const FlatList = React.forwardRef((props, ref) => {
-  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
-
-  const { waitFor, refreshControl, ...rest } = props;
-
-  const flatListProps = {};
-  const scrollViewProps = {};
-  for (const [propName, value] of Object.entries(rest)) {
-    // 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}
-      {...flatListProps}
-      renderScrollComponent={(scrollProps) => (
-        <ScrollView
-          {...{
-            ...scrollProps,
-            ...scrollViewProps,
-            waitFor: [...toArray(waitFor ?? []), refreshControlGestureRef],
-          }}
-        />
-      )}
-      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
-      refreshControl={
-        refreshControl
-          ? React.cloneElement(refreshControl, {
-            // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
-            ref: refreshControlGestureRef,
-          })
-          : undefined
-      }
-    />
-  );
-}) as <ItemT = any>(
-  props: PropsWithChildren<
-    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
-    RefAttributes<FlatList<ItemT>> &
-    NativeViewGestureHandlerProps
-  >,
-  ref?: ForwardedRef<FlatList<ItemT>>
-) => ReactElement | null;
-// eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/components/GestureComponents.web.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import {
-  FlatList as RNFlatList,
-  Switch as RNSwitch,
-  TextInput as RNTextInput,
-  ScrollView as RNScrollView,
-  FlatListProps,
-  View,
-} from 'react-native';
-
-import createNativeWrapper from '../handlers/createNativeWrapper';
-
-export const ScrollView = createNativeWrapper(RNScrollView, {
-  disallowInterruption: false,
-});
-
-export const Switch = createNativeWrapper(RNSwitch, {
-  shouldCancelWhenOutside: false,
-  shouldActivateOnStart: true,
-  disallowInterruption: true,
-});
-export const TextInput = createNativeWrapper(RNTextInput);
-export const DrawerLayoutAndroid = () => {
-  console.warn('DrawerLayoutAndroid is not supported on web!');
-  return <View />;
-};
-
-// RefreshControl is implemented as a functional component, rendering a View
-// NativeViewGestureHandler needs to set a ref on its child, which cannot be done
-// on functional components
-export const RefreshControl = createNativeWrapper(View);
-
-export const FlatList = React.forwardRef(
-  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
-    />
-  )
-);

package/src/components/GestureHandlerButton.tsx

@@ -1,5 +0,0 @@
-import { HostComponent } from 'react-native';
-import type { RawButtonProps } from './GestureButtonsProps';
-import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
-
-export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerButton.web.tsx

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-export default React.forwardRef<React.ComponentRef<typeof View>>(
-  (props, ref) => <View ref={ref} accessibilityRole="button" {...props} />
-);

package/src/components/GestureHandlerRootView.android.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { ViewProps, StyleSheet } from 'react-native';
-import { maybeInitializeFabric } from '../init';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
-
-export interface GestureHandlerRootViewProps
-  extends PropsWithChildren<ViewProps> { }
-
-export default function GestureHandlerRootView({
-  style,
-  ...rest
-}: GestureHandlerRootViewProps) {
-  // Try initialize fabric on the first render, at this point we can
-  // reliably check if fabric is enabled (the function contains a flag
-  // to make sure it's called only once)
-  maybeInitializeFabric();
-
-  return (
-    <GestureHandlerRootViewContext.Provider value>
-      <GestureHandlerRootViewNativeComponent
-        style={style ?? styles.container}
-        {...rest}
-      />
-    </GestureHandlerRootViewContext.Provider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-});

package/src/components/GestureHandlerRootView.kepler.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { ViewProps } from 'react-native';
-import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
-import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
-
-export interface GestureHandlerRootViewProps
-  extends PropsWithChildren<ViewProps> {}
-
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
-  return (
-    <GestureHandlerRootViewContext.Provider value>
-      <GestureHandlerRootViewNativeComponent {...props} />
-    </GestureHandlerRootViewContext.Provider>
-  );
-}