react-native-gesture-handler 1.10.1 → 2.1.0

package/dist/src/components/GestureComponents.web.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { DrawerLayoutAndroid as RNDrawerLayoutAndroid, FlatList as RNFlatList, Switch as RNSwitch, TextInput as RNTextInput, ScrollView as RNScrollView, } from 'react-native';
-import createNativeWrapper from '../handlers/createNativeWrapper';
-export const ScrollView = createNativeWrapper(RNScrollView, {
-    disallowInterruption: true,
-});
-export const Switch = createNativeWrapper(RNSwitch, {
-    shouldCancelWhenOutside: false,
-    shouldActivateOnStart: true,
-    disallowInterruption: true,
-});
-export const TextInput = createNativeWrapper(RNTextInput);
-export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
-    disallowInterruption: true,
-});
-// @ts-ignore -- TODO(TS) to investigate if it's needed
-DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
-export const FlatList = React.forwardRef((props, ref) => (<RNFlatList ref={ref} {...props} renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps}/>}/>));

package/dist/src/components/GestureHandlerButton.web.js

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

package/dist/src/components/Swipeable.d.ts

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { PanGestureHandlerProps } from '../handlers/gestureHandlers';
-declare type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
-interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
-    enableTrackpadTwoFingerGesture?: boolean;
-    friction?: number;
-    leftThreshold?: number;
-    rightThreshold?: number;
-    overshootLeft?: boolean;
-    overshootRight?: boolean;
-    overshootFriction?: number;
-    onSwipeableLeftOpen?: () => void;
-    onSwipeableRightOpen?: () => void;
-    onSwipeableOpen?: () => void;
-    onSwipeableClose?: () => void;
-    onSwipeableLeftWillOpen?: () => void;
-    onSwipeableRightWillOpen?: () => void;
-    onSwipeableWillOpen?: () => void;
-    onSwipeableWillClose?: () => 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: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => 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: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
-    useNativeAnimations?: boolean;
-    animationOptions?: Record<string, unknown>;
-    containerStyle?: StyleProp<ViewStyle>;
-    childrenContainerStyle?: StyleProp<ViewStyle>;
-}
-declare 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);
-    UNSAFE_componentWillUpdate(props: SwipeableProps, state: SwipeableState): void;
-    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;
-    render(): JSX.Element;
-}
-export {};

package/dist/src/components/Swipeable.js

