Optimise ReanimatedSwipeable component (#3165)

## Description

- Memoize all Gestures, and non-memoized functions.
- Reduce number of used shared values
- Fix unoptimal dependency lists on existing `useMemo`s

## Test plan

- use `android`, `iOS` has no performance issues
- use attached code to measure performance
  - tested on physical `Samsung S24 Ultra`
  - pre-optimization average: `19 fps`
  - post-optimization average: `68 fps`

## Test code

Tested on `@shopify/flash-list` using their `useBenchmark` utility hook.

<details>
<summary>
Collapsed code
</summary>

```js
import { Text, StyleSheet, View, Alert } from 'react-native';

import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import { FlashList, ListRenderItem, useBenchmark } from '@shopify/flash-list';
import { memo, useRef } from 'react';

function RightAction() {
  return <Text style={styles.rightAction}>Text</Text>;
}

type Item = {
  id: string;
  title: string;
};

const generateItems = (count: number): Item[] => {
  return Array.from({ length: count }, () => {
    const randomNumber = Math.random().toString(36).substring(2, 8);
    return {
      id: randomNumber,
      title: `Title ${randomNumber}`,
    };
  });
};

const data = generateItems(200);

const _RenderItemView = (item: Item) => (
  <View style={styles.swipeable}>
    <Text>{item.title}</Text>
  </View>
);

const RenderItemViewMemoed = memo(_RenderItemView);

export default function Example() {
  const renderItem: ListRenderItem<Item> = ({ item }) => {
    return (
      <ReanimatedSwipeable renderRightActions={RightAction}>
        <RenderItemViewMemoed {...item} />
      </ReanimatedSwipeable>
    );
  };

  const flashListRef = useRef<FlashList<Item> | null>(null);
  useBenchmark(flashListRef, (callback) => {
    Alert.alert('result', callback.formattedString);
  });

  return (
    <FlashList
      ref={flashListRef}
      data={data}
      renderItem={renderItem}
      estimatedItemSize={50}
      keyExtractor={(item) => item.id}
    />
  );
}

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',
  },
});
```
</details>

Author: latekvo

example/package.json

@@ -35,7 +35,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-gesture-handler": "link:..",
-    "react-native-reanimated": "3.10.0",
+    "react-native-reanimated": "3.15.5",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
     "react-native-svg": "^15.8.0",

example/src/release_tests/swipeableReanimation/index.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Text, Animated, StyleSheet, View } from 'react-native';
 
 import {
   Swipeable,
   GestureHandlerRootView,
+  Pressable,
 } from 'react-native-gesture-handler';
-import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
+import ReanimatedSwipeable, {
+  SwipeableMethods,
+} from 'react-native-gesture-handler/ReanimatedSwipeable';
 import Reanimated, {
   SharedValue,
   useAnimatedStyle,
@@ -92,11 +95,55 @@ function LegacyRightAction(prog: any, drag: any) {
 }
 
 export default function Example() {
+  const reanimatedRef = useRef<SwipeableMethods>(null);
+  const legacyRef = useRef<Swipeable>(null);
+
   return (
     <GestureHandlerRootView>
       <View style={styles.separator} />
 
+      <View style={styles.controlPanelWrapper}>
+        <Text>Programatical controls</Text>
+        <View style={styles.controlPanel}>
+          <Pressable
+            style={styles.control}
+            onPress={() => {
+              reanimatedRef.current!.openLeft();
+              legacyRef.current?.openLeft();
+            }}>
+            <Text>open left</Text>
+          </Pressable>
+          <Pressable
+            style={styles.control}
+            onPress={() => {
+              reanimatedRef.current!.close();
+              legacyRef.current!.close();
+            }}>
+            <Text>close</Text>
+          </Pressable>
+          <Pressable
+            style={styles.control}
+            onPress={() => {
+              reanimatedRef.current!.reset();
+              legacyRef.current!.reset();
+            }}>
+            <Text>reset</Text>
+          </Pressable>
+          <Pressable
+            style={styles.control}
+            onPress={() => {
+              reanimatedRef.current!.openRight();
+              legacyRef.current!.openRight();
+            }}>
+            <Text>open right</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <View style={styles.separator} />
+
       <ReanimatedSwipeable
+        ref={reanimatedRef}
         containerStyle={styles.swipeable}
         friction={2}
         leftThreshold={80}
@@ -110,6 +157,7 @@ export default function Example() {
       <View style={styles.separator} />
 
       <Swipeable
+        ref={legacyRef}
         containerStyle={styles.swipeable}
         friction={2}
         leftThreshold={80}
@@ -137,4 +185,20 @@ const styles = StyleSheet.create({
     backgroundColor: 'papayawhip',
     alignItems: 'center',
   },
+  controlPanelWrapper: {
+    backgroundColor: 'papayawhip',
+    alignItems: 'center',
+  },
+  controlPanel: {
+    backgroundColor: 'papayawhip',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  control: {
+    flex: 1,
+    height: 40,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });