@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1

package/src/components/touchables/GenericTouchable.tsx

@@ -0,0 +1,301 @@
+import * as React from 'react';
+import { Component } from 'react';
+import {
+  Animated,
+  Platform,
+  StyleProp,
+  ViewStyle,
+  TouchableWithoutFeedbackProps,
+  Insets,
+} from 'react-native';
+
+import { State } from '../../State';
+import { BaseButton } from '../GestureButtons';
+
+import {
+  GestureEvent,
+  HandlerStateChangeEvent,
+} from '../../handlers/gestureHandlerCommon';
+import { NativeViewGestureHandlerPayload } from '../../handlers/NativeViewGestureHandler';
+import { TouchableNativeFeedbackExtraProps } from './TouchableNativeFeedback.android';
+
+/**
+ * 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];
+
+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;
+}
+
+interface InternalProps {
+  extraButtonProps: TouchableNativeFeedbackExtraProps;
+  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}
+        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/TouchableHighlight.tsx

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { Component } from 'react';
+import GenericTouchable, {
+  GenericTouchableProps,
+  TOUCHABLE_STATE,
+} from './GenericTouchable';
+import {
+  StyleSheet,
+  View,
+  TouchableHighlightProps as RNTouchableHighlightProps,
+  ColorValue,
+  ViewProps,
+} from 'react-native';
+
+interface State {
+  extraChildStyle: null | {
+    opacity?: number;
+  };
+  extraUnderlayStyle: null | {
+    backgroundColor?: ColorValue;
+  };
+}
+
+export type TouchableHighlightProps = RNTouchableHighlightProps &
+  GenericTouchableProps;
+
+/**
+ * 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

@@ -0,0 +1,91 @@
+import {
+  Platform,
+  TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps,
+  ColorValue,
+} from 'react-native';
+import * as React from 'react';
+import { Component } from 'react';
+import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
+
+export type TouchableNativeFeedbackExtraProps = {
+  borderless?: boolean;
+  rippleColor?: number | null;
+  rippleRadius?: number | null;
+  foreground?: boolean;
+};
+
+export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps &
+  GenericTouchableProps;
+
+/**
+ * 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

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

package/src/components/touchables/TouchableOpacity.tsx

@@ -0,0 +1,75 @@
+import {
+  Animated,
+  Easing,
+  StyleSheet,
+  View,
+  TouchableOpacityProps as RNTouchableOpacityProps,
+} from 'react-native';
+import GenericTouchable, {
+  TOUCHABLE_STATE,
+  GenericTouchableProps,
+} from './GenericTouchable';
+import * as React from 'react';
+import { Component } from 'react';
+
+export type TouchableOpacityProps = RNTouchableOpacityProps &
+  GenericTouchableProps & {
+    useNativeAnimations?: boolean;
+  };
+
+/**
+ * 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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import GenericTouchable, { GenericTouchableProps } from './GenericTouchable';
+
+export type TouchableWithoutFeedbackProps = GenericTouchableProps;
+
+const TouchableWithoutFeedback = React.forwardRef<
+  GenericTouchable,
+  PropsWithChildren<TouchableWithoutFeedbackProps>
+>((props, ref) => <GenericTouchable ref={ref} {...props} />);
+
+TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;
+
+export default TouchableWithoutFeedback;

package/src/components/touchables/index.ts

@@ -0,0 +1,7 @@
+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/getReactNativeVersion.ts

@@ -0,0 +1,11 @@
+import pack from 'react-native/package.json';
+
+const [majorStr, minorStr] = pack.version.split('.');
+const REACT_NATIVE_VERSION = {
+  major: parseInt(majorStr, 10),
+  minor: parseInt(minorStr, 10),
+};
+
+export function getReactNativeVersion() {
+  return REACT_NATIVE_VERSION;
+}

package/src/getReactNativeVersion.web.ts

@@ -0,0 +1,3 @@
+export function getReactNativeVersion() {
+  throw new Error('getReactNativeVersion is not supported on web');
+}

package/src/getShadowNodeFromRef.ts

@@ -0,0 +1,22 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. This implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing. Solved by making .web file.
+let findHostInstance_DEPRECATED: (ref: any) => void;
+
+export function getShadowNodeFromRef(ref: any) {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
+    try {
+      findHostInstance_DEPRECATED =
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        require('react-native/Libraries/Renderer/shims/ReactFabric').findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: any) => null;
+    }
+  }
+
+  // @ts-ignore Fabric
+  return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
+    .node;
+}

package/src/getShadowNodeFromRef.web.ts

@@ -0,0 +1,7 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. Original implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing.
+export function getShadowNodeFromRef(_ref: any) {
+  return null;
+}

package/src/ghQueueMicrotask.ts

@@ -0,0 +1,5 @@
+// `queueMicrotask` was introduced to react-native in version 0.66 (https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0660)
+// Because Gesture Handler supports versions 0.64+, we have to handle situations where someone uses older version of react native.
+// That's why if `queueMicrotask` doesn't exist, we use `setImmediate` instead, since it was used before we switched to `queueMicrotask` in version 2.11.0
+export const ghQueueMicrotask =
+  typeof queueMicrotask === 'function' ? queueMicrotask : setImmediate;