@@ -1,249 +0,0 @@
-// Similarily to the DrawerLayout component this deserves to be put in a
-// separate repo. Although, keeping it here for the time being will allow us
-// to move faster and fix possible issues quicker
-import * as React from 'react';
-import { Component } from 'react';
-import { Animated, StyleSheet, View, I18nManager, } from 'react-native';
-import { PanGestureHandler, TapGestureHandler, } from '../handlers/gestureHandlers';
-import { State } from '../State';
-const DRAG_TOSS = 0.05;
-export default class Swipeable extends Component {
-    constructor(props) {
-        super(props);
-        this.updateAnimatedEvent = (props, state) => {
-            const { friction, overshootFriction } = props;
-            const { dragX, rowTranslation, leftWidth = 0, rowWidth = 0 } = state;
-            const { rightOffset = rowWidth } = state;
-            const rightWidth = Math.max(0, rowWidth - rightOffset);
-            const { overshootLeft = leftWidth > 0, overshootRight = rightWidth > 0, } = props;
-            const transX = Animated.add(rowTranslation, dragX.interpolate({
-                inputRange: [0, friction],
-                outputRange: [0, 1],
-            })).interpolate({
-                inputRange: [
-                    -rightWidth - (overshootRight ? 1 : overshootFriction),
-                    -rightWidth,
-                    leftWidth,
-                    leftWidth + (overshootLeft ? 1 : overshootFriction),
-                ],
-                outputRange: [
-                    -rightWidth - (overshootRight || overshootFriction > 1 ? 1 : 0),
-                    -rightWidth,
-                    leftWidth,
-                    leftWidth + (overshootLeft || overshootFriction > 1 ? 1 : 0),
-                ],
-            });
-            this.transX = transX;
-            this.showLeftAction =
-                leftWidth > 0
-                    ? transX.interpolate({
-                        inputRange: [-1, 0, leftWidth],
-                        outputRange: [0, 0, 1],
-                    })
-                    : new Animated.Value(0);
-            this.leftActionTranslate = this.showLeftAction.interpolate({
-                inputRange: [0, Number.MIN_VALUE],
-                outputRange: [-10000, 0],
-                extrapolate: 'clamp',
-            });
-            this.showRightAction =
-                rightWidth > 0
-                    ? transX.interpolate({
-                        inputRange: [-rightWidth, 0, 1],
-                        outputRange: [1, 0, 0],
-                    })
-                    : new Animated.Value(0);
-            this.rightActionTranslate = this.showRightAction.interpolate({
-                inputRange: [0, Number.MIN_VALUE],
-                outputRange: [-10000, 0],
-                extrapolate: 'clamp',
-            });
-        };
-        this.onTapHandlerStateChange = ({ nativeEvent, }) => {
-            if (nativeEvent.oldState === State.ACTIVE) {
-                this.close();
-            }
-        };
-        this.onHandlerStateChange = (ev) => {
-            if (ev.nativeEvent.oldState === State.ACTIVE) {
-                this.handleRelease(ev);
-            }
-        };
-        this.handleRelease = (ev) => {
-            const { velocityX, translationX: dragX } = ev.nativeEvent;
-            const { leftWidth = 0, rowWidth = 0, rowState } = this.state;
-            const { rightOffset = rowWidth } = this.state;
-            const rightWidth = rowWidth - rightOffset;
-            const { friction, leftThreshold = leftWidth / 2, rightThreshold = rightWidth / 2, } = this.props;
-            const startOffsetX = this.currentOffset() + dragX / friction;
-            const translationX = (dragX + DRAG_TOSS * velocityX) / friction;
-            let toValue = 0;
-            if (rowState === 0) {
-                if (translationX > leftThreshold) {
-                    toValue = leftWidth;
-                }
-                else if (translationX < -rightThreshold) {
-                    toValue = -rightWidth;
-                }
-            }
-            else if (rowState === 1) {
-                // swiped to left
-                if (translationX > -leftThreshold) {
-                    toValue = leftWidth;
-                }
-            }
-            else {
-                // swiped to right
-                if (translationX < rightThreshold) {
-                    toValue = -rightWidth;
-                }
-            }
-            this.animateRow(startOffsetX, toValue, velocityX / friction);
-        };
-        this.animateRow = (fromValue, toValue, velocityX) => {
-            const { dragX, rowTranslation } = this.state;
-            dragX.setValue(0);
-            rowTranslation.setValue(fromValue);
-            this.setState({ rowState: Math.sign(toValue) });
-            Animated.spring(rowTranslation, {
-                restSpeedThreshold: 1.7,
-                restDisplacementThreshold: 0.4,
-                velocity: velocityX,
-                bounciness: 0,
-                toValue,
-                useNativeDriver: this.props.useNativeAnimations,
-                ...this.props.animationOptions,
-            }).start(({ finished }) => {
-                if (finished) {
-                    if (toValue > 0 && this.props.onSwipeableLeftOpen) {
-                        this.props.onSwipeableLeftOpen();
-                    }
-                    else if (toValue < 0 && this.props.onSwipeableRightOpen) {
-                        this.props.onSwipeableRightOpen();
-                    }
-                    if (toValue === 0) {
-                        this.props.onSwipeableClose?.();
-                    }
-                    else {
-                        this.props.onSwipeableOpen?.();
-                    }
-                }
-            });
-            if (toValue > 0 && this.props.onSwipeableLeftWillOpen) {
-                this.props.onSwipeableLeftWillOpen();
-            }
-            else if (toValue < 0 && this.props.onSwipeableRightWillOpen) {
-                this.props.onSwipeableRightWillOpen();
-            }
-            if (toValue === 0) {
-                this.props.onSwipeableWillClose?.();
-            }
-            else {
-                this.props.onSwipeableWillOpen?.();
-            }
-        };
-        this.onRowLayout = ({ nativeEvent }) => {
-            this.setState({ rowWidth: nativeEvent.layout.width });
-        };
-        this.currentOffset = () => {
-            const { leftWidth = 0, rowWidth = 0, rowState } = this.state;
-            const { rightOffset = rowWidth } = this.state;
-            const rightWidth = rowWidth - rightOffset;
-            if (rowState === 1) {
-                return leftWidth;
-            }
-            else if (rowState === -1) {
-                return -rightWidth;
-            }
-            return 0;
-        };
-        this.close = () => {
-            this.animateRow(this.currentOffset(), 0);
-        };
-        this.openLeft = () => {
-            const { leftWidth = 0 } = this.state;
-            this.animateRow(this.currentOffset(), leftWidth);
-        };
-        this.openRight = () => {
-            const { rowWidth = 0 } = this.state;
-            const { rightOffset = rowWidth } = this.state;
-            const rightWidth = rowWidth - rightOffset;
-            this.animateRow(this.currentOffset(), -rightWidth);
-        };
-        const dragX = new Animated.Value(0);
-        this.state = {
-            dragX,
-            rowTranslation: new Animated.Value(0),
-            rowState: 0,
-            leftWidth: undefined,
-            rightOffset: undefined,
-            rowWidth: undefined,
-        };
-        this.updateAnimatedEvent(props, this.state);
-        this.onGestureEvent = Animated.event([{ nativeEvent: { translationX: dragX } }], { useNativeDriver: props.useNativeAnimations });
-    }
-    UNSAFE_componentWillUpdate(props, state) {
-        if (this.props.friction !== props.friction ||
-            this.props.overshootLeft !== props.overshootLeft ||
-            this.props.overshootRight !== props.overshootRight ||
-            this.props.overshootFriction !== props.overshootFriction ||
-            this.state.leftWidth !== state.leftWidth ||
-            this.state.rightOffset !== state.rightOffset ||
-            this.state.rowWidth !== state.rowWidth) {
-            this.updateAnimatedEvent(props, state);
-        }
-    }
-    render() {
-        const { rowState } = this.state;
-        const { children, renderLeftActions, renderRightActions } = this.props;
-        const left = renderLeftActions && (<Animated.View style={[
-            styles.leftActions,
-            // all those and below parameters can have ! since they are all asigned in constructor in `updateAnimatedEvent` but TS cannot spot it for some reason
-            { transform: [{ translateX: this.leftActionTranslate }] },
-        ]}>
-        {renderLeftActions(this.showLeftAction, this.transX)}
-        <View onLayout={({ nativeEvent }) => this.setState({ leftWidth: nativeEvent.layout.x })}/>
-      </Animated.View>);
-        const right = renderRightActions && (<Animated.View style={[
-            styles.rightActions,
-            { transform: [{ translateX: this.rightActionTranslate }] },
-        ]}>
-        {renderRightActions(this.showRightAction, this.transX)}
-        <View onLayout={({ nativeEvent }) => this.setState({ rightOffset: nativeEvent.layout.x })}/>
-      </Animated.View>);
-        return (<PanGestureHandler activeOffsetX={[-10, 10]} {...this.props} onGestureEvent={this.onGestureEvent} onHandlerStateChange={this.onHandlerStateChange}>
-        <Animated.View onLayout={this.onRowLayout} style={[styles.container, this.props.containerStyle]}>
-          {left}
-          {right}
-          <TapGestureHandler enabled={rowState !== 0} onHandlerStateChange={this.onTapHandlerStateChange}>
-            <Animated.View pointerEvents={rowState === 0 ? 'auto' : 'box-only'} style={[
-            {
-                transform: [{ translateX: this.transX }],
-            },
-            this.props.childrenContainerStyle,
-        ]}>
-              {children}
-            </Animated.View>
-          </TapGestureHandler>
-        </Animated.View>
-      </PanGestureHandler>);
-    }
-}
-Swipeable.defaultProps = {
-    friction: 1,
-    overshootFriction: 1,
-    useNativeAnimations: true,
-};
-const styles = StyleSheet.create({
-    container: {
-        overflow: 'hidden',
-    },
-    leftActions: {
-        ...StyleSheet.absoluteFillObject,
-        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
-    },
-    rightActions: {
-        ...StyleSheet.absoluteFillObject,
-        flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
-    },
-});

