react-native-gesture-handler 2.26.0 → 2.27.1

package/lib/typescript/components/Text.js

@@ -0,0 +1,38 @@
+import React, { forwardRef, useEffect, useRef, } from 'react';
+import { Platform, Text as RNText, } from 'react-native';
+import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
+import { GestureDetector } from '../handlers/gestures/GestureDetector';
+export const Text = forwardRef((props, ref) => {
+    const { onPress, onLongPress, ...rest } = props;
+    const textRef = useRef(null);
+    const native = Gesture.Native().runOnJS(true);
+    const refHandler = (node) => {
+        textRef.current = node;
+        if (ref === null) {
+            return;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else {
+            ref.current = node;
+        }
+    };
+    // This is a special case for `Text` component. After https://github.com/software-mansion/react-native-gesture-handler/pull/3379 we check for
+    // `displayName` field. However, `Text` from RN has this field set to `Text`, but is also present in `RNSVGElements` set.
+    // We don't want to treat our `Text` as the one from `SVG`, therefore we add special field to ref.
+    refHandler.rngh = true;
+    useEffect(() => {
+        if (Platform.OS !== 'web') {
+            return;
+        }
+        const textElement = ref
+            ? ref.current
+            : textRef.current;
+        // At this point we are sure that textElement is div in HTML tree
+        textElement?.setAttribute('rnghtext', 'true');
+    }, []);
+    return onPress || onLongPress ? (<GestureDetector gesture={native}>
+        <RNText onPress={onPress} onLongPress={onLongPress} ref={refHandler} {...rest}/>
+      </GestureDetector>) : (<RNText ref={ref} {...rest}/>);
+});

package/lib/typescript/components/gestureHandlerRootHOC.d.ts

@@ -1,4 +1,3 @@
 import * as React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 export default function gestureHandlerRootHOC<P extends object>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;
-//# sourceMappingURL=gestureHandlerRootHOC.d.ts.map

package/lib/typescript/components/gestureHandlerRootHOC.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import GestureHandlerRootView from './GestureHandlerRootView';
+export default function gestureHandlerRootHOC(Component, containerStyles) {
+    function Wrapper(props) {
+        return (<GestureHandlerRootView style={[styles.container, containerStyles]}>
+        <Component {...props}/>
+      </GestureHandlerRootView>);
+    }
+    Wrapper.displayName = `gestureHandlerRootHOC(${Component.displayName || Component.name})`;
+    // @ts-ignore - hoistNonReactStatics uses old version of @types/react
+    hoistNonReactStatics(Wrapper, Component);
+    return Wrapper;
+}
+const styles = StyleSheet.create({
+    container: { flex: 1 },
+});

package/lib/typescript/components/touchables/ExtraButtonProps.d.ts

@@ -5,4 +5,3 @@ export type ExtraButtonProps = {
     foreground?: boolean;
     exclusive?: boolean;
 };
-//# sourceMappingURL=ExtraButtonProps.d.ts.map

package/lib/typescript/components/touchables/ExtraButtonProps.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/touchables/GenericTouchable.d.ts

@@ -53,4 +53,3 @@ export default class GenericTouchable extends Component<GenericTouchableProps &
     render(): React.JSX.Element;
 }
 export {};
-//# sourceMappingURL=GenericTouchable.d.ts.map

package/lib/typescript/components/touchables/GenericTouchable.js

