react-native-gesture-handler 1.10.3 → 2.1.2

package/src/components/DrawerLayout.tsx

@@ -1,10 +1,10 @@
 // This component is based on RN's DrawerLayoutAndroid API
 //
-// It perhaps deserves to be put in a separate repo, but since it relies
-// on react-native-gesture-handler library which isn't very popular at the
-// moment I decided to keep it here for the time being. It will allow us
-// to move faster and fix issues that may arise in gesture handler library
-// that could be found when using the drawer component
+// It perhaps deserves to be put in a separate repo, but since it relies on
+// react-native-gesture-handler library which isn't very popular at the moment I
+// decided to keep it here for the time being. It will allow us to move faster
+// and fix issues that may arise in gesture handler library that could be found
+// when using the drawer component
 
 import * as React from 'react';
 import { Component } from 'react';
@@ -25,12 +25,16 @@ import {
 
 import {
   GestureEvent,
+  HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
   PanGestureHandler,
   PanGestureHandlerEventPayload,
+} from '../handlers/PanGestureHandler';
+import {
   TapGestureHandler,
-  HandlerStateChangeEvent,
   TapGestureHandlerEventPayload,
-} from '../handlers/gestureHandlers';
+} from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -50,16 +54,42 @@ export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 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
@@ -67,15 +97,56 @@ export interface DrawerLayoutProps {
   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;
 }
 
@@ -168,13 +239,12 @@ export default class DrawerLayout extends Component<
     let touchX = touchXValue;
 
     if (drawerPosition !== 'left') {
-      // Most of the code is written in a way to handle left-side drawer.
-      // In order to handle right-side drawer the only thing we need to
-      // do is to reverse events coming from gesture handler in a way they
-      // emulate left-side drawer gestures. E.g. dragX is simply -dragX, and
-      // touchX is calulcated by subtracing real touchX from the width of the
-      // container (such that when touch happens at the right edge the value
-      // is simply 0)
+      // Most of the code is written in a way to handle left-side drawer. In
+      // order to handle right-side drawer the only thing we need to do is to
+      // reverse events coming from gesture handler in a way they emulate
+      // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
+      // calulcated by subtracing real touchX from the width of the container
+      // (such that when touch happens at the right edge the value is simply 0)
       dragX = Animated.multiply(
         new Animated.Value(-1),
         dragXValue
@@ -204,11 +274,12 @@ export default class DrawerLayout extends Component<
     //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
     //    +---------------+    +---------------+    +---------------+    +---------------+
     //
-    // For the above to work properly we define animated value that will keep start position
-    // of the gesture. Then we use that value to calculate how much we need to subtract from
-    // the dragX. If the gesture started on the greyed out area we take the distance from the
-    // edge of the drawer to the start position. Otherwise we don't subtract at all and the
-    // drawer be pulled back as soon as you start the pan.
+    // For the above to work properly we define animated value that will keep
+    // start position of the gesture. Then we use that value to calculate how
+    // much we need to subtract from the dragX. If the gesture started on the
+    // greyed out area we take the distance from the edge of the drawer to the
+    // start position. Otherwise we don't subtract at all and the drawer be
+    // pulled back as soon as you start the pan.
     //
     // This is used only when drawerType is "front"
     //
@@ -345,14 +416,14 @@ export default class DrawerLayout extends Component<
     });
     const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;
     const fromLeft = drawerPosition === 'left';
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: showing ? undefined : edgeWidth }
       : { right: 0, width: showing ? undefined : edgeWidth };
@@ -377,10 +448,10 @@ export default class DrawerLayout extends Component<
     if (fromValue != null) {
       let nextFramePosition = fromValue;
       if (this.props.useNativeAnimations) {
-        // When using native driver, we predict the next position of the animation
-        // because it takes one frame of a roundtrip to pass RELEASE event from
-        // native driver to JS before we can start animating. Without it, it is more
-        // noticable that the frame is dropped.
+        // When using native driver, we predict the next position of the
+        // animation because it takes one frame of a roundtrip to pass RELEASE
+        // event from native driver to JS before we can start animating. Without
+        // it, it is more noticable that the frame is dropped.
         if (fromValue < toValue && velocity > 0) {
           nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
         } else if (fromValue > toValue && velocity < 0) {
@@ -422,7 +493,8 @@ export default class DrawerLayout extends Component<
       options.velocity ? options.velocity : 0
     );
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would not be clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would not be clickable
     this.forceUpdate();
   };
 
@@ -430,7 +502,8 @@ export default class DrawerLayout extends Component<
     // TODO: decide if it should be null or undefined is the proper value
     this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would be still clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would be still clickable
     this.forceUpdate();
   };
 
