How to use playFromPositionAsync on expo-av Video? ReactNative

Question

I am using the Video Expo component and noticed that there is a prop playFromPositionAsync.

I saw this on Video.d.ts:

export default class Video extends React.Component<VideoProps, VideoState> implements Playback {
  ...
  playFromPositionAsync: (positionMillis: number, tolerances?: {
        toleranceMillisBefore?: number;
        toleranceMillisAfter?: number;
  }) => Promise<AVPlaybackStatus>;
}

I have this on my code:

import { Video } from 'expo-av';
...
return data.feed.map((item: DataType, idx: number) => (
      <Video
        key={item.id}
        useNativeControls={false}
        isMuted={currentIndex !== idx}
        source={{ uri: item.video_url }}
        shouldPlay={currentIndex === idx}
      />
)

See this line abive: shouldPlay={currentIndex === idx}

I want to do similar with playFromPositionAsync

<Video playFromPositionAsync={currentIndex === idx && playFromPositionAsync(0)}

Well, that code above doesn't work.

I need to use that prop/function: playFromPositionAsync when currentIndex === idx, so how can I use it?

I saw an example like this: https://github.com/expo/playlist-example/blob/51718bc8bf398bdccda46748e777c294cd40db99/App.js#L404 but the example shows a class based component, and I am using functional/stateless components.

Any ideas?

Answer 1

According to the documentation, you have to use ref on a Video instance. And then access playFromPositionAsync by this ref

...
const _handleVideoRef = (component, index) => {
  const playbackObject = component;
  if (playbackObject && index === currentIndex) {
    playbackObject.playFromPositionAsync(0)
  }
  ...
}

...

render() {
  return data.feed.map((item: DataType, idx: number) => (
    <Video
      key={item.id}
      ref={(component) => _handleVideoRef(component, idx)} // add passing ref here
      useNativeControls={false}
      isMuted={currentIndex !== idx}
      source={{ uri: item.video_url }}
      shouldPlay={currentIndex === idx}
    />
)
...