Skip to content

Commit 75d866b

Browse files
Rohit3523Rohit3523
authored
chore: upgrade reanimated to version 4 (#6720)
1 parent 0e5a514 commit 75d866b

File tree

14 files changed

+145
-164
lines changed

14 files changed

+145
-164
lines changed

‎app/containers/AudioPlayer/Seek.tsx‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
import React from 'react';
22
import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native';
3-
import { PanGestureHandler, type PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
3+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
44
import Animated, {
55
type SharedValue,
6-
runOnJS,
7-
useAnimatedGestureHandler,
86
useAnimatedProps,
97
useAnimatedStyle,
108
useDerivedValue,
11-
useSharedValue
9+
useSharedValue,
10+
withTiming
1211
} from 'react-native-reanimated';
12+
import { scheduleOnRN } from 'react-native-worklets';
1313

1414
import styles from './styles';
1515
import { useTheme } from '../../theme';
1616
import { SEEK_HIT_SLOP, THUMB_SEEK_SIZE, ACTIVE_OFFSET_X, DEFAULT_TIME_LABEL } from './constants';
1717

18-
Animated.addWhitelistedNativeProps({ text: true });
1918
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
2019

2120
interface ISeek {
@@ -50,6 +49,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
5049
const timeLabel = useSharedValue(DEFAULT_TIME_LABEL);
5150
const scale = useSharedValue(1);
5251
const isPanning = useSharedValue(false);
52+
const contextX = useSharedValue(0);
5353

5454
const styleLine = useAnimatedStyle(() => ({
5555
width: translateX.value
@@ -64,21 +64,30 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
6464
maxWidth.value = width;
6565
};
6666

67-
const onGestureEvent = useAnimatedGestureHandler<PanGestureHandlerGestureEvent, { offsetX: number }>({
68-
onStart: (_event, ctx) => {
67+
const panGesture = Gesture.Pan()
68+
.enabled(loaded)
69+
.activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X])
70+
.onStart(() => {
6971
isPanning.value = true;
70-
ctx.offsetX = translateX.value;
71-
},
72-
onActive: ({ translationX }, ctx) => {
73-
translateX.value = clamp(ctx.offsetX + translationX, 0, maxWidth.value);
74-
scale.value = 1.3;
75-
},
76-
onFinish() {
77-
scale.value = 1;
72+
contextX.value = translateX.value;
73+
scale.value = withTiming(1.3, { duration: 150 });
74+
})
75+
.onUpdate(event => {
76+
const newX = contextX.value + event.translationX;
77+
translateX.value = clamp(newX, 0, maxWidth.value);
78+
})
79+
.onEnd(() => {
80+
scheduleOnRN(onChangeTime, Math.round(currentTime.value * 1000));
81+
})
82+
.onFinalize((_, didSucceed) => {
83+
if (isPanning.value && !didSucceed) {
84+
translateX.value = contextX.value;
85+
currentTime.value = (contextX.value * duration.value) / maxWidth.value || 0;
86+
}
87+
7888
isPanning.value = false;
79-
runOnJS(onChangeTime)(Math.round(currentTime.value * 1000));
80-
}
81-
});
89+
scale.value = withTiming(1, { duration: 150 });
90+
});
8291

8392
useDerivedValue(() => {
8493
if (isPanning.value) {
@@ -118,9 +127,9 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
118127
<View style={[styles.line, { backgroundColor: colors.strokeLight }]}>
119128
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
120129
</View>
121-
<PanGestureHandler enabled={loaded} onGestureEvent={onGestureEvent} activeOffsetX={[-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X]}>
130+
<GestureDetector gesture={panGesture}>
122131
<Animated.View hitSlop={SEEK_HIT_SLOP} style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]} />
123-
</PanGestureHandler>
132+
</GestureDetector>
124133
</View>
125134
</View>
126135
</TouchableNativeFeedback>

‎app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { createContext, type ReactElement, useContext, useState } from 'react';
22
import { Platform } from 'react-native';
33
import { useKeyboardHandler } from 'react-native-keyboard-controller';
4-
import { runOnJS, type SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
4+
import { type SharedValue, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
55
import { useSafeAreaInsets } from 'react-native-safe-area-context';
6+
import { scheduleOnRN } from 'react-native-worklets';
67

78
import { MessageInnerContext } from '../context';
89

@@ -155,7 +156,7 @@ export const useEmojiKeyboard = () => {
155156
} else if (previousHeight.value === EMOJI_KEYBOARD_FIXED_HEIGHT) {
156157
updateHeight();
157158
}
158-
runOnJS(setShowEmojiKeyboard)(currentValue);
159+
scheduleOnRN(setShowEmojiKeyboard, currentValue);
159160
},
160161
[showEmojiPickerSharedValue]
161162
);
@@ -171,7 +172,7 @@ export const useEmojiKeyboard = () => {
171172
} else if (currentValue === false && showEmojiPickerSharedValue.value === true) {
172173
openEmojiPicker();
173174
}
174-
runOnJS(setShowEmojiSearchbar)(currentValue);
175+
scheduleOnRN(setShowEmojiSearchbar, currentValue);
175176
},
176177
[showEmojiSearchbarSharedValue]
177178
);

‎app/containers/RoomItem/Actions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import Animated, {
44
useAnimatedStyle,
55
interpolate,
66
withSpring,
7-
runOnJS,
87
useAnimatedReaction,
98
useSharedValue
109
} from 'react-native-reanimated';
1110
import { RectButton } from 'react-native-gesture-handler';
1211
import * as Haptics from 'expo-haptics';
12+
import { scheduleOnRN } from 'react-native-worklets';
1313

1414
import { CustomIcon } from '../CustomIcon';
1515
import { DisplayMode } from '../../lib/constants/constantDisplayMode';
@@ -81,14 +81,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
8181
// Triggers the animation and hapticFeedback if swipe reaches/unreaches the threshold.
8282
if (I18n.isRTL) {
8383
if (previousTransX && currentTransX > LONG_SWIPE && previousTransX <= LONG_SWIPE) {
84-
runOnJS(triggerHideAnimation)(ACTION_WIDTH);
84+
scheduleOnRN(triggerHideAnimation, ACTION_WIDTH);
8585
} else if (previousTransX && currentTransX <= LONG_SWIPE && previousTransX > LONG_SWIPE) {
86-
runOnJS(triggerHideAnimation)(0);
86+
scheduleOnRN(triggerHideAnimation, 0);
8787
}
8888
} else if (previousTransX && currentTransX < -LONG_SWIPE && previousTransX >= -LONG_SWIPE) {
89-
runOnJS(triggerHideAnimation)(-ACTION_WIDTH);
89+
scheduleOnRN(triggerHideAnimation, -ACTION_WIDTH);
9090
} else if (previousTransX && currentTransX >= -LONG_SWIPE && previousTransX < -LONG_SWIPE) {
91-
runOnJS(triggerHideAnimation)(0);
91+
scheduleOnRN(triggerHideAnimation, 0);
9292
}
9393
}
9494
);

