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

package/src/components/touchables/GenericTouchable.tsx

@@ -1,275 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import { Animated, Platform } from 'react-native';
-
-import { State } from '../../State';
-import { BaseButton } from '../GestureButtons';
-
-import {
-  GestureEvent,
-  HandlerStateChangeEvent,
-} from '../../handlers/gestureHandlerCommon';
-import type { NativeViewGestureHandlerPayload } from '../../handlers/GestureHandlerEventPayload';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-
-/**
- * Each touchable is a states' machine which preforms transitions.
- * On very beginning (and on the very end or recognition) touchable is
- * UNDETERMINED. Then it moves to BEGAN. If touchable recognizes that finger
- * travel outside it transits to special MOVED_OUTSIDE state. Gesture recognition
- * finishes in UNDETERMINED state.
- */
-export const TOUCHABLE_STATE = {
-  UNDETERMINED: 0,
-  BEGAN: 1,
-  MOVED_OUTSIDE: 2,
-} as const;
-
-type TouchableState = (typeof TOUCHABLE_STATE)[keyof typeof TOUCHABLE_STATE];
-
-interface InternalProps {
-  onStateChange?: (oldState: TouchableState, newState: TouchableState) => void;
-}
-
-// TODO: maybe can be better
-// TODO: all clearTimeout have ! added, maybe they shouldn't ?
-type Timeout = ReturnType<typeof setTimeout> | null | undefined;
-
-/**
- * GenericTouchable is not intented to be used as it is.
- * Should be treated as a source for the rest of touchables
- */
-
-export default class GenericTouchable extends Component<
-  GenericTouchableProps & InternalProps
-> {
-  static defaultProps = {
-    delayLongPress: 600,
-    extraButtonProps: {
-      rippleColor: 'transparent',
-      exclusive: true,
-    },
-  };
-
-  // Timeout handlers
-  pressInTimeout: Timeout;
-  pressOutTimeout: Timeout;
-  longPressTimeout: Timeout;
-
-  // This flag is required since recognition of longPress implies not-invoking onPress
-  longPressDetected = false;
-
-  pointerInside = true;
-
-  // State of touchable
-  STATE: TouchableState = TOUCHABLE_STATE.UNDETERMINED;
-
-  // handlePressIn in called on first touch on traveling inside component.
-  // Handles state transition with delay.
-  handlePressIn() {
-    if (this.props.delayPressIn) {
-      this.pressInTimeout = setTimeout(() => {
-        this.moveToState(TOUCHABLE_STATE.BEGAN);
-        this.pressInTimeout = null;
-      }, this.props.delayPressIn);
-    } else {
-      this.moveToState(TOUCHABLE_STATE.BEGAN);
-    }
-    if (this.props.onLongPress) {
-      const time =
-        (this.props.delayPressIn || 0) + (this.props.delayLongPress || 0);
-      this.longPressTimeout = setTimeout(this.onLongPressDetected, time);
-    }
-  }
-  // handleMoveOutside in called on traveling outside component.
-  // Handles state transition with delay.
-  handleMoveOutside() {
-    if (this.props.delayPressOut) {
-      this.pressOutTimeout =
-        this.pressOutTimeout ||
-        setTimeout(() => {
-          this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
-          this.pressOutTimeout = null;
-        }, this.props.delayPressOut);
-    } else {
-      this.moveToState(TOUCHABLE_STATE.MOVED_OUTSIDE);
-    }
-  }
-
-  // handleGoToUndetermined transits to UNDETERMINED state with proper delay
-  handleGoToUndetermined() {
-    clearTimeout(this.pressOutTimeout!); // TODO: maybe it can be undefined
-    if (this.props.delayPressOut) {
-      this.pressOutTimeout = setTimeout(() => {
-        if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
-          this.moveToState(TOUCHABLE_STATE.BEGAN);
-        }
-        this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-        this.pressOutTimeout = null;
-      }, this.props.delayPressOut);
-    } else {
-      if (this.STATE === TOUCHABLE_STATE.UNDETERMINED) {
-        this.moveToState(TOUCHABLE_STATE.BEGAN);
-      }
-      this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-    }
-  }
-
-  componentDidMount() {
-    this.reset();
-  }
-  // Reset timeout to prevent memory leaks.
-  reset() {
-    this.longPressDetected = false;
-    this.pointerInside = true;
-    clearTimeout(this.pressInTimeout!);
-    clearTimeout(this.pressOutTimeout!);
-    clearTimeout(this.longPressTimeout!);
-    this.pressOutTimeout = null;
-    this.longPressTimeout = null;
-    this.pressInTimeout = null;
-  }
-
-  // All states' transitions are defined here.
-  moveToState(newState: TouchableState) {
-    if (newState === this.STATE) {
-      // Ignore dummy transitions
-      return;
-    }
-    if (newState === TOUCHABLE_STATE.BEGAN) {
-      // First touch and moving inside
-      this.props.onPressIn?.();
-    } else if (newState === TOUCHABLE_STATE.MOVED_OUTSIDE) {
-      // Moving outside
-      this.props.onPressOut?.();
-    } else if (newState === TOUCHABLE_STATE.UNDETERMINED) {
-      // Need to reset each time on transition to UNDETERMINED
-      this.reset();
-      if (this.STATE === TOUCHABLE_STATE.BEGAN) {
-        // ... and if it happens inside button.
-        this.props.onPressOut?.();
-      }
-    }
-    // Finally call lister (used by subclasses)
-    this.props.onStateChange?.(this.STATE, newState);
-    // ... and make transition.
-    this.STATE = newState;
-  }
-
-  onGestureEvent = ({
-    nativeEvent: { pointerInside },
-  }: GestureEvent<NativeViewGestureHandlerPayload>) => {
-    if (this.pointerInside !== pointerInside) {
-      if (pointerInside) {
-        this.onMoveIn();
-      } else {
-        this.onMoveOut();
-      }
-    }
-    this.pointerInside = pointerInside;
-  };
-
-  onHandlerStateChange = ({
-    nativeEvent,
-  }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => {
-    const { state } = nativeEvent;
-    if (state === State.CANCELLED || state === State.FAILED) {
-      // Need to handle case with external cancellation (e.g. by ScrollView)
-      this.moveToState(TOUCHABLE_STATE.UNDETERMINED);
-    } else if (
-      // This platform check is an implication of slightly different behavior of handlers on different platform.
-      // And Android "Active" state is achieving on first move of a finger, not on press in.
-      // On iOS event on "Began" is not delivered.
-      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
-      this.STATE === TOUCHABLE_STATE.UNDETERMINED
-    ) {
-      // Moving inside requires
-      this.handlePressIn();
-    } else if (state === State.END) {
-      const shouldCallOnPress =
-        !this.longPressDetected &&
-        this.STATE !== TOUCHABLE_STATE.MOVED_OUTSIDE &&
-        this.pressOutTimeout === null;
-      this.handleGoToUndetermined();
-      if (shouldCallOnPress) {
-        // Calls only inside component whether no long press was called previously
-        this.props.onPress?.();
-      }
-    }
-  };
-
-  onLongPressDetected = () => {
-    this.longPressDetected = true;
-    // Checked for in the caller of `onLongPressDetected`, but better to check twice
-    this.props.onLongPress?.();
-  };
-
-  componentWillUnmount() {
-    // To prevent memory leaks
-    this.reset();
-  }
-
-  onMoveIn() {
-    if (this.STATE === TOUCHABLE_STATE.MOVED_OUTSIDE) {
-      // This call is not throttled with delays (like in RN's implementation).
-      this.moveToState(TOUCHABLE_STATE.BEGAN);
-    }
-  }
-
-  onMoveOut() {
-    // Long press should no longer be detected
-    clearTimeout(this.longPressTimeout!);
-    this.longPressTimeout = null;
-    if (this.STATE === TOUCHABLE_STATE.BEGAN) {
-      this.handleMoveOutside();
-    }
-  }
-
-  render() {
-    const hitSlop =
-      (typeof this.props.hitSlop === 'number'
-        ? {
-          top: this.props.hitSlop,
-          left: this.props.hitSlop,
-          bottom: this.props.hitSlop,
-          right: this.props.hitSlop,
-        }
-        : this.props.hitSlop) ?? undefined;
-
-    const coreProps = {
-      accessible: this.props.accessible !== false,
-      accessibilityLabel: this.props.accessibilityLabel,
-      accessibilityHint: this.props.accessibilityHint,
-      accessibilityRole: this.props.accessibilityRole,
-      // TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
-      // would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
-      accessibilityState: this.props.accessibilityState,
-      accessibilityActions: this.props.accessibilityActions,
-      onAccessibilityAction: this.props.onAccessibilityAction,
-      nativeID: this.props.nativeID,
-      onLayout: this.props.onLayout,
-    };
-
-    return (
-      <BaseButton
-        style={this.props.containerStyle}
-        onHandlerStateChange={
-          // TODO: not sure if it can be undefined instead of null
-          this.props.disabled ? undefined : this.onHandlerStateChange
-        }
-        onGestureEvent={this.onGestureEvent}
-        hitSlop={hitSlop}
-        userSelect={this.props.userSelect}
-        shouldActivateOnStart={this.props.shouldActivateOnStart}
-        disallowInterruption={this.props.disallowInterruption}
-        testID={this.props.testID}
-        touchSoundDisabled={this.props.touchSoundDisabled ?? false}
-        enabled={!this.props.disabled}
-        {...this.props.extraButtonProps}>
-        <Animated.View {...coreProps} style={this.props.style}>
-          {this.props.children}
-        </Animated.View>
-      </BaseButton>
-    );
-  }
-}

