[docs] Improve Reanimated Swipeable documentation.

docs/docs/components/reanimated_swipeable.md

@@ -81,27 +81,29 @@ an argument.
 
 ### `renderLeftActions`
 
-method that is expected to return an action panel that is going to be revealed from the left side when user swipes right.
-This map describes the values to use as inputRange for extra interpolation:
+accepts a function which receives the following arguments:
 
-SharedValue: [startValue, endValue]
+- `progress` value representing swiping progress relative to the width of the returned element.  
+  Equals `0` when `swipeable` is closed, `1` when left action is open.  
+  Linearly increases to `Infinity` as left action overshoots it's open position.
+- `translation` horizontal translation of the `swipeable` in pixels.
+- `swipeable` provides an object exposing the methods listed [here](#methods)
 
-progress: [0, 1]
-
-drag: [0, +]
+This function must return a `ReactNode`.
 
 To support `rtl` flexbox layouts use `flexDirection` styling.
 
 ### `renderRightActions`
 
-method that is expected to return an action panel that is going to be revealed from the right side when user swipes left.
-This map describes the values to use as inputRange for extra interpolation:
-
-SharedValue: [startValue, endValue]
+accepts a function which receives the following arguments:
 
-progress: [0, 1]
+- `progress` value representing swiping progress relative to the width of the returned element.  
+  Equals `0` when `swipeable` is closed, `1` when right action is open.  
+  Linearly increases to `Infinity` as right action overshoots it's open position.
+- `translation` horizontal translation of the `swipeable` in pixels.
+- `swipeable` provides an object exposing the methods listed [here](#methods)
 
-drag: [0, -]
+This function must return a `ReactNode`.
 
 To support `rtl` flexbox layouts use `flexDirection` styling.
 
@@ -158,62 +160,61 @@ Unlike method `close`, this method does not trigger any animation.
 
 ### Example:
 
-See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/swipeableReanimation/index.tsx) from GestureHandler Example App.
+For a more in-depth presentation of differences between the new and the legacy implementations, see [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/release_tests/swipeableReanimation/index.tsx) from GestureHandler Example App.
 
 ```jsx
-import React, { Component } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-import { RectButton } from 'react-native-gesture-handler';
-import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import Reanimated, {
+  SharedValue,
+  useAnimatedStyle,
+} 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);
+
+    return {
+      transform: [{ translateX: drag.value + 50 }],
+    };
+  });
 
-const LeftAction = ({ dragX, swipeableRef }: LeftActionsProps) => {
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateX: interpolate(
-          dragX.value,
-          [0, 50, 100, 101],
-          [-20, 0, 0, 1],
-          Extrapolation.CLAMP
-        ),
-      },
-    ],
-  }));
   return (
-    <RectButton
-      style={{
-        flex: 1,
-        backgroundColor: '#497AFC',
-        justifyContent: 'center',
-      }}
-      onPress={() => swipeableRef.current!.close()}>
-      <Animated.Text>
-        Archive
-      </Animated.Text>
-    </RectButton>
+    <Reanimated.View style={styleAnimation}>
+      <Text style={styles.rightAction}>Text</Text>
+    </Reanimated.View>
   );
-};
-
-const renderLeftActions = (
-  _progress: any,
-  translation: SharedValue<number>,
-  swipeableRef: React.RefObject<SwipeableMethods>
-) => <LeftAction dragX={translation} swipeableRef={swipeableRef} />;
-
-function AppleStyleSwipeableRow({ children }: AppleStyleSwipeableRowProps) {
-  const swipeableRow = useRef<SwipeableMethods>(null);
+}
 
+export default function Example() {
   return (
-    <Swipeable
-      ref={swipeableRow}
-      friction={2}
-      enableTrackpadTwoFingerGesture
-      leftThreshold={30}
-      renderLeftActions={(_, progress) =>
-        renderLeftActions(_, progress, swipeableRow)
-      }>
-      <Text>Apple style swipeable</Text>
-    </Swipeable>
+    <GestureHandlerRootView>
+      <ReanimatedSwipeable
+        containerStyle={styles.swipeable}
+        friction={2}
+        enableTrackpadTwoFingerGesture
+        rightThreshold={40}
+        renderRightActions={RightAction}>
+        <Text>Swipe me!</Text>
+      </ReanimatedSwipeable>
+    </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
+  separator: {
+    width: '100%',
+    borderTopWidth: 1,
+  },
+  swipeable: {
+    height: 50,
+    backgroundColor: 'papayawhip',
+    alignItems: 'center',
+  },
+});
 ```

src/components/ReanimatedSwipeable.tsx

@@ -144,31 +144,28 @@ export interface SwipeableProps
   onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
 
   /**
-   *
-   * This map describes the values to use as inputRange for extra interpolation:
-   * AnimatedValue: [startValue, endValue]
-   *
-   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
+   * `progress`: Equals `0` when action is closed, `1` when action is open, linearly increases to `Infinity` as action overshoots it's open position.\
+   * `translation`: translation of the `swipeable` in pixels.
+   * `swipeable` provides an object exposing methods for controlling the `swipeable`
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderLeftActions?: (
-    progressAnimatedValue: SharedValue<number>,
-    dragAnimatedValue: SharedValue<number>,
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
     swipeable: SwipeableMethods
   ) => React.ReactNode;
+
   /**
-   *
-   * This map describes the values to use as inputRange for extra interpolation:
-   * AnimatedValue: [startValue, endValue]
-   *
-   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
+   * `progress`: Equals `0` when action is closed, `1` when action is open, linearly increases to `Infinity` as action overshoots it's open position.\
+   * `translation`: translation of the `swipeable` in pixels.
+   * `swipeable` provides an object exposing methods for controlling the `swipeable`
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderRightActions?: (
-    progressAnimatedValue: SharedValue<number>,
-    dragAnimatedValue: SharedValue<number>,
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
     swipeable: SwipeableMethods
   ) => React.ReactNode;