Create a separate component out of the new Swipeable row

FabricExample/tsconfig.json

@@ -11,9 +11,7 @@
       "react-native-gesture-handler/DrawerLayout": [
         "../src/components/DrawerLayout.tsx"
       ],
-      "react-native-gesture-handler/jest-utils": [
-        "../src/jestUtils/index.ts"
-      ]
+      "react-native-gesture-handler/jest-utils": ["../src/jestUtils/index.ts"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "index.js"]

MacOSExample/tsconfig.json

@@ -11,9 +11,7 @@
       "react-native-gesture-handler/DrawerLayout": [
         "../src/components/DrawerLayout.tsx"
       ],
-      "react-native-gesture-handler/jest-utils": [
-        "../src/jestUtils/index.ts"
-      ]
+      "react-native-gesture-handler/jest-utils": ["../src/jestUtils/index.ts"]
     }
   }
 }

ReanimatedSwipeable/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/components/ReanimatedSwipeable",
+  "module": "../lib/module/components/ReanimatedSwipeable",
+  "react-native": "../src/components/ReanimatedSwipeable",
+  "types": "../lib/typescript/components/ReanimatedSwipeable.d.ts"
+}

e2e/web-tests/babel.config.js

@@ -14,6 +14,8 @@ module.exports = function (api) {
               '../../src/components/DrawerLayout',
             'react-native-gesture-handler/Swipeable':
               '../../src/components/Swipeable',
+            'react-native-gesture-handler/ReanimatedSwipeable':
+              '../../src/components/ReanimatedSwipeable',
             'react-native-gesture-handler': '../../src/index',
           },
         },

e2e/web-tests/tsconfig.json

