chore: upgrade reanimated to v4

app/containers/AudioPlayer/Seek.tsx

@@ -1,21 +1,20 @@
 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,
-	useSharedValue
+	useSharedValue,
+	withTiming
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
 
-Animated.addWhitelistedNativeProps({ text: true });
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 interface ISeek {
@@ -50,6 +49,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 	const timeLabel = useSharedValue(DEFAULT_TIME_LABEL);
 	const scale = useSharedValue(1);
 	const isPanning = useSharedValue(false);
+	const contextX = useSharedValue(0);
 
 	const styleLine = useAnimatedStyle(() => ({
 		width: translateX.value
@@ -64,21 +64,25 @@ 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);
-			scale.value = 1.3;
-		},
-		onFinish() {
-			scale.value = 1;
+			contextX.value = translateX.value;
+			scale.value = withTiming(1.3, { duration: 150 });
+		})
+		.onUpdate(event => {
+			const newX = contextX.value + event.translationX;
+			translateX.value = clamp(newX, 0, maxWidth.value);
+		})
+		.onEnd(() => {
+			scheduleOnRN(onChangeTime, Math.round(currentTime.value * 1000));
+		})
+		.onFinalize(() => {
 			isPanning.value = false;
-			runOnJS(onChangeTime)(Math.round(currentTime.value * 1000));
-		}
-	});
+			scale.value = withTiming(1, { duration: 150 });
+		});
 
 	useDerivedValue(() => {
 		if (isPanning.value) {
@@ -118,9 +122,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>

app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx

@@ -1,8 +1,9 @@
 import React, { createContext, type ReactElement, useContext, useState } from 'react';
 import { Platform } from 'react-native';
 import { useKeyboardHandler } from 'react-native-keyboard-controller';
-import { runOnJS, type SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { type SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import { MessageInnerContext } from '../context';
 
@@ -155,7 +156,7 @@ export const useEmojiKeyboard = () => {
 			} else if (previousHeight.value === EMOJI_KEYBOARD_FIXED_HEIGHT) {
 				updateHeight();
 			}
-			runOnJS(setShowEmojiKeyboard)(currentValue);
+			scheduleOnRN(setShowEmojiKeyboard, currentValue);
 		},
 		[showEmojiPickerSharedValue]
 	);
@@ -171,7 +172,7 @@ export const useEmojiKeyboard = () => {
 			} else if (currentValue === false && showEmojiPickerSharedValue.value === true) {
 				openEmojiPicker();
 			}
-			runOnJS(setShowEmojiSearchbar)(currentValue);
+			scheduleOnRN(setShowEmojiSearchbar, currentValue);
 		},
 		[showEmojiSearchbarSharedValue]
 	);

app/containers/RoomItem/Actions.tsx

@@ -4,12 +4,12 @@ import Animated, {
 	useAnimatedStyle,
 	interpolate,
 	withSpring,
-	runOnJS,
 	useAnimatedReaction,
 	useSharedValue
 } from 'react-native-reanimated';
 import { RectButton } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import { CustomIcon } from '../CustomIcon';
 import { DisplayMode } from '../../lib/constants/constantDisplayMode';
@@ -81,14 +81,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 			// Triggers the animation and hapticFeedback if swipe reaches/unreaches the threshold.
 			if (I18n.isRTL) {
 				if (previousTransX && currentTransX > LONG_SWIPE && previousTransX <= LONG_SWIPE) {
-					runOnJS(triggerHideAnimation)(ACTION_WIDTH);
+					scheduleOnRN(triggerHideAnimation, ACTION_WIDTH);
 				} else if (previousTransX && currentTransX <= LONG_SWIPE && previousTransX > LONG_SWIPE) {
-					runOnJS(triggerHideAnimation)(0);
+					scheduleOnRN(triggerHideAnimation, 0);
 				}
 			} else if (previousTransX && currentTransX < -LONG_SWIPE && previousTransX >= -LONG_SWIPE) {
-				runOnJS(triggerHideAnimation)(-ACTION_WIDTH);
+				scheduleOnRN(triggerHideAnimation, -ACTION_WIDTH);
 			} else if (previousTransX && currentTransX >= -LONG_SWIPE && previousTransX < -LONG_SWIPE) {
-				runOnJS(triggerHideAnimation)(0);
+				scheduleOnRN(triggerHideAnimation, 0);
 			}
 		}
 	);