package/src/components/touchables/GenericTouchableProps.ts

@@ -1,28 +0,0 @@
-import type {
-  StyleProp,
-  ViewStyle,
-  TouchableWithoutFeedbackProps,
-  Insets,
-} from 'react-native';
-import type { UserSelect } from '../../handlers/gestureHandlerCommon';
-import { ExtraButtonProps } from './ExtraButtonProps';
-
-export interface GenericTouchableProps
-  extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
-  // Decided to drop not used fields from RN's implementation.
-  // e.g. onBlur and onFocus as well as deprecated props. - TODO: this comment may be unuseful in this moment
-  // TODO: in RN these events get native event parameter, which prolly could be used in our implementation too
-  onPress?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-  onLongPress?: () => void;
-
-  nativeID?: string;
-  shouldActivateOnStart?: boolean;
-  disallowInterruption?: boolean;
-
-  containerStyle?: StyleProp<ViewStyle>;
-  hitSlop?: Insets | number;
-  userSelect?: UserSelect;
-  extraButtonProps?: ExtraButtonProps;
-}

package/src/components/touchables/TouchableHighlight.tsx

@@ -1,118 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-import {
-  StyleSheet,
-  View,
-  TouchableHighlightProps as RNTouchableHighlightProps,
-  ColorValue,
-  ViewProps,
-} from 'react-native';
-
-interface State {
-  extraChildStyle: null | {
-    opacity?: number;
-  };
-  extraUnderlayStyle: null | {
-    backgroundColor?: ColorValue;
-  };
-}
-
-/**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-export type TouchableHighlightProps = RNTouchableHighlightProps &
-  GenericTouchableProps;
-
-/**
- * @deprecated TouchableHighlight will be removed in the future version of Gesture Handler. Use Pressable instead.
- *
- * TouchableHighlight follows RN's implementation
- */
-export default class TouchableHighlight extends Component<
-  TouchableHighlightProps,
-  State
-> {
-  static defaultProps = {
-    ...GenericTouchable.defaultProps,
-    activeOpacity: 0.85,
-    delayPressOut: 100,
-    underlayColor: 'black',
-  };
-
-  constructor(props: TouchableHighlightProps) {
-    super(props);
-    this.state = {
-      extraChildStyle: null,
-      extraUnderlayStyle: null,
-    };
-  }
-
-  // Copied from RN
-  showUnderlay = () => {
-    if (!this.hasPressHandler()) {
-      return;
-    }
-    this.setState({
-      extraChildStyle: {
-        opacity: this.props.activeOpacity,
-      },
-      extraUnderlayStyle: {
-        backgroundColor: this.props.underlayColor,
-      },
-    });
-    this.props.onShowUnderlay?.();
-  };
-
-  hasPressHandler = () =>
-    this.props.onPress ||
-    this.props.onPressIn ||
-    this.props.onPressOut ||
-    this.props.onLongPress;
-
-  hideUnderlay = () => {
-    this.setState({
-      extraChildStyle: null,
-      extraUnderlayStyle: null,
-    });
-    this.props.onHideUnderlay?.();
-  };
-
-  renderChildren() {
-    if (!this.props.children) {
-      return <View />;
-    }
-
-    const child = React.Children.only(
-      this.props.children
-    ) as React.ReactElement<ViewProps>; // TODO: not sure if OK but fixes error
-    return React.cloneElement(child, {
-      style: StyleSheet.compose(child.props.style, this.state.extraChildStyle),
-    });
-  }
-
-  onStateChange = (_from: number, to: number) => {
-    if (to === TOUCHABLE_STATE.BEGAN) {
-      this.showUnderlay();
-    } else if (
-      to === TOUCHABLE_STATE.UNDETERMINED ||
-      to === TOUCHABLE_STATE.MOVED_OUTSIDE
-    ) {
-      this.hideUnderlay();
-    }
-  };
-
-  render() {
-    const { style = {}, ...rest } = this.props;
-    const { extraUnderlayStyle } = this.state;
-    return (
-      <GenericTouchable
-        {...rest}
-        style={[style, extraUnderlayStyle]}
-        onStateChange={this.onStateChange}>
-        {this.renderChildren()}
-      </GenericTouchable>
-    );
-  }
-}