@@ -1,7 +1,7 @@
 {
   // "extends": "expo/tsconfig.base",
   "extends": "../../tsconfig.json",
-  "compilerOptions": {    
+  "compilerOptions": {
     // "strict": true,
     "baseUrl": ".",
     "paths": {
@@ -15,7 +15,7 @@
       "react-native-gesture-handler/jest-utils": [
         "../../src/jestUtils/index.ts"
       ],
-      "react": ["./node_modules/@types/react"],
+      "react": ["./node_modules/@types/react"]
     }
   },
   "include": ["./tests/*.ts", "./components/*.tsx", "./App.tsx"]

example/src/new_api/swipeable/AppleStyleSwipeableRow.tsx

@@ -8,7 +8,9 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated';
-import Swipeable, { SwipeableMethods } from 'src/new_api/swipeable/Swipeable';
+import Swipeable, {
+  SwipeableMethods,
+} from '../../../../src/components/ReanimatedSwipeable';
 
 interface AppleStyleSwipeableRowProps {
   children?: ReactNode;
@@ -135,16 +137,16 @@ export default function AppleStyleSwipeableRow({
       enableTrackpadTwoFingerGesture
       leftThreshold={30}
       rightThreshold={40}
-      renderLeftActions={(_, progress) =>
+      renderLeftActions={(_: any, progress: SharedValue<number>) =>
         renderLeftActions(_, progress, swipeableRow)
       }
-      renderRightActions={(_, progress) =>
+      renderRightActions={(_: any, progress: SharedValue<number>) =>
         renderRightActions(_, progress, swipeableRow)
       }
-      onSwipeableWillOpen={(direction) => {
+      onSwipeableWillOpen={(direction: any) => {
         console.log(`Opening swipeable from the ${direction}`);
       }}
-      onSwipeableWillClose={(direction) => {
+      onSwipeableWillClose={(direction: any) => {
         console.log(`Closing swipeable to the ${direction}`);
       }}>
       {children}

example/src/new_api/swipeable/GmailStyleSwipeableRow.tsx

@@ -8,7 +8,9 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated';
-import Swipeable, { SwipeableMethods } from 'src/new_api/swipeable/Swipeable';
+import Swipeable, {
+  SwipeableMethods,
+} from '../../../../src/components/ReanimatedSwipeable';
 
 interface LeftActionProps {
   dragX: SharedValue<number>;
@@ -82,10 +84,10 @@ export default function GmailStyleSwipeableRow({
       leftThreshold={80}
       enableTrackpadTwoFingerGesture
       rightThreshold={40}
-      renderLeftActions={(_, progress) =>
+      renderLeftActions={(_: any, progress: SharedValue<number>) =>
         renderLeftActions(_, progress, swipeableRow)
       }
-      renderRightActions={(_, progress) =>
+      renderRightActions={(_: any, progress: SharedValue<number>) =>
         renderRightActions(_, progress, swipeableRow)
       }>
       {children}

package.json

@@ -39,6 +39,7 @@
     "android/noreanimated/src/main/java/",
     "apple/",
     "Swipeable/",
+    "ReanimatedSwipeable/",
     "jest-utils/",
     "DrawerLayout/",
     "README.md",

example/src/new_api/swipeable/Swipeable.tsx → src/components/ReanimatedSwipeable.tsx

@@ -6,7 +6,6 @@ import React, {
   ForwardedRef,
   forwardRef,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useRef,
 } from 'react';
@@ -17,7 +16,7 @@ import {
   GestureUpdateEvent,
   PanGestureHandlerEventPayload,
   PanGestureHandlerProps,
-} from 'react-native-gesture-handler';
+} from '../.';
 import Animated, {
   Extrapolation,
   SharedValue,
@@ -317,10 +316,41 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       );
     };
 
+    const dispatchImmidiateEvents = useCallback(
+      (fromValue: number, toValue: number) => {
+        if (toValue > 0 && props.onSwipeableWillOpen) {
+          runOnJS(props.onSwipeableWillOpen)('left');
+        } else if (toValue < 0 && props.onSwipeableWillOpen) {
+          runOnJS(props.onSwipeableWillOpen)('right');
+        } else if (props.onSwipeableWillClose) {
+          const closingDirection = fromValue > 0 ? 'left' : 'right';
+          runOnJS(props.onSwipeableWillClose)(closingDirection);
+        }
+      },
+      [props.onSwipeableWillClose, props.onSwipeableWillOpen]
+    );
+
+    const dispatchEndEvents = useCallback(
+      (fromValue: number, toValue: number) => {
+        if (toValue > 0 && props.onSwipeableOpen) {
+          runOnJS(props.onSwipeableOpen)('left', swipeableMethods.current);
+        } else if (toValue < 0 && props.onSwipeableOpen) {
+          runOnJS(props.onSwipeableOpen)('right', swipeableMethods.current);
+        } else if (props.onSwipeableClose) {
+          const closingDirection = fromValue > 0 ? 'left' : 'right';
+          runOnJS(props.onSwipeableClose)(
+            closingDirection,
+            swipeableMethods.current
+          );
+        }
+      },
+      [props.onSwipeableClose, props.onSwipeableOpen]
+    );
+
     const animateRow = useCallback(
       (fromValue: number, toValue: number, velocityX?: number) => {
         'worklet';
-
+        console.log('animatin');
         rowState.value = Math.sign(toValue);
 
         appliedTranslation.value = withSpring(
@@ -334,37 +364,20 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           },
           (isFinished) => {
             if (isFinished) {
-              if (toValue > 0 && props.onSwipeableOpen) {
-                runOnJS(props.onSwipeableOpen)(
-                  'left',
-                  swipeableMethods.current
-                );
-              } else if (toValue < 0 && props.onSwipeableOpen) {
-                runOnJS(props.onSwipeableOpen)(
-                  'right',
-                  swipeableMethods.current
-                );
-              } else if (props.onSwipeableClose) {
-                const closingDirection = fromValue > 0 ? 'left' : 'right';
-                runOnJS(props.onSwipeableClose)(
-                  closingDirection,
-                  swipeableMethods.current
-                );
-              }
+              dispatchEndEvents(fromValue, toValue);
             }
           }
         );
 
-        if (toValue > 0 && props.onSwipeableWillOpen) {
-          runOnJS(props.onSwipeableWillOpen)('left');
-        } else if (toValue < 0 && props.onSwipeableWillOpen) {
-          runOnJS(props.onSwipeableWillOpen)('right');
-        } else if (props.onSwipeableWillClose) {
-          const closingDirection = fromValue > 0 ? 'left' : 'right';
-          runOnJS(props.onSwipeableWillClose)(closingDirection);
-        }
+        dispatchImmidiateEvents(fromValue, toValue);
       },
-      [appliedTranslation, props, rowState, swipeableMethods]
+      [
+        appliedTranslation,
+        dispatchEndEvents,
+        dispatchImmidiateEvents,
+        props.animationOptions,
+        rowState,
+      ]
     );
 
     const onRowLayout = ({ nativeEvent }: LayoutChangeEvent) => {
@@ -379,47 +392,39 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       dragOffsetFromRightEdge = 10,
     } = props;
 
-    useEffect(() => {
-      swipeableMethods.current = {
-        close() {
-          'worklet';
-          animateRow(calculateCurrentOffset(), 0);
-        },
-        openLeft() {
-          'worklet';
-          animateRow(calculateCurrentOffset(), leftWidth.value);
-        },
-        openRight() {
-          'worklet';
-          rightWidth.value = rowWidth.value - rightOffset.value;
-          animateRow(calculateCurrentOffset(), -rightWidth.value);
-        },
-        reset() {
-          'worklet';
-          userDrag.value = 0;
-          appliedTranslation.value = 0;
-          rowState.value = 0;
-        },
-      };
-    }, [
-      animateRow,
-      calculateCurrentOffset,
-      appliedTranslation,
-      leftWidth,
-      rightOffset,
-      rightWidth,
-      rowState,
-      rowWidth,
-      userDrag,
-    ]);
+    swipeableMethods.current = {
+      close() {
+        'worklet';
+        console.log('somethin');
+        animateRow(calculateCurrentOffset(), 0);
+      },
+      openLeft() {
+        'worklet';
+        animateRow(calculateCurrentOffset(), leftWidth.value);
+      },
+      openRight() {
+        'worklet';
+        rightWidth.value = rowWidth.value - rightOffset.value;
+        animateRow(calculateCurrentOffset(), -rightWidth.value);
+      },
+      reset() {
+        'worklet';
+        userDrag.value = 0;
+        appliedTranslation.value = 0;
+        rowState.value = 0;
+      },
+    };
 
-    const leftAnimatedStyle = useAnimatedStyle(() => ({
-      transform: [
-        {
-          translateX: leftActionTranslate.value,
-        },
-      ],
-    }));
+    const leftAnimatedStyle = useAnimatedStyle(
+      () => ({
+        transform: [
+          {
+            translateX: leftActionTranslate.value,
+          },
+        ],
+      }),
+      [leftActionTranslate]
+    );
 
     const leftElement = renderLeftActions && (
       <Animated.View style={[styles.leftActions, leftAnimatedStyle]}>
@@ -436,13 +441,16 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       </Animated.View>
     );
 
-    const rightAnimatedStyle = useAnimatedStyle(() => ({
-      transform: [
-        {
-          translateX: rightActionTranslate.value,
-        },
-      ],
-    }));
+    const rightAnimatedStyle = useAnimatedStyle(
+      () => ({
+        transform: [
+          {
+            translateX: rightActionTranslate.value,
+          },
+        ],
+      }),
+      [rightActionTranslate]
+    );
 
     const rightElement = renderRightActions && (
       <Animated.View style={[styles.rightActions, rightAnimatedStyle]}>
@@ -530,9 +538,11 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         }
         updateAnimatedEvent();
       })
-      .onEnd((event) => {
-        handleRelease(event);
-      });
+      .onEnd(
+        (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+          handleRelease(event);
+        }
+      );
 
     panGesture.activeOffsetX([
       -dragOffsetFromRightEdge,
@@ -544,10 +554,13 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       swipeableMethods,
     ]);
 
-    const animatedStyle = useAnimatedStyle(() => ({
-      transform: [{ translateX: appliedTranslation.value }],
-      pointerEvents: rowState.value === 0 ? 'auto' : 'box-only',
-    }));
+    const animatedStyle = useAnimatedStyle(
+      () => ({
+        transform: [{ translateX: appliedTranslation.value }],
+        pointerEvents: rowState.value === 0 ? 'auto' : 'box-only',
+      }),
+      [appliedTranslation, rowState]
+    );
 
     const composedGesture = Gesture.Race(panGesture, tapGesture);
     return (

tsconfig.json

@@ -21,5 +21,10 @@
     "noUnusedParameters": true,
     "noUnusedLocals": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "jestSetup.js"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "jestSetup.js",
+    "Swipeable/Swipeable.tsx"
+  ]
 }