@@ -474,8 +547,8 @@ export default class DrawerLayout extends Component<
 
     // we rely on row and row-reverse flex directions to position the drawer
     // properly. Apparently for RTL these are flipped which requires us to use
-    // the opposite setting for the drawer to appear from left or right according
-    // to the drawerPosition prop
+    // the opposite setting for the drawer to appear from left or right
+    // according to the drawerPosition prop
     const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
 
     const dynamicDrawerStyles = {
@@ -546,8 +619,8 @@ export default class DrawerLayout extends Component<
   };
 
   private setPanGestureRef = (ref: PanGestureHandler) => {
-    // TODO(TS): make sure it is OK
-    // taken from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
+    // TODO(TS): make sure it is OK taken from
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
     (this
       .panGestureHandler as React.MutableRefObject<PanGestureHandler>).current = ref;
     this.props.onGestureRef?.(ref);
@@ -563,15 +636,15 @@ export default class DrawerLayout extends Component<
 
     const fromLeft = drawerPosition === 'left';
 
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
 
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }
       : { right: 0, width: this.drawerShown ? undefined : edgeWidth };

package/src/components/GestureButtons.tsx

@@ -15,32 +15,72 @@ import { State } from '../State';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-} from '../handlers/gestureHandlers';
+} 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
 }
 
 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 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;
 }
 
 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 {
+  /**
+   * Android only.
+   *
+   * Set this to false if you want the ripple animation to render only within view bounds.
+   */
   borderless?: boolean;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
   activeOpacity?: number;
 }
 
@@ -79,10 +119,10 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     this.lastActive = active;
   };
 
-  // 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").
+  // 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>
   ) => {

package/src/components/GestureComponents.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import {
+  PropsWithChildren,
+  ForwardedRef,
+  RefAttributes,
+  ReactElement,
+} from 'react';
 import {
   ScrollView as RNScrollView,
   ScrollViewProps as RNScrollViewProps,
@@ -15,7 +20,10 @@ import {
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
 
-import { NativeViewGestureHandlerProps } from '../handlers/NativeViewGestureHandler';
+import {
+  NativeViewGestureHandlerProps,
+  nativeViewProps,
+} from '../handlers/NativeViewGestureHandler';
 
 export const ScrollView = createNativeWrapper<
   PropsWithChildren<RNScrollViewProps>
@@ -24,15 +32,9 @@ export const ScrollView = createNativeWrapper<
   shouldCancelWhenOutside: false,
 });
 // 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 ScrollView & {
-  scrollTo(
-    y?: number | { x?: number; y?: number; animated?: boolean },
-    x?: number,
-    animated?: boolean
-  ): void;
-  scrollToEnd(options?: { animated: boolean }): void;
-};
+export type ScrollView = typeof ScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -40,47 +42,51 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   disallowInterruption: true,
 });
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type Switch = typeof Switch;
+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;
+export type TextInput = typeof TextInput & RNTextInput;
 
 export const DrawerLayoutAndroid = createNativeWrapper<
   PropsWithChildren<RNDrawerLayoutAndroidProps>
 >(RNDrawerLayoutAndroid, { disallowInterruption: true });
-// we use literal object since TS gives error when using RN's `positions`
-// @ts-ignore FIXME(TS) maybe this should be removed?
-DrawerLayoutAndroid.positions = { Left: 'left', Right: 'right' };
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid;
+export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
+  RNDrawerLayoutAndroid;
 
