Reanimated Swipeable

info

This component is a drop-in replacement for the Swipeable component, rewritten using Reanimated.

ReanimatedSwipeable is designed for implementing swipeable rows or similar interactions. It places its children inside a pannable container that enables horizontal swiping to the left and right. Depending on the direction of the swipe, one of two "action" containers will be displayed, which can be configured using the renderLeftActions or renderRightActions props.

To use ReanimatedSwipeable, first ensure that Reanimated is installed and that your app is wrapped in GestureHandlerRootView. You can then import it as follows:

import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';

Properties

friction

friction?: number;

Number that 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".

leftThreshold

leftThreshold?: 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.

rightThreshold

rightThreshold?: 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.

dragOffsetFromLeft

dragOffsetFromLeft?: number | SharedValue<number>;

The horizontal offset from the starting point required to trigger a right-swipe gesture. Defaults to 10.

dragOffsetFromRight

dragOffsetFromRight?: number | SharedValue<number>;

The horizontal offset from the starting point required to trigger a left-swipe gesture. Defaults to -10.

overshootLeft

overshootLeft?: boolean;

A boolean 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 function is present.

overshootRight

overshootRight?: boolean;

A 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 function is present.

overshootFriction

overshootFriction?: number;

A number specifying the delay of visual interaction compared to the gesture distance when overshooting. The default value is 1, which means no friction. For a more native feel, try using a value of 8 or higher.

onSwipeableOpen

onSwipeableOpen?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable is opened (either right or left). Receives swipe direction as an argument.

onSwipeableClose

onSwipeableClose?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable is closed. Receives swipe direction as an argument.

onSwipeableWillOpen

onSwipeableWillOpen?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable starts animating on open (either right or left). Receives swipe direction as an argument.

onSwipeableWillClose

onSwipeableWillClose?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when Swipeable starts animating on close. Receives swipe direction as an argument.

onSwipeableOpenStartDrag

onSwipeableOpenStartDrag?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when a user starts to drag the Swipeable to open. Receives swipe direction as an argument.

onSwipeableCloseStartDrag

onSwipeableCloseStartDrag?: (
  direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
) => void;

A function that is called when a user starts to drag the Swipeable to close. Receives swipe direction as an argument.

renderLeftActions

renderLeftActions?: (
  progress: SharedValue<number>,
  translation: SharedValue<number>,
  swipeableMethods: SwipeableMethods
) => React.ReactNode;

A function that returns a component which will be rendered beneath the Swipeable after it is swiped to the right. This function accepts the following parameters:

• progress - a SharedValue that represents the swiping progress relative to the width of the returned element.
  • It equals 0 when the Swipeable is fully closed and 1 when it is fully opened.
  • As the element overshoots its open position, the value approaches Infinity.
• translation - a horizontal offset of the Swipeable relative to its closed position.
• swipeableMethods - provides an object exposing methods detailed in the methods section.

This function must return a ReactNode. To accommodate rtl (right-to-left) flexbox layouts, use the flexDirection style property.

renderRightActions

renderRightActions?: (
  progress: SharedValue<number>,
  translation: SharedValue<number>,
  swipeableMethods: SwipeableMethods
) => React.ReactNode;

A function that returns a component which will be rendered beneath the Swipeable after it is swiped to the left. This function accepts the following parameters:

• progress - a SharedValue that represents the swiping progress relative to the width of the returned element.
  • It equals 0 when the Swipeable is fully closed and 1 when it is fully opened.
  • As the element overshoots its open position, the value approaches Infinity.
• translation - a horizontal offset of the Swipeable relative to its closed position.
• swipeableMethods - provides an object exposing methods detailed in the methods section.

This function must return a ReactNode. To accommodate rtl (right-to-left) flexbox layouts, use the flexDirection style property.

containerStyle

containerStyle?: StyleProp<ViewStyle>;

Style object for the container (Animated.View).

childrenContainerStyle

childrenContainerStyle?: StyleProp<ViewStyle>;

Style object for the children container (Animated.View).

simultaneousWith

simultaneousWith?: AnyGesture | AnyGesture[];

Gestures to be recognized simultaneously with the Swipeable (see simultaneousWith).

requireToFail

requireToFail?: AnyGesture | AnyGesture[];

Gestures that Swipeable has to wait for before activating (see requireToFail).

block

block?: AnyGesture | AnyGesture[];

Gestures that Swipeable will prevent from activating (see block).

enableTrackpadTwoFingerGesture

iOS

Web

enableTrackpadTwoFingerGesture?: boolean | SharedValue<boolean>;

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.

enabled

enabled?: boolean | SharedValue<boolean>;

Indicates whether ReanimatedSwipeable should be analyzing the stream of touch events or not. Defaults to true.

testID

testID?: string;

Sets a testID property, allowing for querying ReanimatedSwipeable for it in tests.

hitSlop

hitSlop?: HitSlop | SharedValue<HitSlop>;

type HitSlop =
| number
| null
| undefined
| Partial<
    Record<
      'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
      number
    >
  >
| Record<'width' | 'left', number>
| Record<'width' | 'right', number>
| Record<'height' | 'top', number>
| Record<'height' | 'bottom', number>;

This parameter enables control over what part of the connected view area can be used to begin recognizing the gesture. When a negative number is provided, the bounds of the view will reduce the area by the given number of points in each of the sides evenly. See hitSlop section in Pan gesture for more details.

Swipeable ref methods

Using a reference to Swipeable allows you to manually trigger the opening and closing of the component, as well as reset its swiping state.

const swipeableRef = useRef<SwipeableMethods>(null);

close

close: () => void;

A method that closes component.

openLeft

openLeft: () => void;

A method that opens component on left side.

openRight

openRight: () => void;

A method that opens component on right side.

reset

reset: () => void;

A method that resets the swiping states of this Swipeable component. Unlike close, this method does not trigger any animation.

Example

Example of a Swipeable component can be found in Gesture Handler repository.

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
const styleAnimation = useAnimatedStyle(() => {
  console.log('showRightProgress:', prog.value);
  console.log('appliedTranslation:', drag.value);

  return {
    transform: [{ translateX: drag.value + 50 }],
  };
});

return (
  <Reanimated.View style={styleAnimation}>
    <Text style={styles.rightAction}>Text</Text>
  </Reanimated.View>
);
}

export default function Example() {
return (
  <GestureHandlerRootView>
    <ReanimatedSwipeable
      containerStyle={styles.swipeable}
      friction={2}
      enableTrackpadTwoFingerGesture
      rightThreshold={40}
      renderRightActions={RightAction}>
      <Text>Swipe me!</Text>
    </ReanimatedSwipeable>
  </GestureHandlerRootView>
);
}