@@ -0,0 +1,221 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, Platform } from 'react-native';
+import { State } from '../../State';
+import { BaseButton } from '../GestureButtons';
+/**
+ * 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,
+};
+/**
+ * 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 {
+    static defaultProps = {
+        delayLongPress: 600,
+        extraButtonProps: {
+            rippleColor: 'transparent',
+            exclusive: true,
+        },
+    };
+    // Timeout handlers
+    pressInTimeout;
+    pressOutTimeout;
+    longPressTimeout;
+    // This flag is required since recognition of longPress implies not-invoking onPress
+    longPressDetected = false;
+    pointerInside = true;
+    // State of touchable
+    STATE = 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) {
+        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 }, }) => {
+        if (this.pointerInside !== pointerInside) {
+            if (pointerInside) {
+                this.onMoveIn();
+            }
+            else {
+                this.onMoveOut();
+            }
+        }
+        this.pointerInside = pointerInside;
+    };
+    onHandlerStateChange = ({ nativeEvent, }) => {
+        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/lib/typescript/components/touchables/GenericTouchableProps.d.ts

@@ -14,4 +14,3 @@ export interface GenericTouchableProps extends Omit<TouchableWithoutFeedbackProp
     userSelect?: UserSelect;
     extraButtonProps?: ExtraButtonProps;
 }
-//# sourceMappingURL=GenericTouchableProps.d.ts.map

package/lib/typescript/components/touchables/GenericTouchableProps.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/touchables/TouchableHighlight.d.ts

@@ -39,4 +39,3 @@ export default class TouchableHighlight extends Component<TouchableHighlightProp
     render(): React.JSX.Element;
 }
 export {};
-//# sourceMappingURL=TouchableHighlight.d.ts.map

package/lib/typescript/components/touchables/TouchableHighlight.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Component } from 'react';
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import { StyleSheet, View, } from 'react-native';
+/**
+ * @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 {
+    static defaultProps = {
+        ...GenericTouchable.defaultProps,
+        activeOpacity: 0.85,
+        delayPressOut: 100,
+        underlayColor: 'black',
+    };
+    constructor(props) {
+        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); // TODO: not sure if OK but fixes error
+        return React.cloneElement(child, {
+            style: StyleSheet.compose(child.props.style, this.state.extraChildStyle),
+        });
+    }
+    onStateChange = (_from, to) => {
+        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/lib/typescript/components/touchables/TouchableNativeFeedback.android.d.ts

@@ -38,4 +38,3 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
     getExtraButtonProps(): import("./ExtraButtonProps").ExtraButtonProps;
     render(): React.JSX.Element;
 }
-//# sourceMappingURL=TouchableNativeFeedback.android.d.ts.map

package/lib/typescript/components/touchables/TouchableNativeFeedback.android.js

@@ -0,0 +1,65 @@
+import { Platform } from 'react-native';
+import * as React from 'react';
+import { Component } from 'react';
+import GenericTouchable from './GenericTouchable';
+/**
+ * @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 {
+    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) => ({
+        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) => ({
+        type: 'ThemeAttrAndroid',
+        attribute: 'selectableItemBackgroundBorderless',
+        rippleRadius,
+    });
+    static Ripple = (color, borderless, rippleRadius) => ({
+        type: 'RippleAndroid',
+        color,
+        borderless,
+        rippleRadius,
+    });
+    static canUseNativeForeground = () => Platform.OS === 'android' && Platform.Version >= 23;
+    getExtraButtonProps() {
+        const extraProps = {};
+        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/lib/typescript/components/touchables/TouchableNativeFeedback.d.ts

@@ -4,4 +4,3 @@ import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-nati
  */
 declare const TouchableNativeFeedback: typeof RNTouchableNativeFeedback;
 export default TouchableNativeFeedback;
-//# sourceMappingURL=TouchableNativeFeedback.d.ts.map

package/lib/typescript/components/touchables/TouchableNativeFeedback.js

@@ -0,0 +1,6 @@
+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/lib/typescript/components/touchables/TouchableNativeFeedbackProps.d.ts

@@ -6,4 +6,3 @@ export type TouchableNativeFeedbackExtraProps = ExtraButtonProps;
  * @deprecated TouchableNativeFeedback will be removed in the future version of Gesture Handler. Use Pressable instead.
  */
 export type TouchableNativeFeedbackProps = RNTouchableNativeFeedbackProps & GenericTouchableProps;
-//# sourceMappingURL=TouchableNativeFeedbackProps.d.ts.map

package/lib/typescript/components/touchables/TouchableNativeFeedbackProps.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/touchables/TouchableOpacity.d.ts

@@ -28,4 +28,3 @@ export default class TouchableOpacity extends Component<TouchableOpacityProps> {
     onStateChange: (_from: number, to: number) => void;
     render(): React.JSX.Element;
 }
-//# sourceMappingURL=TouchableOpacity.d.ts.map

package/lib/typescript/components/touchables/TouchableOpacity.js

