chore: migrate deprecated components of react-native-gesture-handler

.maestro/tests/assorted/join-from-directory.yaml

@@ -41,7 +41,6 @@ tags:
 - tapOn:
     id: 'directory-view-search'
 - inputText: join-from-directory
-- pressKey: Enter
 - extendedWaitUntil:
     visible:
       id: 'directory-view-item-join-from-directory'
@@ -103,7 +102,11 @@ tags:
 - tapOn:
     id: 'directory-view-search'
 - inputText: ${output.otherUser.username}
-- pressKey: Enter
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - pressKey: enter
 - extendedWaitUntil:
     visible:
       id: 'directory-view-item-${output.otherUser.username}'
@@ -147,7 +150,6 @@ tags:
 - tapOn:
     id: 'directory-view-search'
 - inputText: ${output.team}
-- pressKey: Enter
 - extendedWaitUntil:
     visible:
       id: 'directory-view-item-${output.team}'

app/containers/AudioPlayer/Seek.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native';
-import { PanGestureHandler, type PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
 	type SharedValue,
 	runOnJS,
-	useAnimatedGestureHandler,
 	useAnimatedProps,
 	useAnimatedStyle,
 	useDerivedValue,
@@ -64,21 +63,21 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		maxWidth.value = width;
 	};
 
-	const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { offsetX: number }>({
-		onStart: (event, ctx) => {
+	const panGesture = Gesture.Pan()
+		.enabled(loaded)
+		.activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X])
+		.onStart(() => {
 			isPanning.value = true;
-			ctx.offsetX = translateX.value;
-		},
-		onActive: ({ translationX }, ctx) => {
-			translateX.value = clamp(ctx.offsetX + translationX, 0, maxWidth.value);
+		})
+		.onUpdate(event => {
+			translateX.value = clamp(translateX.value + event.translationX, 0, maxWidth.value);
 			scale.value = 1.3;
-		},
-		onFinish() {
+		})
+		.onEnd(() => {
 			scale.value = 1;
 			isPanning.value = false;
 			runOnJS(onChangeTime)(Math.round(currentTime.value * 1000));
-		}
-	});
+		});
 
 	useDerivedValue(() => {
 		if (isPanning.value) {
@@ -118,9 +117,9 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 					<View style={[styles.line, { backgroundColor: colors.strokeLight }]}>
 						<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
 					</View>
-					<PanGestureHandler enabled={loaded} onGestureEvent={onGestureEvent} activeOffsetX={[-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X]}>
+					<GestureDetector gesture={panGesture}>
 						<Animated.View hitSlop={SEEK_HIT_SLOP} style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]} />
-					</PanGestureHandler>
+					</GestureDetector>
 				</View>
 			</View>
 		</TouchableNativeFeedback>