app/containers/RoomItem/Touchable.tsx

@@ -1,11 +1,12 @@
 import React, { useRef, memo } from 'react';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnJS } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
 	Gesture,
 	GestureDetector,
 	type GestureUpdateEvent,
 	type PanGestureHandlerEventPayload
 } from 'react-native-gesture-handler';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import Touch from '../Touch';
 import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
@@ -172,7 +173,7 @@ const Touchable = ({
 	const longPressGesture = Gesture.LongPress()
 		.minDuration(500)
 		.onStart(() => {
-			runOnJS(handleLongPress)();
+			scheduleOnRN(handleLongPress);
 		});
 
 	const panGesture = Gesture.Pan()
@@ -184,7 +185,7 @@ const Touchable = ({
 			if (transX.value > 2 * width) transX.value = 2 * width;
 		})
 		.onEnd(event => {
-			runOnJS(handleRelease)(event);
+			scheduleOnRN(handleRelease, event);
 		});
 
 	// Use Race instead of Simultaneous to prevent conflicts

app/containers/RoomItem/interfaces.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type Animated from 'react-native-reanimated';
+import { type SharedValue } from 'react-native-reanimated';
 
 import { type TSupportedThemes } from '../../theme';
 import {
@@ -11,15 +11,15 @@ import {
 } from '../../definitions';
 
 export interface ILeftActionsProps {
-	transX: Animated.SharedValue<number>;
+	transX: SharedValue<number>;
 	isRead: boolean;
 	width: number;
 	onToggleReadPress(): void;
 	displayMode: string;
 }
 
 export interface IRightActionsProps {
-	transX: Animated.SharedValue<number>;
+	transX: SharedValue<number>;
 	favorite: boolean;
 	width: number;
 	toggleFav(): void;

app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx

@@ -4,13 +4,13 @@ import Animated, {
 	useAnimatedStyle,
 	interpolate,
 	withSpring,
-	runOnJS,
 	useAnimatedReaction,
 	useSharedValue,
 	type SharedValue
 } from 'react-native-reanimated';
 import { RectButton } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
@@ -44,14 +44,14 @@ export const DeleteAction = React.memo(
 			(currentTransX, previousTransX) => {
 				if (I18n.isRTL) {
 					if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
-						runOnJS(triggerDeleteAnimation)(actionWidth);
+						scheduleOnRN(triggerDeleteAnimation, actionWidth);
 					} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
-						runOnJS(triggerDeleteAnimation)(0);
+						scheduleOnRN(triggerDeleteAnimation, 0);
 					}
 				} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
-					runOnJS(triggerDeleteAnimation)(-actionWidth);
+					scheduleOnRN(triggerDeleteAnimation, -actionWidth);
 				} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
-					runOnJS(triggerDeleteAnimation)(0);
+					scheduleOnRN(triggerDeleteAnimation, 0);
 				}
 			}
 		);

app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx

@@ -1,12 +1,13 @@
 import React, { useRef, memo } from 'react';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnJS } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import {
 	Gesture,
 	GestureDetector,
 	type GestureUpdateEvent,
 	type PanGestureHandlerEventPayload
 } from 'react-native-gesture-handler';
 import { View, type AccessibilityActionEvent } from 'react-native';
+import { scheduleOnRN } from 'react-native-worklets';
 
 import Touch from '../../Touch';
 import { DeleteAction } from './Actions';
@@ -174,7 +175,7 @@ const SwipeableDeleteTouchable = ({
 			}
 		})
 		.onEnd(event => {
-			runOnJS(handleRelease)(event);
+			scheduleOnRN(handleRelease, event);
 		});
 
 	const animatedStyles = useAnimatedStyle(() => ({