Create a separate component out of the new Swipeable row (#2936)

This PR takes configures `ReanimatedSwipeable` to be a part of the
`gesture handler` package.

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/App.tsx

@@ -35,6 +35,7 @@ import ContextMenu from './src/release_tests/contextMenu';
 import NestedTouchables from './src/release_tests/nestedTouchables';
 import NestedButtons from './src/release_tests/nestedButtons';
 import PointerType from './src/release_tests/pointerType';
+import SwipeableReanimation from './src/release_tests/swipeableReanimation';
 import NestedGestureHandlerRootViewWithModal from './src/release_tests/nestedGHRootViewWithModal';
 import { PinchableBox } from './src/recipes/scaleAndRotate';
 import PanAndScroll from './src/recipes/panAndScroll';
@@ -140,6 +141,7 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'MouseButtons', component: MouseButtons },
       { name: 'ContextMenu (web only)', component: ContextMenu },
       { name: 'PointerType', component: PointerType },
+      { name: 'Swipeable Reanimation', component: SwipeableReanimation },
       { name: 'RectButton (borders)', component: RectButtonBorders },
     ],
   },

example/babel.config.js

@@ -8,6 +8,8 @@ module.exports = function (api) {
         {
           extensions: ['.js', '.ts', '.tsx'],
           alias: {
+            'react-native-gesture-handler/ReanimatedSwipeable':
+              '../src/components/ReanimatedSwipeable',
             'react-native-gesture-handler': '../src/index',
           },
         },

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 'react-native-gesture-handler/ReanimatedSwipeable';
 
 interface AppleStyleSwipeableRowProps {
   children?: ReactNode;

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 'react-native-gesture-handler/ReanimatedSwipeable';
 
 interface LeftActionProps {
   dragX: SharedValue<number>;

example/src/new_api/swipeable/index.tsx

@@ -42,11 +42,13 @@ const SwipeableRow = ({ item, index }: { item: DataRow; index: number }) => {
   }
 };
 
+const Separator = () => <View style={styles.separator} />;
+
 export default function App() {
   return (
     <FlatList
       data={DATA}
-      ItemSeparatorComponent={() => <View style={styles.separator} />}
+      ItemSeparatorComponent={Separator}
       renderItem={({ item, index }) => (
         <SwipeableRow item={item} index={index} />
       )}

example/src/release_tests/swipeableReanimation/index.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { Text, Animated, StyleSheet, View } from 'react-native';
+
+import {
+  Swipeable,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import Reanimated, {
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
+  const styleAnimation = useAnimatedStyle(() => {
+    console.log('[R] showLeftProgress:', prog.value);
+    console.log('[R] appliedTranslation:', drag.value);
+
+    return {
+      transform: [{ translateX: drag.value - 50 }],
+    };
+  });
+
+  return (
+    <Reanimated.View style={styleAnimation}>
+      <Text style={styles.leftAction}>Text</Text>
+    </Reanimated.View>
+  );
+}
+
+function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
+  const styleAnimation = useAnimatedStyle(() => {
+    console.log('[R] showRightProgress:', prog.value);
+    console.log('[R] appliedTranslation:', drag.value);
+
+    return {
+      transform: [{ translateX: drag.value + 50 }],
+    };
+  });
+
+  return (
+    <Reanimated.View style={styleAnimation}>
+      <Text style={styles.rightAction}>Text</Text>
+    </Reanimated.View>
+  );
+}
+
+function LegacyLeftAction(prog: any, drag: any) {
+  prog.addListener((value: any) => {
+    console.log('[L] showLeftProgress:', value.value);
+  });
+  drag.addListener((value: any) => {
+    console.log('[L] appliedTranslation:', value.value);
+  });
+
+  const trans = Animated.subtract(drag, 50);
+
+  return (
+    <Animated.Text
+      style={[
+        styles.leftAction,
+        {
+          transform: [{ translateX: trans }],
+        },
+      ]}>
+      Text
+    </Animated.Text>
+  );
+}
+
+function LegacyRightAction(prog: any, drag: any) {
+  prog.addListener((value: any) => {
+    console.log('[L] showRightProgress:', value.value);
+  });
+  drag.addListener((value: any) => {
+    console.log('[L] appliedTranslation:', value.value);
+  });
+
+  const trans = Animated.add(drag, 50);
+
+  return (
+    <Animated.Text
+      style={[
+        styles.rightAction,
+        {
+          transform: [{ translateX: trans }],
+        },
+      ]}>
+      Text
+    </Animated.Text>
+  );
+}
+
+export default function Example() {
+  return (
+    <GestureHandlerRootView>
+      <View style={styles.separator} />
+
+      <ReanimatedSwipeable
+        containerStyle={styles.swipeable}
+        friction={2}
+        leftThreshold={80}
+        enableTrackpadTwoFingerGesture
+        rightThreshold={40}
+        renderLeftActions={LeftAction}
+        renderRightActions={RightAction}>
+        <Text>[Reanimated] Swipe me!</Text>
+      </ReanimatedSwipeable>
+
+      <View style={styles.separator} />
+
+      <Swipeable
+        containerStyle={styles.swipeable}
+        friction={2}
+        leftThreshold={80}
+        enableTrackpadTwoFingerGesture
+        rightThreshold={40}
+        renderLeftActions={LegacyLeftAction}
+        renderRightActions={LegacyRightAction}>
+        <Text>[Legacy] Swipe me!</Text>
+      </Swipeable>
+
+      <View style={styles.separator} />
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  leftAction: { width: 50, height: 50, backgroundColor: 'crimson' },
+  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
+  separator: {
+    width: '100%',
+    borderTopWidth: 1,
+  },
+  swipeable: {
+    height: 50,
+    backgroundColor: 'papayawhip',
+    alignItems: 'center',
+  },
+});

package.json

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