‎app/containers/RoomItem/Touchable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useRef, memo } from 'react';
2-
import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnJS } from 'react-native-reanimated';
2+
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
33
import {
44
Gesture,
55
GestureDetector,
66
type GestureUpdateEvent,
77
type PanGestureHandlerEventPayload
88
} from 'react-native-gesture-handler';
9+
import { scheduleOnRN } from 'react-native-worklets';
910

1011
import Touch from '../Touch';
1112
import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
@@ -172,7 +173,7 @@ const Touchable = ({
172173
const longPressGesture = Gesture.LongPress()
173174
.minDuration(500)
174175
.onStart(() => {
175-
runOnJS(handleLongPress)();
176+
scheduleOnRN(handleLongPress);
176177
});
177178

178179
const panGesture = Gesture.Pan()
@@ -184,7 +185,7 @@ const Touchable = ({
184185
if (transX.value > 2 * width) transX.value = 2 * width;
185186
})
186187
.onEnd(event => {
187-
runOnJS(handleRelease)(event);
188+
scheduleOnRN(handleRelease, event);
188189
});
189190

190191
// Use Race instead of Simultaneous to prevent conflicts

‎app/containers/RoomItem/interfaces.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type React from 'react';
2-
import type Animated from 'react-native-reanimated';
2+
import { type SharedValue } from 'react-native-reanimated';
33

44
import { type TSupportedThemes } from '../../theme';
55
import {
@@ -11,15 +11,15 @@ import {
1111
} from '../../definitions';
1212

1313
export interface ILeftActionsProps {
14-
transX: Animated.SharedValue<number>;
14+
transX: SharedValue<number>;
1515
isRead: boolean;
1616
width: number;
1717
onToggleReadPress(): void;
1818
displayMode: string;
1919
}
2020

2121
export interface IRightActionsProps {
22-
transX: Animated.SharedValue<number>;
22+
transX: SharedValue<number>;
2323
favorite: boolean;
2424
width: number;
2525
toggleFav(): void;

‎app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import Animated, {
44
useAnimatedStyle,
55
interpolate,
66
withSpring,
7-
runOnJS,
87
useAnimatedReaction,
98
useSharedValue,
109
type SharedValue
1110
} from 'react-native-reanimated';
1211
import { RectButton } from 'react-native-gesture-handler';
1312
import * as Haptics from 'expo-haptics';
13+
import { scheduleOnRN } from 'react-native-worklets';
1414

1515
import { CustomIcon } from '../../CustomIcon';
1616
import { useTheme } from '../../../theme';
@@ -44,14 +44,14 @@ export const DeleteAction = React.memo(
4444
(currentTransX, previousTransX) => {
4545
if (I18n.isRTL) {
4646
if (previousTransX && currentTransX > longSwipe && previousTransX <= longSwipe) {
47-
runOnJS(triggerDeleteAnimation)(actionWidth);
47+
scheduleOnRN(triggerDeleteAnimation, actionWidth);
4848
} else if (previousTransX && currentTransX <= longSwipe && previousTransX > longSwipe) {
49-
runOnJS(triggerDeleteAnimation)(0);
49+
scheduleOnRN(triggerDeleteAnimation, 0);
5050
}
5151
} else if (previousTransX && currentTransX < -longSwipe && previousTransX >= -longSwipe) {
52-
runOnJS(triggerDeleteAnimation)(-actionWidth);
52+
scheduleOnRN(triggerDeleteAnimation, -actionWidth);
5353
} else if (previousTransX && currentTransX >= -longSwipe && previousTransX < -longSwipe) {
54-
runOnJS(triggerDeleteAnimation)(0);
54+
scheduleOnRN(triggerDeleteAnimation, 0);
5555
}
5656
}
5757
);

‎app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useRef, memo } from 'react';
2-
import Animated, { useSharedValue, useAnimatedStyle, withSpring, runOnJS } from 'react-native-reanimated';
2+
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
33
import {
44
Gesture,
55
GestureDetector,
66
type GestureUpdateEvent,
77
type PanGestureHandlerEventPayload
88
} from 'react-native-gesture-handler';
99
import { View, type AccessibilityActionEvent } from 'react-native';
10+
import { scheduleOnRN } from 'react-native-worklets';
1011

1112
import Touch from '../../Touch';
1213
import { DeleteAction } from './Actions';
@@ -174,7 +175,7 @@ const SwipeableDeleteTouchable = ({
174175
}
175176
})
176177
.onEnd(event => {
177-
runOnJS(handleRelease)(event);
178+
scheduleOnRN(handleRelease, event);
178179
});
179180

180181
const animatedStyles = useAnimatedStyle(() => ({

0 commit comments

Comments
 (0)