package/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -1,83 +0,0 @@
-import { Platform, ColorValue } from 'react-native';
-import * as React from 'react';
-import { Component } from 'react';
-import GenericTouchable from './GenericTouchable';
-import {
-  TouchableNativeFeedbackProps,
-  TouchableNativeFeedbackExtraProps,
-} from './TouchableNativeFeedbackProps';
-
-/**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
- *
- * TouchableNativeFeedback behaves slightly different than RN's TouchableNativeFeedback.
- * There's small difference with handling long press ripple since RN's implementation calls
- * ripple animation via bridge. This solution leaves all animations' handling for native components so
- * it follows native behaviours.
- */
-export default class TouchableNativeFeedback extends Component<TouchableNativeFeedbackProps> {
-  static defaultProps = {
-    ...GenericTouchable.defaultProps,
-    useForeground: true,
-    extraButtonProps: {
-      // Disable hiding ripple on Android
-      rippleColor: null,
-    },
-  };
-
-  // Could be taken as RNTouchableNativeFeedback.SelectableBackground etc. but the API may change
-  static SelectableBackground = (rippleRadius?: number) => ({
-    type: 'ThemeAttrAndroid',
-    // I added `attribute` prop to clone the implementation of RN and be able to use only 2 types
-    attribute: 'selectableItemBackground',
-    rippleRadius,
-  });
-  static SelectableBackgroundBorderless = (rippleRadius?: number) => ({
-    type: 'ThemeAttrAndroid',
-    attribute: 'selectableItemBackgroundBorderless',
-    rippleRadius,
-  });
-  static Ripple = (
-    color: ColorValue,
-    borderless: boolean,
-    rippleRadius?: number
-  ) => ({
-    type: 'RippleAndroid',
-    color,
-    borderless,
-    rippleRadius,
-  });
-
-  static canUseNativeForeground = () =>
-    Platform.OS === 'android' && Platform.Version >= 23;
-
-  getExtraButtonProps() {
-    const extraProps: TouchableNativeFeedbackExtraProps = {};
-    const { background } = this.props;
-    if (background) {
-      // I changed type values to match those used in RN
-      // TODO(TS): check if it works the same as previous implementation - looks like it works the same as RN component, so it should be ok
-      if (background.type === 'RippleAndroid') {
-        extraProps['borderless'] = background.borderless;
-        extraProps['rippleColor'] = background.color;
-      } else if (background.type === 'ThemeAttrAndroid') {
-        extraProps['borderless'] =
-          background.attribute === 'selectableItemBackgroundBorderless';
-      }
-      // I moved it from above since it should be available in all options
-      extraProps['rippleRadius'] = background.rippleRadius;
-    }
-    extraProps['foreground'] = this.props.useForeground;
-    return extraProps;
-  }
-  render() {
-    const { style = {}, ...rest } = this.props;
-    return (
-      <GenericTouchable
-        {...rest}
-        style={style}
-        extraButtonProps={this.getExtraButtonProps()}
-      />
-    );
-  }
-}