-export const FlatList = React.forwardRef<RNFlatList<any>, RNFlatListProps<any>>(
-  (props, ref) => (
+export const FlatList = React.forwardRef((props, ref) => {
+  const flatListProps = {};
+  const scrollViewProps = {};
+  for (const [propName, value] of Object.entries(props)) {
+    // 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}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+      {...flatListProps}
+      renderScrollComponent={(scrollProps) => (
+        <ScrollView {...{ ...scrollProps, ...scrollViewProps }} />
+      )}
     />
-  )
-);
+  );
+}) 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> = React.ComponentType<
-  RNFlatListProps<ItemT> &
-    NativeViewGestureHandlerProps &
-    React.RefAttributes<any>
-> & {
-  scrollToEnd: (params?: { animated?: boolean }) => void;
-  scrollToIndex: (params: {
-    animated?: boolean;
-    index: number;
-    viewOffset?: number;
-    viewPosition?: number;
-  }) => void;
-  scrollToItem: (params: {
-    animated?: boolean;
-    item: ItemT;
-    viewPosition?: number;
-  }) => void;
-  scrollToOffset: (params: { animated?: boolean; offset: number }) => void;
-};
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/components/Swipeable.tsx

@@ -1,6 +1,6 @@
 // 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
+// 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';
@@ -15,14 +15,18 @@ import {
 } from 'react-native';
 
 import {
-  PanGestureHandler,
-  TapGestureHandler,
-  PanGestureHandlerProps,
   GestureEvent,
-  PanGestureHandlerEventPayload,
   HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
+  PanGestureHandler,
+  PanGestureHandlerEventPayload,
+  PanGestureHandlerProps,
+} from '../handlers/PanGestureHandler';
+import {
+  TapGestureHandler,
   TapGestureHandlerEventPayload,
-} from '../handlers/gestureHandlers';
+} from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -32,30 +36,105 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
-interface SwipeableProps
+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;
+
+  /**
+   * 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;
+
+  /**
+   * Called when left action panel gets open.
+   */
   onSwipeableLeftOpen?: () => void;
+
+  /**
+   * Called when right action panel gets open.
+   */
   onSwipeableRightOpen?: () => void;
+
+  /**
+   * Called when action panel gets open (either right or left).
+   */
   onSwipeableOpen?: () => void;
+
+  /**
+   * Called when action panel is closed.
+   */
   onSwipeableClose?: () => void;
+
+  /**
+   * Called when left action panel starts animating on open.
+   */
   onSwipeableLeftWillOpen?: () => void;
+
+  /**
+   * Called when right action panel starts animating on open.
+   */
   onSwipeableRightWillOpen?: () => void;
+
+  /**
+   * Called when action panel starts animating on open (either right or left).
+   */
   onSwipeableWillOpen?: () => void;
+
+  /**
+   * Called when action panel starts animating on close.
+   */
   onSwipeableWillClose?: () => void;
+
   /**
    *
    * This map describes the values to use as inputRange for extra interpolation:
    * AnimatedValue: [startValue, endValue]
    *
-   * progressAnimatedValue: [0, 1]
-   * dragAnimatedValue: [0, +]
+   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
@@ -68,8 +147,7 @@ interface SwipeableProps
    * This map describes the values to use as inputRange for extra interpolation:
    * AnimatedValue: [startValue, endValue]
    *
-   * progressAnimatedValue: [0, 1]
-   * dragAnimatedValue: [0, -]
+   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
@@ -77,9 +155,21 @@ interface SwipeableProps
     progressAnimatedValue: Animated.AnimatedInterpolation,
     dragAnimatedValue: Animated.AnimatedInterpolation
   ) => 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>;
 }
 
@@ -165,17 +255,12 @@ export default class Swipeable extends Component<
         outputRange: [0, 1],
       })
     ).interpolate({
-      inputRange: [
-        -rightWidth - (overshootRight ? 1 : overshootFriction!),
-        -rightWidth,
-        leftWidth,
-        leftWidth + (overshootLeft ? 1 : overshootFriction!),
-      ],
+      inputRange: [-rightWidth - 1, -rightWidth, leftWidth, leftWidth + 1],
       outputRange: [
-        -rightWidth - (overshootRight || overshootFriction! > 1 ? 1 : 0),
+        -rightWidth - (overshootRight ? 1 / overshootFriction! : 0),
         -rightWidth,
         leftWidth,
-        leftWidth + (overshootLeft || overshootFriction! > 1 ? 1 : 0),
+        leftWidth + (overshootLeft ? 1 / overshootFriction! : 0),
       ],
     });
     this.transX = transX;
@@ -350,7 +435,9 @@ export default class Swipeable extends Component<
       <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
+          // 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!)}