How to prevent React Native Android Webview from running Youtube in the background?

Question

My app was rejected in play store for "make sure it doesn't enable background play of YouTube videos". I used the basic Webview component and loaded a youtube page. After playing the youtube movie, and going back to home page, the youtube movie keeps on playing in the background.

How do I get a handle to pause the Webview when the app gets paused?

Answer 1

You could use AppState from react-native: documentation.

And show the webview (which contains your YouTube embed) only if the app state is 'active'

import React, {Component} from 'react'
import {AppState, WebView} from 'react-native'

class AppStateExample extends Component {

  state = {
      appState: AppState.currentState
  }

  componentDidMount() {
      AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
      AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {        
      this.setState({appState: nextAppState});
  }

  render() {

    return (

      {this.state.appState == 'active' &&
           <WebView />
      }

    )

  }

}

This is good if you are working with Expo, no need to touch any native code.