Skip to content

chore: replace legacy pan handler with new Gesture API in audio seekbar #6884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
divyanshu-patil wants to merge 3 commits into from
+15 −64
Closed

chore: replace legacy pan handler with new Gesture API in audio seekbar #6884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e491b38
chore: replace legacy pan handler with new Gesture API
divyanshu-patil Jan 5, 2026
490654b
chore: snapshot update
divyanshu-patil Jan 5, 2026
13b4396
Merge branch 'develop' into chore/panguesture_update
divyanshu-patil Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions app/containers/AudioPlayer/Seek.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 panOffsetX = useSharedValue(0);

const styleLine = useAnimatedStyle(() => ({
width: translateX.value
Expand All @@ -64,21 +64,22 @@ 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])
.onBegin(() => {
isPanning.value = true;
ctx.offsetX = translateX.value;
},
onActive: ({ translationX }, ctx) => {
translateX.value = clamp(ctx.offsetX + translationX, 0, maxWidth.value);
panOffsetX.value = translateX.value;
})
.onUpdate(({ translationX }) => {
translateX.value = clamp(panOffsetX.value + translationX, 0, maxWidth.value);
scale.value = 1.3;
},
onFinish() {
})
.onFinalize(() => {
scale.value = 1;
isPanning.value = false;
runOnJS(onChangeTime)(Math.round(currentTime.value * 1000));
}
});
});

useDerivedValue(() => {
if (isPanning.value) {
Expand Down Expand Up @@ -118,9 +119,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>
Expand Down
50 changes: 0 additions & 50 deletions app/containers/message/__snapshots__/Message.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115421,9 +115421,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={1}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -115432,8 +115429,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -116027,9 +116022,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={2}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -116038,8 +116030,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -116406,9 +116396,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={3}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -116417,8 +116404,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -116785,9 +116770,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={4}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -116796,8 +116778,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -117137,9 +117117,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={5}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -117148,8 +117125,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -117388,9 +117363,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={6}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -117399,8 +117371,6 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -118071,9 +118041,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={7}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -118082,8 +118049,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -118677,9 +118642,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={8}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -118688,8 +118650,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -119056,9 +119016,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={9}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -119067,8 +119024,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down Expand Up @@ -119435,9 +119390,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
</View>
<View
collapsable={false}
enabled={false}
handlerTag={10}
handlerType="PanGestureHandler"
hitSlop={
{
"bottom": 12,
Expand All @@ -119446,8 +119398,6 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
"top": 12,
}
}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
style={
[
{
Expand Down