Componentschevron_rightSwipeableRow

SwipeableRow

A row component with swipeable actions on both sides, supporting smooth timing animations.

9:41

signal_cellular_altwifibattery_full

Swipeable ItemSwipe left or right to see actions

Installation

Usage

Example.tsx

import { SwipeableRow } from './components/SwipeableRow';

export default function App() {
  return (
    <SwipeableRow
      rightActions={[{ label: 'Delete', color: 'red', onPress: () => {} }]}
    >
      <View style={{ padding: 16, backgroundColor: 'white' }}>
        <Text>Swipe me!</Text>
      </View>
    </SwipeableRow>
  );
}

Full Component Code

SwipeableRow.tsx

1import React from 'react';
2import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
3import { GestureDetector, Gesture } from 'react-native-gesture-handler';
4import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
5
6export const SwipeableRow = ({ children, rightActions = [], leftActions = [] }) => {
7  const translateX = useSharedValue(0);
8  
9  const pan = Gesture.Pan()
10    .onChange((e) => {
11       translateX.value += e.changeX;
12    })
13    .onEnd(() => {
14       // Snap logic...
15       translateX.value = withSpring(0);
16    });
17
18  return (
19    <View style={styles.container}>
20      <View style={styles.actions}>
21        {/* Render actions */}
22      </View>
23      <GestureDetector gesture={pan}>
24        <Animated.View style={[styles.content, { transform: [{ translateX }] }]}>
25          {children}
26        </Animated.View>
27      </GestureDetector>
28    </View>
29  );
30};

Props

Name	Type	Default	Description
rightActions	SwipeAction[]	[]	Actions on swipe left
leftActions	SwipeAction[]	[]	Actions on swipe right
inputRange	number	undefined	Snap threshold
containerStyle	StyleProp<ViewStyle>	-	Wrapper style
children	React.ReactNode	-	Row content

arrow_backOtpInput

TextShimmerarrow_forward