Add swipeable example rewritten to new API

example/App.tsx

@@ -64,6 +64,7 @@
 import Hover from './src/new_api/hover';
 import HoverableIcons from './src/new_api/hoverable_icons';
 import VelocityTest from './src/new_api/velocityTest';
+import Swipeable from 'src/new_api/swipeable';
 
 import EmptyExample from './src/empty/EmptyExample';
 import RectButtonBorders from './src/release_tests/rectButton';
@@ -160,6 +161,7 @@
       { name: 'Bottom Sheet', component: BottomSheetNewApi },
       { name: 'Chat Heads', component: ChatHeadsNewApi },
       { name: 'Drag and drop', component: DragNDrop },
+      { name: 'Swipeable', component: Swipeable },
       {
         name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
         component: BetterHorizontalDrawer,
@@ -258,7 +260,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/src/new_api/swipeable/AppleStyleSwipeableRow.tsx

@@ -0,0 +1,131 @@
+import React, { ReactNode, useRef } from 'react';
+import { StyleSheet, Text, View, I18nManager } from 'react-native';
+
+import { RectButton } from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolation,
+  SharedValue,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import Swipeable, { SwipeableMethods } from 'src/new_api/swipeable/Swipeable';
+
+interface AppleStyleSwipeableRowProps {
+  children?: ReactNode;
+}
+
+export default function AppleStyleSwipeableRow({
+  children,
+}: AppleStyleSwipeableRowProps) {
+  const renderLeftActions = (
+    _progress: SharedValue<number>,
+    dragX: SharedValue<number>
+  ) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          translateX: interpolate(
+            dragX.value,
+            [0, 50, 100, 101],
+            [-20, 0, 0, 1],
+            Extrapolation.CLAMP
+          ),
+        },
+      ],
+    }));
+    return (
+      <RectButton style={styles.leftAction} onPress={close}>
+        <Animated.Text style={[styles.actionText, animatedStyle]}>
+          Archive
+        </Animated.Text>
+      </RectButton>
+    );
+  };
+
+  const renderRightAction = (
+    text: string,
+    color: string,
+    x: number,
+    progress: SharedValue<number>,
+    totalWidth: number
+  ) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          translateX: interpolate(progress.value, [0, -totalWidth], [x, 0]),
+        },
+      ],
+    }));
+    const pressHandler = () => {
+      close();
+      // eslint-disable-next-line no-alert
+      window.alert(text);
+    };
+
+    return (
+      <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+        <RectButton
+          style={[styles.rightAction, { backgroundColor: color }]}
+          onPress={pressHandler}>
+          <Text style={styles.actionText}>{text}</Text>
+        </RectButton>
+      </Animated.View>
+    );
+  };
+
+  const renderRightActions = (_: any, progress: SharedValue<number>) => (
+    <View
+      style={{
+        width: 192,
+        flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+      }}>
+      {renderRightAction('More', '#C8C7CD', 192, progress, 192)}
+      {renderRightAction('Flag', '#ffab00', 128, progress, 192)}
+      {renderRightAction('More', '#dd2c00', 64, progress, 192)}
+    </View>
+  );
+
+  const swipeableRow = useRef<SwipeableMethods>(null);
+
+  const close = () => {
+    swipeableRow.current?.close();
+  };
+
+  return (
+    <Swipeable
+      ref={swipeableRow}
+      friction={2}
+      enableTrackpadTwoFingerGesture
+      leftThreshold={30}
+      rightThreshold={40}
+      renderLeftActions={renderLeftActions}
+      renderRightActions={renderRightActions}
+      onSwipeableOpen={(direction) => {
+        console.log(`Opening swipeable from the ${direction}`);
+      }}
+      onSwipeableClose={(direction) => {
+        console.log(`Closing swipeable to the ${direction}`);
+      }}>
+      {children}
+    </Swipeable>
+  );
+}
+
+const styles = StyleSheet.create({
+  leftAction: {
+    flex: 1,
+    backgroundColor: '#497AFC',
+    justifyContent: 'center',
+  },
+  actionText: {
+    color: 'white',
+    fontSize: 16,
+    backgroundColor: 'transparent',
+    padding: 20,
+  },
+  rightAction: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+});

example/src/new_api/swipeable/GmailStyleSwipeableRow.tsx

@@ -0,0 +1,106 @@
+import React, { ReactNode, useRef } from 'react';
+import { StyleSheet, I18nManager } from 'react-native';
+
+import { RectButton } from 'react-native-gesture-handler';
+import Animated, {
+  Extrapolation,
+  SharedValue,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import Swipeable, { SwipeableMethods } from 'src/new_api/swipeable/Swipeable';
+
+interface GmailStyleSwipeableRowProps {
+  children?: ReactNode;
+}
+
+export default function GmailStyleSwipeableRow({
+  children,
+}: GmailStyleSwipeableRowProps) {
+  const renderLeftActions = (
+    _progress: SharedValue<number>,
+    dragX: SharedValue<number>
+  ) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          scale: interpolate(dragX.value, [0, 80], [0, 1], Extrapolation.CLAMP),
+        },
+      ],
+    }));
+
+    return (
+      <RectButton style={styles.leftAction} onPress={close}>
+        {/* Change it to some icons */}
+        <Animated.View style={[styles.actionIcon, animatedStyle]} />
+      </RectButton>
+    );
+  };
+
+  const renderRightActions = (
+    _progress: SharedValue<number>,
+    dragX: SharedValue<number>
+  ) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [
+        {
+          scale: interpolate(
+            dragX.value,
+            [-80, 0],
+            [1, 0],
+            Extrapolation.CLAMP
+          ),
+        },
+      ],
+    }));
+
+    return (
+      <RectButton style={styles.rightAction} onPress={close}>
+        {/* Change it to some icons */}
+        <Animated.View style={[styles.actionIcon, animatedStyle]} />
+      </RectButton>
+    );
+  };
+
+  const swipeableRow = useRef<SwipeableMethods>(null);
+
+  const close = () => {
+    swipeableRow.current?.close();
+  };
+
+  return (
+    <Swipeable
+      ref={swipeableRow}
+      friction={2}
+      leftThreshold={80}
+      enableTrackpadTwoFingerGesture
+      rightThreshold={40}
+      renderLeftActions={renderLeftActions}
+      renderRightActions={renderRightActions}>
+      {children}
+    </Swipeable>
+  );
+}
+
+const styles = StyleSheet.create({
+  leftAction: {
+    flex: 1,
+    backgroundColor: '#388e3c',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',
+  },
+  actionIcon: {
+    width: 30,
+    marginHorizontal: 10,
+    backgroundColor: 'plum',
+    height: 20,
+  },
+  rightAction: {
+    alignItems: 'center',
+    flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
+    backgroundColor: '#dd2c00',
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+});