Skip to main content
Version: 3.x

Reanimated Swipeable

info

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

Reanimated Swipeable 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 Reanimated Swipeable, 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.

dragOffsetFromLeftEdge​

dragOffsetFromLeftEdge?: number;

Distance that the panel must be dragged from the left edge to be considered a swipe. The default value is 10.

dragOffsetFromRightEdge​

dragOffsetFromRightEdge?: number;

Distance that the panel must be dragged from the right edge to be considered a swipe. The default value is 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).

simultaneousWithExternalGesture​

simultaneousWithExternalGesture?: AnyGesture | AnyGesture[];

Gestures to be recognized simultaneously with the Swipeable (see gesture composition section).

requireExternalGestureToFail​

requireExternalGestureToFail?: AnyGesture | AnyGesture[];

Gestures that Swipeable has to wait for before activating (see gesture composition section).

blocksExternalGesture​

blocksExternalGesture?: AnyGesture | AnyGesture[];

Gestures that Swipeable will prevent from activating (see gesture composition section).

enableTrackpadTwoFingerGesture​

iOS
enableTrackpadTwoFingerGesture?: 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;

Indicates whether ReanimatedSwipeable should be analyzing 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>
);
}