chore: upgrade reanimated to v4 #6720
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,20 @@ | ||
| import React from 'react'; | ||
| import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native'; | ||
| import { Gesture, GestureDetector } from 'react-native-gesture-handler'; | ||
| import Animated, { | ||
| type SharedValue, | ||
| useAnimatedProps, | ||
| useAnimatedStyle, | ||
| useDerivedValue, | ||
| 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'; | ||
|
|
||
| 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 panGesture = Gesture.Pan() | ||
| .enabled(loaded) | ||
| .activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X]) | ||
| .onStart(() => { | ||
| isPanning.value = true; | ||
| 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)); | ||
Rohit3523 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }) | ||
|
Comment on lines
+67
to
+81
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: cd app/containers/AudioPlayer && wc -l Seek.tsxRepository: RocketChat/Rocket.Chat.ReactNative Length of output: 90 🏁 Script executed: cat -n app/containers/AudioPlayer/Seek.tsx | head -100Repository: RocketChat/Rocket.Chat.ReactNative Length of output: 4014 🏁 Script executed: # Search for ISeek interface definition
rg "interface ISeek" -A 10Repository: RocketChat/Rocket.Chat.ReactNative Length of output: 743 🏁 Script executed: # Search for scheduleOnRN usage and imports
rg "scheduleOnRN" -B 2 -A 2Repository: RocketChat/Rocket.Chat.ReactNative Length of output: 8010 🏁 Script executed: # Search for onChangeTime type definition
rg "onChangeTime" -B 2 -A 2Repository: RocketChat/Rocket.Chat.ReactNative Length of output: 1552 Wrap the async seek callback before scheduling it. Line 80 passes 🛡️ Proposed fix+ const commitChangeTime = React.useCallback((time: number) => {
+ void onChangeTime(time).catch(() => {
+ // Route this through the existing error/reporting path.
+ });
+ }, [onChangeTime]);
+
const panGesture = Gesture.Pan()
.enabled(loaded)
.activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X])
.onStart(() => {
isPanning.value = true;
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));
+ scheduleOnRN(commitChangeTime, Math.round(currentTime.value * 1000));
})🤖 Prompt for AI Agents |
||
| .onFinalize(() => { | ||
| isPanning.value = false; | ||
| scale.value = withTiming(1, { duration: 150 }); | ||
| }); | ||
|
Comment on lines
+82
to
+85
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: find . -name "Seek.tsx" -type fRepository: RocketChat/Rocket.Chat.ReactNative Length of output: 115 🏁 Script executed: cat -n ./app/containers/AudioPlayer/Seek.tsxRepository: RocketChat/Rocket.Chat.ReactNative Length of output: 5414 🌐 Web query:
💡 Result: In react-native-gesture-handler, the Pan gesture's onFinalize callback receives a second parameter called didSucceed, which is a boolean indicating whether the gesture was successfully recognized and completed. Signature: onFinalize: (event: PanHandlerData, didSucceed: boolean) => void - didSucceed is true if the gesture reached the END state (successfully completed after being ACTIVE). - didSucceed is false if the gesture FAILED or was CANCELLED. This applies to the modern API (usePanGesture in RNGH 3.x+). The callback is called whenever the handler stops recognizing the gesture, after onDeactivate if the gesture activated. Citations:
Restore the pre-pan position when the gesture is cancelled. When a pan gesture is cancelled, 🔁 Proposed fix- .onFinalize(() => {
+ .onFinalize((_, didSucceed) => {
+ if (isPanning.value && !didSucceed) {
+ translateX.value = contextX.value;
+ currentTime.value = (contextX.value * duration.value) / maxWidth.value || 0;
+ }
isPanning.value = false;
scale.value = withTiming(1, { duration: 150 });
});🤖 Prompt for AI Agents |
||
|
|
||
| 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> | ||
| <GestureDetector gesture={panGesture}> | ||
| <Animated.View hitSlop={SEEK_HIT_SLOP} style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]} /> | ||
| </GestureDetector> | ||
| </View> | ||
| </View> | ||
| </TouchableNativeFeedback> | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.