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

Answer 1

Simply add this prop to the web view

mediaPlaybackRequiresUserAction={true}

 <WebView
   mediaPlaybackRequiresUserAction={true}
 />

Answer 2

Ok, so i ended up creating my own MyReactWebViewManager:

public class MyReactWebViewManager extends SimpleViewManager<WebView> {

private static final String REACT_CLASS = "RCTMyWebView";

....

And in it, i created MyReactWebView with the following onHostPause override:

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();
    }

Hopefully, this will be handled by react-native in the future.

Answer 3

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.