react-native-skia
react-native-skia copied to clipboard
Skia video frame not updating on seek when paused
Description
When using Skia's useVideo or Video component, the video frame does not update when I seek while the video is paused.
When the video is playing, seeking works fine — frames update correctly.
Expected Behavior
When the user changes the seek value (for example by dragging a scrubber), the displayed frame should update instantly — even if the video is paused.
❌ Actual Behavior
While paused, changing the seek value doesn’t update the displayed frame until the video resumes playback.
React Native Skia Version
1.12.4
React Native Version
0.75.2
Using New Architecture
- [ ] Enabled
Steps to Reproduce
- Load a video in Skia using useVideo(videoUri).
- Pause the video.
- Seek forward (e.g., +1 second).
- Observe the frame does not update.
- Resume playback → frame updates correctly.
Snack, Code Example, Screenshot, or Link to Repository
import React from "react";
import {
Canvas,
Fill,
Image,
useVideo
} from "@shopify/react-native-skia";
import { Pressable, useWindowDimensions } from "react-native";
import { useSharedValue } from "react-native-reanimated";
export const VideoExample = () => {
const seek = useSharedValue<null | number>(null);
// Set this value to true to pause the video
const paused = useSharedValue(false);
const { width, height } = useWindowDimensions();
const {currentFrame, currentTime} = useVideo(
"https://bit.ly/skia-video",
{
seek,
paused:true,
looping:false
}
);
return (
<Pressable
style={{ flex: 1 }}
onPress={() => {seek.value = currentTime.value + 1000}}
>
<Canvas style={{ flex: 1 }}>
<Image
image={currentFrame}
x={0}
y={0}
width={width}
height={height}
fit="cover"
/>
</Canvas>
</Pressable>
);
};