package/src/components/touchables/TouchableNativeFeedback.tsx

@@ -1,8 +0,0 @@
-import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native';
-
-/**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-const TouchableNativeFeedback = RNTouchableNativeFeedback;
-
-export default TouchableNativeFeedback;

package/src/components/touchables/TouchableNativeFeedbackProps.tsx

@@ -1,10 +0,0 @@
-import type { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps } from 'react-native';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-import { ExtraButtonProps } from './ExtraButtonProps';
-
-export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
-/**
- * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
-  GenericTouchableProps;

package/src/components/touchables/TouchableOpacity.tsx

@@ -1,78 +0,0 @@
-import {
-  Animated,
-  Easing,
-  StyleSheet,
-  View,
-  TouchableOpacityProps as RNTouchableOpacityProps,
-} from 'react-native';
-import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-import * as React from 'react';
-import { Component } from 'react';
-
-/**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-export type TouchableOpacityProps = RNTouchableOpacityProps &
-  GenericTouchableProps & {
-    useNativeAnimations?: boolean;
-  };
-
-/**
- * @deprecated TouchableOpacity will be removed in the future version of Gesture Handler. Use Pressable instead.
- *
- * TouchableOpacity bases on timing animation which has been used in RN's core
- */
-export default class TouchableOpacity extends Component<TouchableOpacityProps> {
-  static defaultProps = {
-    ...GenericTouchable.defaultProps,
-    activeOpacity: 0.2,
-  };
-
-  // Opacity is 1 one by default but could be overwritten
-  getChildStyleOpacityWithDefault = () => {
-    const childStyle = StyleSheet.flatten(this.props.style) || {};
-    return childStyle.opacity == null
-      ? 1
-      : (childStyle.opacity.valueOf() as number);
-  };
-
-  opacity = new Animated.Value(this.getChildStyleOpacityWithDefault());
-
-  setOpacityTo = (value: number, duration: number) => {
-    Animated.timing(this.opacity, {
-      toValue: value,
-      duration: duration,
-      easing: Easing.inOut(Easing.quad),
-      useNativeDriver: this.props.useNativeAnimations ?? true,
-    }).start();
-  };
-
-  onStateChange = (_from: number, to: number) => {
-    if (to === TOUCHABLE_STATE.BEGAN) {
-      this.setOpacityTo(this.props.activeOpacity!, 0);
-    } else if (
-      to === TOUCHABLE_STATE.UNDETERMINED ||
-      to === TOUCHABLE_STATE.MOVED_OUTSIDE
-    ) {
-      this.setOpacityTo(this.getChildStyleOpacityWithDefault(), 150);
-    }
-  };
-
-  render() {
-    const { style = {}, ...rest } = this.props;
-    return (
-      <GenericTouchable
-        {...rest}
-        style={[
-          style,
-          {
-            opacity: this.opacity as unknown as number, // TODO: fix this
-          },
-        ]}
-        onStateChange={this.onStateChange}>
-        {this.props.children ? this.props.children : <View />}
-      </GenericTouchable>
-    );
-  }
-}

