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

package/src/components/GestureButtons.tsx

@@ -0,0 +1,332 @@
+import * as React from 'react';
+import {
+  Animated,
+  Platform,
+  processColor,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import createNativeWrapper from '../handlers/createNativeWrapper';
+import GestureHandlerButton from './GestureHandlerButton';
+import { State } from '../State';
+
+import {
+  GestureEvent,
+  HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
+  NativeViewGestureHandlerPayload,
+  NativeViewGestureHandlerProps,
+} from '../handlers/NativeViewGestureHandler';
+
+export interface RawButtonProps extends NativeViewGestureHandlerProps {
+  /**
+   * 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?: any; // it was present in BaseButtonProps before but is used here in code
+
+  /**
+   * 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;
+}
+
+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 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 BorderlessButtonProps extends BaseButtonProps {
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
+  activeOpacity?: number;
+}
+
+export const RawButton = createNativeWrapper(GestureHandlerButton, {
+  shouldCancelWhenOutside: false,
+  shouldActivateOnStart: false,
+});
+
+export class BaseButton extends React.Component<BaseButtonProps> {
+  static defaultProps = {
+    delayLongPress: 600,
+  };
+
+  private lastActive: boolean;
+  private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
+  private longPressDetected: boolean;
+
+  constructor(props: BaseButtonProps) {
+    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 &&
+      this.lastActive &&
+      this.props.onPress
+    ) {
+      this.props.onPress(active);
+    }
+
+    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, ...rest } = this.props;
+
+    return (
+      <RawButton
+        rippleColor={processColor(rippleColor)}
+        {...rest}
+        onGestureEvent={this.onGestureEvent}
+        onHandlerStateChange={this.onHandlerStateChange}
+      />
+    );
+  }
+}
+
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
+const btnStyles = StyleSheet.create({
+  underlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  },
+});
+
+export class RectButton extends React.Component<RectButtonProps> {
+  static defaultProps = {
+    activeOpacity: 0.105,
+    underlayColor: 'black',
+  };
+
+  private opacity: Animated.Value;
+
+  constructor(props: RectButtonProps) {
+    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}
+        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 class BorderlessButton extends React.Component<BorderlessButtonProps> {
+  static defaultProps = {
+    activeOpacity: 0.3,
+    borderless: true,
+  };
+
+  private opacity: Animated.Value;
+
+  constructor(props: BorderlessButtonProps) {
+    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, ...rest } = this.props;
+
+    return (
+      <AnimatedBaseButton
+        {...rest}
+        onActiveStateChange={this.onActiveStateChange}
+        style={[style, Platform.OS === 'ios' && { opacity: this.opacity }]}>
+        {children}
+      </AnimatedBaseButton>
+    );
+  }
+}
+
+export { default as PureNativeButton } from './GestureHandlerButton';

package/src/components/GestureComponents.tsx

@@ -0,0 +1,148 @@
+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<
+    RNFlatListProps<ItemT> &
+      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

@@ -0,0 +1,41 @@
+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 extends any>(props: FlatListProps<ItemT>, ref: any) => (
+    <RNFlatList
+      ref={ref}
+      {...props}
+      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+    />
+  )
+);

package/src/components/GestureHandlerButton.tsx

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

package/src/components/GestureHandlerButton.web.tsx

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

package/src/components/GestureHandlerRootView.android.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } 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(
+  props: 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 {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
+}

package/src/components/GestureHandlerRootView.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { View, ViewProps } from 'react-native';
+import { maybeInitializeFabric } from '../init';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: 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>
+      <View {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
+}

package/src/components/GestureHandlerRootView.web.tsx

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