From 209c35278fe8fbb672fa19b247c06ae0f95e49a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82?= <michal.bert@swmansion.com>
Date: Wed, 21 Oct 2026 12:13:53 +0200
Subject: [PATCH 1/2] Update Swipeable example

---
 .../docs/components/reanimated_swipeable.mdx  | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
index d6c1e926f4..d843032c95 100644
--- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
+++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
@@ -341,34 +341,42 @@ A method that resets the swiping states of this `Swipeable` component. Unlike [`
 
 Example of a `Swipeable` component can be found in [Gesture Handler repository](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/new_api/components/swipeable/index.tsx).
 
+The actions are rendered beneath the row. In the example below, `RightAction` measures its own width and uses `translation` to stay attached to the right edge of the row, so it slides in together with the row instead of showing through it when the row content is not fully opaque.
+
 <CollapsibleCode 
 label="Show full example"
 expandedLabel="Hide full example"
-lineBounds={[10, 41]}
+lineBounds={[12, 49]}
 src={`
 import React from 'react';
-import { Text, StyleSheet } from 'react-native';
-
+import type { LayoutChangeEvent } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import type { SharedValue } from 'react-native-reanimated';
 import Reanimated, {
-  SharedValue,
   useAnimatedStyle,
+  useSharedValue,
 } from 'react-native-reanimated';
 
-function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
-  const styleAnimation = useAnimatedStyle(() => {
-    console.log('showRightProgress:', prog.value);
-    console.log('appliedTranslation:', drag.value);
+function RightAction({ translation }: { translation: SharedValue<number> }) {
+  const width = useSharedValue(0);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    width.value = e.nativeEvent.layout.width;
+  };
 
-    return {
-      transform: [{ translateX: drag.value + 50 }],
-    };
-  });
+  const styleAnimation = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: Math.max(translation.value, -width.value) + width.value },
+    ],
+  }));
 
   return (
-    <Reanimated.View style={styleAnimation}>
-      <Text style={styles.rightAction}>Text</Text>
+    <Reanimated.View
+      onLayout={onLayout}
+      style={[styles.rightAction, styleAnimation]}>
+      <Text style={styles.rightActionText}>Delete</Text>
     </Reanimated.View>
   );
 }
@@ -381,19 +389,22 @@ export default function Example() {
         friction={2}
         enableTrackpadTwoFingerGesture
         rightThreshold={40}
-        renderRightActions={RightAction}>
-        <Text>Swipe me!</Text>
+        renderRightActions={(_progress, translation) => (
+          <RightAction translation={translation} />
+        )}>
+        <Text>Swipe left!</Text>
       </ReanimatedSwipeable>
     </GestureHandlerRootView>
   );
 }
 
 const styles = StyleSheet.create({
-  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
-  separator: {
-    width: '100%',
-    borderTopWidth: 1,
+  rightAction: {
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    backgroundColor: 'purple',
   },
+  rightActionText: { color: 'white' },
   swipeable: {
     height: 50,
     backgroundColor: 'papayawhip',

From ca2b4fe4c0a7beeb58f503e43de091ae88bfe319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82?= <michal.bert@swmansion.com>
Date: Wed, 21 Oct 2026 12:33:59 +0200
Subject: [PATCH 2/2] Update example

---
 .../docs/components/reanimated_swipeable.mdx           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
index d843032c95..25b376e40f 100644
--- a/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
+++ b/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
@@ -341,12 +341,12 @@ A method that resets the swiping states of this `Swipeable` component. Unlike [`
 
 Example of a `Swipeable` component can be found in [Gesture Handler repository](https://github.com/software-mansion/react-native-gesture-handler/blob/main/apps/common-app/src/new_api/components/swipeable/index.tsx).
 
-The actions are rendered beneath the row. In the example below, `RightAction` measures its own width and uses `translation` to stay attached to the right edge of the row, so it slides in together with the row instead of showing through it when the row content is not fully opaque.
+In the example below, `RightAction` measures its own width and uses `translation` to stay attached to the right edge of the row, so it slides in together with the row instead of being uncovered in place.
 
 <CollapsibleCode 
 label="Show full example"
 expandedLabel="Hide full example"
-lineBounds={[12, 49]}
+lineBounds={[11, 50]}
 src={`
 import React from 'react';
 import type { LayoutChangeEvent } from 'react-native';
@@ -354,7 +354,7 @@ import { StyleSheet, Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import type { SharedValue } from 'react-native-reanimated';
-import Reanimated, {
+import Animated, {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
@@ -373,11 +373,11 @@ function RightAction({ translation }: { translation: SharedValue<number> }) {
   }));
 
   return (
-    <Reanimated.View
+    <Animated.View
       onLayout={onLayout}
       style={[styles.rightAction, styleAnimation]}>
       <Text style={styles.rightActionText}>Delete</Text>
-    </Reanimated.View>
+    </Animated.View>
   );
 }