@@ -0,0 +1,51 @@
+import { Animated, Easing, StyleSheet, View, } from 'react-native';
+import GenericTouchable, { TOUCHABLE_STATE } from './GenericTouchable';
+import * as React from 'react';
+import { Component } from 'react';
+/**
+ * @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 {
+    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();
+    };
+    opacity = new Animated.Value(this.getChildStyleOpacityWithDefault());
+    setOpacityTo = (value, duration) => {
+        Animated.timing(this.opacity, {
+            toValue: value,
+            duration: duration,
+            easing: Easing.inOut(Easing.quad),
+            useNativeDriver: this.props.useNativeAnimations ?? true,
+        }).start();
+    };
+    onStateChange = (_from, to) => {
+        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, // TODO: fix this
+                },
+            ]} onStateChange={this.onStateChange}>
+        {this.props.children ? this.props.children : <View />}
+      </GenericTouchable>);
+    }
+}

package/lib/typescript/components/touchables/TouchableWithoutFeedback.d.ts

@@ -12,4 +12,3 @@ declare const TouchableWithoutFeedback: React.ForwardRefExoticComponent<GenericT
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<GenericTouchable>>;
 export default TouchableWithoutFeedback;
-//# sourceMappingURL=TouchableWithoutFeedback.d.ts.map

package/lib/typescript/components/touchables/TouchableWithoutFeedback.js

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

package/lib/typescript/components/touchables/index.d.ts

@@ -5,4 +5,3 @@ export { default as TouchableNativeFeedback } from './TouchableNativeFeedback';
 export { default as TouchableWithoutFeedback } from './TouchableWithoutFeedback';
 export { default as TouchableOpacity } from './TouchableOpacity';
 export { default as TouchableHighlight } from './TouchableHighlight';
-//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/touchables/index.js

@@ -0,0 +1,4 @@
+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/lib/typescript/components/utils.d.ts

@@ -2,4 +2,3 @@ import { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
 export type RelationPropName = 'simultaneousWithExternalGesture' | 'requireExternalGestureToFail' | 'blocksExternalGesture';
 export type RelationPropType = Exclude<GestureRef, number> | Exclude<GestureRef, number>[];
 export declare function applyRelationProp(gesture: BaseGesture<any>, relationPropName: RelationPropName, relationProp: RelationPropType): void;
-//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/components/utils.js

@@ -0,0 +1,11 @@
+export function applyRelationProp(gesture, relationPropName, relationProp) {
+    if (!relationProp) {
+        return;
+    }
+    if (Array.isArray(relationProp)) {
+        gesture[relationPropName](...relationProp);
+    }
+    else {
+        gesture[relationPropName](relationProp);
+    }
+}

package/lib/typescript/findNodeHandle.d.ts

@@ -1,3 +1,2 @@
 import { findNodeHandle } from 'react-native';
 export default findNodeHandle;
-//# sourceMappingURL=findNodeHandle.d.ts.map

package/lib/typescript/findNodeHandle.js

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

package/lib/typescript/findNodeHandle.web.d.ts

@@ -1,3 +1,2 @@
 import type { GestureHandlerRef, SVGRef } from './web/interfaces';
 export default function findNodeHandle(viewRef: GestureHandlerRef | SVGRef | HTMLElement | SVGElement): HTMLElement | SVGElement | number;
-//# sourceMappingURL=findNodeHandle.web.d.ts.map

package/lib/typescript/findNodeHandle.web.js

@@ -0,0 +1,31 @@
+import { FlatList } from 'react-native';
+import { isRNSVGElement } from './web/utils';
+export default function findNodeHandle(viewRef) {
+    // TODO: Remove this once we remove old API.
+    if (viewRef instanceof FlatList) {
+        // @ts-ignore This is the only way to get the scroll ref from FlatList.
+        return viewRef._listRef._scrollRef.firstChild;
+    }
+    // Old API assumes that child handler is HTMLElement.
+    // However, if we nest handlers, we will get ref to another handler.
+    // In that case, we want to recursively call findNodeHandle with new handler viewTag (which can also be ref to another handler).
+    if (viewRef?.viewTag !== undefined) {
+        return findNodeHandle(viewRef.viewTag);
+    }
+    if (viewRef instanceof Element) {
+        if (viewRef.style.display === 'contents') {
+            return findNodeHandle(viewRef.firstChild);
+        }
+        return viewRef;
+    }
+    if (isRNSVGElement(viewRef)) {
+        return viewRef.elementRef.current;
+    }
+    // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
+    // We want to return the first descendant (in DFS order) that doesn't have this property.
+    let element = viewRef?.current;
+    while (element && element.style.display === 'contents') {
+        element = element.firstChild;
+    }
+    return element;
+}

package/lib/typescript/getShadowNodeFromRef.d.ts

@@ -1,2 +1 @@
 export declare function getShadowNodeFromRef(ref: unknown): unknown;
-//# sourceMappingURL=getShadowNodeFromRef.d.ts.map