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

Question

My application was rejected in the game store for "make sure it doesn’t allow background video playback on YouTube." I used the basic Webview component and loaded the youtube page. After playing the youtube movie and returning to the home page, the youtube movie continues to play in the background.

How to get a handle to pause Webview when an application pauses?

Answer 1

Ok, so I created my own MyReactWebViewManager:

public class MyReactWebViewManager extends SimpleViewManager<WebView> {

private static final String REACT_CLASS = "RCTMyWebView";

....

MyReactWebView onHostPause:

private static class MyReactWebView extends WebView implements LifecycleEventListener { 
    ...

    @Override
    public void onHostResume() {
        // do nothing
        Log.i(REACT_CLASS,"onHostResume");
        this.onResume();
    }

    @Override
    public void onHostPause() {
        // do nothing
        Log.i(REACT_CLASS,"onHostPause");
        this.onPause();
    }

, -.

Answer 2

AppState -native: .

- ( YouTube) , " "

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 />
      }

    )

  }

}

, , - .

Answer 3

-

mediaPlaybackRequiresUserAction = {}

 <WebView
   mediaPlaybackRequiresUserAction={true}
 />