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

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

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
+import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
+import { PanGestureHandler } from '../handlers/PanGestureHandler';
+export type DrawerPosition = 'left' | 'right';
+export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
+export type DrawerType = 'front' | 'back' | 'slide';
+export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
+export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+export interface DrawerLayoutProps {
+    /**
+     * This attribute is present in the standard implementation already and is one
+     * of the required params. Gesture handler version of DrawerLayout make it
+     * possible for the function passed as `renderNavigationView` to take an
+     * Animated value as a parameter that indicates the progress of drawer
+     * opening/closing animation (progress value is 0 when closed and 1 when
+     * opened). This can be used by the drawer component to animated its children
+     * while the drawer is opening or closing.
+     */
+    renderNavigationView: (progressAnimatedValue: Animated.Value) => React.ReactNode;
+    drawerPosition?: DrawerPosition;
+    drawerWidth?: number;
+    drawerBackgroundColor?: string;
+    drawerLockMode?: DrawerLockMode;
+    keyboardDismissMode?: DrawerKeyboardDismissMode;
+    /**
+     * Called when the drawer is closed.
+     */
+    onDrawerClose?: () => void;
+    /**
+     * Called when the drawer is opened.
+     */
+    onDrawerOpen?: () => void;
+    /**
+     * Called when the status of the drawer changes.
+     */
+    onDrawerStateChanged?: (newState: DrawerState, drawerWillShow: boolean) => void;
+    useNativeAnimations?: boolean;
+    drawerType?: DrawerType;
+    /**
+     * Defines how far from the edge of the content view the gesture should
+     * activate.
+     */
+    edgeWidth?: number;
+    minSwipeDistance?: number;
+    /**
+     * When set to true Drawer component will use
+     * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS
+     * status bar whenever the drawer is pulled or when its in an "open" state.
+     */
+    hideStatusBar?: boolean;
+    /**
+     * @default 'slide'
+     *
+     * Can be used when hideStatusBar is set to true and will select the animation
+     * used for hiding/showing the status bar. See
+     * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for
+     * more details
+     */
+    statusBarAnimation?: StatusBarAnimation;
+    /**
+     * @default black
+     *
+     * Color of a semi-transparent overlay to be displayed on top of the content
+     * view when drawer gets open. A solid color should be used as the opacity is
+     * added by the Drawer itself and the opacity of the overlay is animated (from
+     * 0% to 70%).
+     */
+    overlayColor?: string;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    drawerContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Enables two-finger gestures on supported devices, for example iPads with
+     * trackpads. If not enabled the gesture will require click + drag, with
+     * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+     * the gesture.
+     */
+    enableTrackpadTwoFingerGesture?: boolean;
+    onDrawerSlide?: (position: number) => void;
+    onGestureRef?: (ref: PanGestureHandler) => void;
+    children?: React.ReactNode | ((openValue?: AnimatedInterpolation) => React.ReactNode);
+    /**
+     * @default 'none'
+     * Defines which userSelect property should be used.
+     * Values: 'none'|'text'|'auto'
+     */
+    userSelect?: UserSelect;
+    /**
+     * @default 'auto'
+     * Defines which cursor property should be used when gesture activates.
+     * Values: see CSS cursor values
+     */
+    activeCursor?: ActiveCursor;
+}
+export type DrawerLayoutState = {
+    dragX: Animated.Value;
+    touchX: Animated.Value;
+    drawerTranslation: Animated.Value;
+    containerWidth: number;
+    drawerState: DrawerState;
+    drawerOpened: boolean;
+};
+export type DrawerMovementOption = {
+    velocity?: number;
+    speed?: number;
+};
+export default class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
+    static defaultProps: {
+        drawerWidth: number;
+        drawerPosition: string;
+        useNativeAnimations: boolean;
+        drawerType: string;
+        edgeWidth: number;
+        minSwipeDistance: number;
+        overlayColor: string;
+        drawerLockMode: string;
+        enableTrackpadTwoFingerGesture: boolean;
+    };
+    constructor(props: DrawerLayoutProps);
+    shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState): boolean;
+    private openValue?;
+    private onGestureEvent?;
+    private accessibilityIsModalView;
+    private pointerEventsView;
+    private panGestureHandler;
+    private drawerShown;
+    static positions: {
+        Left: string;
+        Right: string;
+    };
+    private updateAnimatedEvent;
+    private handleContainerLayout;
+    private emitStateChanged;
+    private openingHandlerStateChange;
+    private onTapHandlerStateChange;
+    private handleRelease;
+    private updateShowing;
+    private animateDrawer;
+    openDrawer: (options?: DrawerMovementOption) => void;
+    closeDrawer: (options?: DrawerMovementOption) => void;
+    private renderOverlay;
+    private renderDrawer;
+    private setPanGestureRef;
+    render(): React.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { 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;
+    /**
+     * Android only.
+     *
+     * Defines color of native ripple animation used since API level 21.
+     */
+    rippleColor?: any;
+    /**
+     * 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 declare const RawButton: React.ForwardRefExoticComponent<RawButtonProps & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare class BaseButton extends React.Component<BaseButtonProps> {
+    static defaultProps: {
+        delayLongPress: number;
+    };
+    private lastActive;
+    private longPressTimeout;
+    private longPressDetected;
+    constructor(props: BaseButtonProps);
+    private handleEvent;
+    private onLongPress;
+    private onHandlerStateChange;
+    private onGestureEvent;
+    render(): React.JSX.Element;
+}
+export declare class RectButton extends React.Component<RectButtonProps> {
+    static defaultProps: {
+        activeOpacity: number;
+        underlayColor: string;
+    };
+    private opacity;
+    constructor(props: RectButtonProps);
+    private onActiveStateChange;
+    render(): React.JSX.Element;
+}
+export declare class BorderlessButton extends React.Component<BorderlessButtonProps> {
+    static defaultProps: {
+        activeOpacity: number;
+        borderless: boolean;
+    };
+    private opacity;
+    constructor(props: BorderlessButtonProps);
+    private onActiveStateChange;
+    render(): React.JSX.Element;
+}
+export { default as PureNativeButton } from './GestureHandlerButton';

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

@@ -0,0 +1,22 @@
+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 { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+export declare const RefreshControl: React.ForwardRefExoticComponent<import("react-native").RefreshControlProps & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export type RefreshControl = typeof RefreshControl & RNRefreshControl;
+declare const GHScrollView: React.ForwardRefExoticComponent<RNScrollViewProps & {
+    children?: React.ReactNode;
+} & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const ScrollView: React.ForwardRefExoticComponent<RNScrollViewProps & NativeViewGestureHandlerProps & React.RefAttributes<RNScrollView>>;
+export type ScrollView = typeof GHScrollView & RNScrollView;
+export declare const Switch: React.ForwardRefExoticComponent<RNSwitchProps & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export type Switch = typeof Switch & RNSwitch;
+export declare const TextInput: React.ForwardRefExoticComponent<RNTextInputProps & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export type TextInput = typeof TextInput & RNTextInput;
+export declare const DrawerLayoutAndroid: React.ForwardRefExoticComponent<RNDrawerLayoutAndroidProps & {
+    children?: React.ReactNode;
+} & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid & RNDrawerLayoutAndroid;
+export declare const FlatList: <ItemT = any>(props: React.PropsWithChildren<RNFlatListProps<ItemT> & React.RefAttributes<FlatList<ItemT>> & NativeViewGestureHandlerProps>, ref: React.ForwardedRef<FlatList<ItemT>>) => ReactElement | null;
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;
+export {};

package/lib/typescript/components/GestureComponents.web.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FlatListProps } from 'react-native';
+export declare const ScrollView: React.ForwardRefExoticComponent<import("react-native").ScrollViewProps & import("..").NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const Switch: React.ForwardRefExoticComponent<import("react-native").SwitchProps & import("..").NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const TextInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & import("..").NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const DrawerLayoutAndroid: () => React.JSX.Element;
+export declare const RefreshControl: React.ForwardRefExoticComponent<import("react-native").ViewProps & import("..").NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
+export declare const FlatList: React.ForwardRefExoticComponent<FlatListProps<unknown> & React.RefAttributes<unknown>>;

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

@@ -0,0 +1,4 @@
+import { HostComponent } from 'react-native';
+import { RawButtonProps } from './GestureButtons';
+declare const _default: HostComponent<RawButtonProps>;
+export default _default;

package/lib/typescript/components/GestureHandlerButton.web.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { View } from 'react-native';
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<View>>;
+export default _default;

package/lib/typescript/components/GestureHandlerRootView.android.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export interface GestureHandlerRootViewProps extends PropsWithChildren<ViewProps> {
+}
+export default function GestureHandlerRootView(props: GestureHandlerRootViewProps): React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export interface GestureHandlerRootViewProps extends PropsWithChildren<ViewProps> {
+}
+export default function GestureHandlerRootView(props: GestureHandlerRootViewProps): React.JSX.Element;

package/lib/typescript/components/GestureHandlerRootView.web.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+export interface GestureHandlerRootViewProps extends PropsWithChildren<ViewProps> {
+}
+export default function GestureHandlerRootView(props: GestureHandlerRootViewProps): React.JSX.Element;

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

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
+type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
+export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
+    /**
+     * Enables two-finger gestures on supported devices, for example iPads with
+     * trackpads. If not enabled the gesture will require click + drag, with
+     * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+     * the gesture.
+     */
+    enableTrackpadTwoFingerGesture?: boolean;
+    /**
+     * Specifies how much the visual interaction will be delayed compared to the
+     * gesture distance. e.g. value of 1 will indicate that the swipeable panel
+     * should exactly follow the gesture, 2 means it is going to be two times
+     * "slower".
+     */
+    friction?: number;
+    /**
+     * Distance from the left edge at which released panel will animate to the
+     * open state (or the open panel will animate into the closed state). By
+     * default it's a half of the panel's width.
+     */
+    leftThreshold?: number;
+    /**
+     * Distance from the right edge at which released panel will animate to the
+     * open state (or the open panel will animate into the closed state). By
+     * default it's a half of the panel's width.
+     */
+    rightThreshold?: number;
+    /**
+     * Distance that the panel must be dragged from the left edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromLeftEdge?: number;
+    /**
+     * Distance that the panel must be dragged from the right edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromRightEdge?: number;
+    /**
+     * Value indicating if the swipeable panel can be pulled further than the left
+     * actions panel's width. It is set to true by default as long as the left
+     * panel render method is present.
+     */
+    overshootLeft?: boolean;
+    /**
+     * Value indicating if the swipeable panel can be pulled further than the
+     * right actions panel's width. It is set to true by default as long as the
+     * right panel render method is present.
+     */
+    overshootRight?: boolean;
+    /**
+     * Specifies how much the visual interaction will be delayed compared to the
+     * gesture distance at overshoot. Default value is 1, it mean no friction, for
+     * a native feel, try 8 or above.
+     */
+    overshootFriction?: number;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableOpen()
+     *
+     * Called when left action panel gets open.
+     */
+    onSwipeableLeftOpen?: () => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableOpen()
+     *
+     * Called when right action panel gets open.
+     */
+    onSwipeableRightOpen?: () => void;
+    /**
+     * Called when action panel gets open (either right or left).
+     */
+    onSwipeableOpen?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
+    /**
+     * Called when action panel is closed.
+     */
+    onSwipeableClose?: (direction: 'left' | 'right', swipeable: Swipeable) => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableWillOpen()
+     *
+     * Called when left action panel starts animating on open.
+     */
+    onSwipeableLeftWillOpen?: () => void;
+    /**
+     * @deprecated Use `direction` argument of onSwipeableWillOpen()
+     *
+     * Called when right action panel starts animating on open.
+     */
+    onSwipeableRightWillOpen?: () => void;
+    /**
+     * Called when action panel starts animating on open (either right or left).
+     */
+    onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts animating on close.
+     */
+    onSwipeableWillClose?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts being shown on dragging to open.
+     */
+    onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
+    /**
+     * Called when action panel starts being shown on dragging to close.
+     */
+    onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
+    /**
+     *
+     * This map describes the values to use as inputRange for extra interpolation:
+     * AnimatedValue: [startValue, endValue]
+     *
+     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderLeftActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    /**
+     *
+     * This map describes the values to use as inputRange for extra interpolation:
+     * AnimatedValue: [startValue, endValue]
+     *
+     * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
+     *
+     * To support `rtl` flexbox layouts use `flexDirection` styling.
+     * */
+    renderRightActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    useNativeAnimations?: boolean;
+    animationOptions?: Record<string, unknown>;
+    /**
+     * Style object for the container (`Animated.View`), for example to override
+     * `overflow: 'hidden'`.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style object for the children container (`Animated.View`), for example to
+     * apply `flex: 1`
+     */
+    childrenContainerStyle?: StyleProp<ViewStyle>;
+}
+type SwipeableState = {
+    dragX: Animated.Value;
+    rowTranslation: Animated.Value;
+    rowState: number;
+    leftWidth?: number;
+    rightOffset?: number;
+    rowWidth?: number;
+};
+export default class Swipeable extends Component<SwipeableProps, SwipeableState> {
+    static defaultProps: {
+        friction: number;
+        overshootFriction: number;
+        useNativeAnimations: boolean;
+    };
+    constructor(props: SwipeableProps);
+    shouldComponentUpdate(props: SwipeableProps, state: SwipeableState): boolean;
+    private onGestureEvent?;
+    private transX?;
+    private showLeftAction?;
+    private leftActionTranslate?;
+    private showRightAction?;
+    private rightActionTranslate?;
+    private updateAnimatedEvent;
+    private onTapHandlerStateChange;
+    private onHandlerStateChange;
+    private handleRelease;
+    private animateRow;
+    private onRowLayout;
+    private currentOffset;
+    close: () => void;
+    openLeft: () => void;
+    openRight: () => void;
+    reset: () => void;
+    render(): React.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export default function gestureHandlerRootHOC<P extends Record<string, unknown>>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { StyleProp, ViewStyle, TouchableWithoutFeedbackProps, Insets } from 'react-native';
+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 declare const TOUCHABLE_STATE: {
+    readonly UNDETERMINED: 0;
+    readonly BEGAN: 1;
+    readonly MOVED_OUTSIDE: 2;
+};
+type TouchableState = typeof TOUCHABLE_STATE[keyof typeof TOUCHABLE_STATE];
+export interface GenericTouchableProps extends Omit<TouchableWithoutFeedbackProps, 'hitSlop'> {
+    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;
+}
+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: number;
+        extraButtonProps: {
+            rippleColor: string;
+            exclusive: boolean;
+        };
+    };
+    pressInTimeout: Timeout;
+    pressOutTimeout: Timeout;
+    longPressTimeout: Timeout;
+    longPressDetected: boolean;
+    pointerInside: boolean;
+    STATE: TouchableState;
+    handlePressIn(): void;
+    handleMoveOutside(): void;
+    handleGoToUndetermined(): void;
+    componentDidMount(): void;
+    reset(): void;
+    moveToState(newState: TouchableState): void;
+    onGestureEvent: ({ nativeEvent: { pointerInside }, }: GestureEvent<NativeViewGestureHandlerPayload>) => void;
+    onHandlerStateChange: ({ nativeEvent, }: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>) => void;
+    onLongPressDetected: () => void;
+    componentWillUnmount(): void;
+    onMoveIn(): void;
+    onMoveOut(): void;
+    render(): React.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Component } from 'react';
+import { GenericTouchableProps } from './GenericTouchable';
+import { TouchableHighlightProps as RNTouchableHighlightProps, ColorValue } 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: {
+        activeOpacity: number;
+        delayPressOut: number;
+        underlayColor: string;
+        delayLongPress: number;
+        extraButtonProps: {
+            rippleColor: string;
+            exclusive: boolean;
+        };
+    };
+    constructor(props: TouchableHighlightProps);
+    showUnderlay: () => void;
+    hasPressHandler: () => (((event: import("react-native").GestureResponderEvent) => void) & (() => void)) | undefined;
+    hideUnderlay: () => void;
+    renderChildren(): React.JSX.Element;
+    onStateChange: (_from: number, to: number) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/typescript/components/touchables/TouchableNativeFeedback.android.d.ts

@@ -0,0 +1,45 @@
+import { TouchableNativeFeedbackProps as RNTouchableNativeFeedbackProps, ColorValue } from 'react-native';
+import * as React from 'react';
+import { Component } from 'react';
+import { 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: {
+        useForeground: boolean;
+        extraButtonProps: {
+            rippleColor: null;
+        };
+        delayLongPress: number;
+    };
+    static SelectableBackground: (rippleRadius?: number) => {
+        type: string;
+        attribute: string;
+        rippleRadius: number | undefined;
+    };
+    static SelectableBackgroundBorderless: (rippleRadius?: number) => {
+        type: string;
+        attribute: string;
+        rippleRadius: number | undefined;
+    };
+    static Ripple: (color: ColorValue, borderless: boolean, rippleRadius?: number) => {
+        type: string;
+        color: ColorValue;
+        borderless: boolean;
+        rippleRadius: number | undefined;
+    };
+    static canUseNativeForeground: () => boolean;
+    getExtraButtonProps(): TouchableNativeFeedbackExtraProps;
+    render(): React.JSX.Element;
+}

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

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