package/src/components/touchables/TouchableWithoutFeedback.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import GenericTouchable from './GenericTouchable';
-import type { GenericTouchableProps } from './GenericTouchableProps';
-
-/**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-export type TouchableWithoutFeedbackProps = GenericTouchableProps;
-
-/**
- * @deprecated TouchableWithoutFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
- */
-const TouchableWithoutFeedback = React.forwardRef<
-  GenericTouchable,
-  PropsWithChildren<TouchableWithoutFeedbackProps>
->(
-  (
-    {
-      delayLongPress = 600,
-      extraButtonProps = {
-        rippleColor: 'transparent',
-        exclusive: true,
-      },
-      ...rest
-    },
-
-    ref
-  ) => (
-    <GenericTouchable
-      ref={ref}
-      delayLongPress={delayLongPress}
-      extraButtonProps={extraButtonProps}
-      {...rest}
-    />
-  )
-);
-
-export default TouchableWithoutFeedback;

package/src/components/touchables/index.ts

@@ -1,7 +0,0 @@
-export type { TouchableHighlightProps } from './TouchableHighlight';
-export type { TouchableOpacityProps } from './TouchableOpacity';
-export type { TouchableWithoutFeedbackProps } from './TouchableWithoutFeedback';
-export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
-export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
-export { default as TouchableOpacity } from './TouchableOpacity';
-export { default as TouchableHighlight } from './TouchableHighlight';

package/src/components/utils.ts

@@ -1,26 +0,0 @@
-import { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
-
-export type RelationPropName =
-  | 'simultaneousWithExternalGesture'
-  | 'requireExternalGestureToFail'
-  | 'blocksExternalGesture';
-
-export type RelationPropType =
-  | Exclude<GestureRef, number>
-  | Exclude<GestureRef, number>[];
-
-export function applyRelationProp(
-  gesture: BaseGesture<any>,
-  relationPropName: RelationPropName,
-  relationProp: RelationPropType
-) {
-  if (!relationProp) {
-    return;
-  }
-
-  if (Array.isArray(relationProp)) {
-    gesture[relationPropName](...relationProp);
-  } else {
-    gesture[relationPropName](relationProp);
-  }
-}

package/src/findNodeHandle.ts

@@ -1,3 +0,0 @@
-import { findNodeHandle } from 'react-native';
-
-export default findNodeHandle;