package/dist/src/components/touchables/GenericTouchable.js

@@ -1,210 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import { Animated, Platform, } from 'react-native';
-import { State } from '../../State';
-import { BaseButton } from '../GestureButtons';
-/**
- * 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 {
-    constructor() {
-        super(...arguments);
-        // This flag is required since recognition of longPress implies not-invoking onPress
-        this.longPressDetected = false;
-        this.pointerInside = true;
-        // State of touchable
-        this.STATE = TOUCHABLE_STATE.UNDETERMINED;
-        this.onGestureEvent = ({ nativeEvent: { pointerInside }, }) => {
-            if (this.pointerInside !== pointerInside) {
-                if (pointerInside) {
-                    this.onMoveIn();
-                }
-                else {
-                    this.onMoveOut();
-                }
-            }
-            this.pointerInside = pointerInside;
-        };
-        this.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?.();
-                }
-            }
-        };
-        this.onLongPressDetected = () => {
-            this.longPressDetected = true;
-            // checked for in the caller of `onLongPressDetected`, but better to check twice
-            this.props.onLongPress?.();
-        };
-    }
-    // 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;
-    }
-    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 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,
-            nativeID: this.props.nativeID,
-            onLayout: this.props.onLayout,
-            hitSlop: this.props.hitSlop,
-        };
-        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={this.props.hitSlop} shouldActivateOnStart={this.props.shouldActivateOnStart} disallowInterruption={this.props.disallowInterruption} testID={this.props.testID} {...this.props.extraButtonProps}>
-        <Animated.View {...coreProps} style={this.props.style}>
-          {this.props.children}
-        </Animated.View>
-      </BaseButton>);
-    }
-}
-GenericTouchable.defaultProps = {
-    delayLongPress: 600,
-    extraButtonProps: {
-        rippleColor: 'transparent',
-    },
-};

package/dist/src/components/touchables/TouchableHighlight.js

@@ -1,73 +0,0 @@
-import * as React from 'react';
-import { Component } from 'react';
-import GenericTouchable, { TOUCHABLE_STATE, } from './GenericTouchable';
-import { StyleSheet, View, } from 'react-native';
-/**
- * TouchableHighlight follows RN's implementation
- */
-export default class TouchableHighlight extends Component {
-    constructor(props) {
-        super(props);
-        // Copied from RN
-        this.showUnderlay = () => {
-            if (!this.hasPressHandler()) {
-                return;
-            }
-            this.setState({
-                extraChildStyle: {
-                    opacity: this.props.activeOpacity,
-                },
-                extraUnderlayStyle: {
-                    backgroundColor: this.props.underlayColor,
-                },
-            });
-            this.props.onShowUnderlay?.();
-        };
-        this.hasPressHandler = () => this.props.onPress ||
-            this.props.onPressIn ||
-            this.props.onPressOut ||
-            this.props.onLongPress;
-        this.hideUnderlay = () => {
-            this.setState({
-                extraChildStyle: null,
-                extraUnderlayStyle: null,
-            });
-            this.props.onHideUnderlay?.();
-        };
-        this.onStateChange = (_from, to) => {
-            if (to === TOUCHABLE_STATE.BEGAN) {
-                this.showUnderlay();
-            }
-            else if (to === TOUCHABLE_STATE.UNDETERMINED ||
-                to === TOUCHABLE_STATE.MOVED_OUTSIDE) {
-                this.hideUnderlay();
-            }
-        };
-        this.state = {
-            extraChildStyle: null,
-            extraUnderlayStyle: null,
-        };
-    }
-    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),
-        });
-    }
-    render() {
-        const { style = {}, ...rest } = this.props;
-        const { extraUnderlayStyle } = this.state;
-        return (<GenericTouchable {...rest} style={[style, extraUnderlayStyle]} onStateChange={this.onStateChange}>
-        {this.renderChildren()}
-      </GenericTouchable>);
-    }
-}
-TouchableHighlight.defaultProps = {
-    ...GenericTouchable.defaultProps,
-    activeOpacity: 0.85,
-    delayPressOut: 100,
-    underlayColor: 'black',
-};