CODEWITHSUNDEEP
react-nativereact-navigationexpo
Cho Cho
Cho Cho

Reputation: 157

How can i pause or stop a video when i push another video onto the stack using expo video player?

When I use this.props.navigation.push onto the navigation stack, my video continues to play in the background. Is there a way I can pause or stop the video as I navigate away? 

<VideoPlayer
    videoProps={{
        shouldPlay: true,
        resizeMode: Video.RESIZE_MODE_CONTAIN,
        isMuted: false,
        source: {
            uri: this.props.navigation.state.params.video,
        },
    }}
    isPortrait
    playFromPositionMillis={0}
    showFullscreenButton
    switchToLandscape={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.LANDSCAPE)
    }
    switchToPortrait={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.PORTRAIT)
    }
/>

Let me know if any further details are needed to clarify.

Upvotes: 1

Views: 4620

Answers (1)

Andrew
Andrew

Reputation: 28539

As you are using react-navigation you can use listeners on the navigation lifecycle events. https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

There are four events you can subscribe to:

  • willFocus - the screen will focus
  • didFocus - the screen focused (if there was a transition, the transition completed)
  • willBlur - the screen will be unfocused
  • didBlur - the screen unfocused (if there was a transition, the transition completed)

You can subscribe to as many of them as you want. Here is an example of using willBlur. You could easily replicate this for all that you require.

componentDidMount () {
  // add listener 
  this.willBlurSubscription = this.props.navigation.addListener('willBlur', this.willBlurAction);
}

componentWillUmount () {
  // remove listener
  this.willBlurSubscription.remove();
}

willBlurAction = (payload) => {
  // do things here when the screen blurs
}

VideoPlayer VideoPlayer docs does not expose the same ref functions that Video Video docs does, but you can get to them by using . _playbackInstance. So you could do something like this:

<VideoPlayer 
 ref={ref => {this.videoplayer = ref}}
 // other props
/>

Then you could do something like this in your didBlurAction function

didBlurAction = (payload) => {
  if (this.videoplayer) {
    this.videoplayer._playbackInstance.pauseAsync();
  }
}

I have created a snack demonstrating it working. In the snack you are able to toggle between using Video or VideoPlayer. The video pauses when you navigate to the next screen. There are also two buttons allowing you to pause or play the video. https://snack.expo.io/@andypandy/video-example

Upvotes: 1

Related Questions