feat: add support to seek video to 0 after story ended

example/src/App.tsx

@@ -17,7 +17,8 @@ export default function App() {
           viewed: false,
           preview:
             'https://instagram.faep7-1.fna.fbcdn.net/v/t51.2885-19/s320x320/62500940_1363897577094116_5145198214462308352_n.jpg?_nc_ht=instagram.faep7-1.fna.fbcdn.net&_nc_ohc=BkIQomknhK0AX_1xEiM&oh=2269fb6e76910915456b7bb6ff24a282&oe=5FBFFDA9',
-          video: 'https://vjs.zencdn.net/v/oceans.mp4',
+          video:
+            'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
         },
         {
           id: 3,

package.json

@@ -50,6 +50,7 @@
     "@types/react": "^16.9.19",
     "@types/react-native": "0.62.13",
     "@types/react-native-snap-carousel": "^3.8.2",
+    "@types/react-native-video": "^5.0.3",
     "commitlint": "^8.3.5",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^6.11.0",

src/components/StoryDetail/index.tsx

@@ -112,7 +112,7 @@ export const StoryDetail: React.FC<StoreDetailProps> = ({
         initialScrollIndex={initial}
         scrollInterpolator={instaEffect.scrollInterpolator}
         slideInterpolatedStyle={instaEffect.animatedStyles}
-        onBeforeSnapToItem={(idx) => onMoveToNextStory(idx)}
+        onSnapToItem={(idx) => onMoveToNextStory(idx)}
         renderItem={({ item: story, index: idx }) => (
           <StoryDetailItem
             {...story}
@@ -121,7 +121,7 @@ export const StoryDetail: React.FC<StoreDetailProps> = ({
             onVideoEnd={() => {
               if (idx <= stories.length - 2) {
                 setTimeout(
-                  () => carouselRef.current.snapToItem(idx + 1, false, true),
+                  () => carouselRef.current.snapToItem(idx + 1, true, true),
                   250
                 );
               } else {

src/components/StoryDetailItem/index.tsx

@@ -2,6 +2,7 @@ import Video from 'react-native-video';
 import React, { useEffect, useState } from 'react';
 
 import { styles } from './styles';
+import { useRef } from 'react';
 
 export type StoryDetailHeaderProps = {
   /**
@@ -68,6 +69,8 @@ export const StoryDetailItem: React.FC<StoryDetailItemProps> = ({
   StoryDetailItemHeader,
   StoryDetailItemFooter,
 }) => {
+  const videoRef: any = useRef(null);
+
   const [paused, setPaused] = useState(true);
   const [muted, setMuted] = useState(false);
 
@@ -90,6 +93,7 @@ export const StoryDetailItem: React.FC<StoryDetailItemProps> = ({
         mute={() => setMuted(!muted)}
       />
       <Video
+        ref={videoRef}
         muted={muted}
         paused={paused}
         controls={false}
@@ -101,7 +105,13 @@ export const StoryDetailItem: React.FC<StoryDetailItemProps> = ({
           setDuration(nativeEvent.duration);
         }}
         onProgress={(nativeEvent: any) => setProgress(nativeEvent.currentTime)}
-        onEnd={() => onVideoEnd()}
+        onEnd={() => {
+          onVideoEnd();
+
+          if (videoRef.current) {
+            videoRef.current.seek(0);
+          }
+        }}
       />
       <StoryDetailItemFooter
         videoProgress={progress}

src/index.tsx

@@ -1,4 +1,3 @@
 export * from './components/StoryPreview';
 
 // TODO: add support for passing a loading component to the StoryDetailItem
-// TODO: add support for improving the loading performance of react-native-video