title: YouTube full screen is on top of everything else in React Native
body: <p>I'm embedding YouTube videos in a React Native app and when that component mounts, YouTube opens a full screen video to play. That part is great. I want a full screen video.</p>
  
  <p>The problem is that it puts it on top of every other single React Native component. I can't get any interaction feedback from the user. Even when I put a component at the top-most level with the highest z-index possible, the YouTube video still covers it.</p>
  
  <p>I'd like the user to be able to swipe left or right to go to another video (I have the swiping part figured out, though it's not shown here). Is this even possible? How can I do this?</p>
  
  <p>[Edit: Also, does anyone have any resources about how YouTube can put itself in front of all other components, including its iframe's parents?]</p>
  
  <p>The code:</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View, WebView } from 'react-native';
  
  
  export default class App extends React.Component {
  
    render() {
        return (
            &lt;View id={'webRoot'} style={styles.container}&gt;
                &lt;WebView
                    ref={'webview'}
                    automaticallyAdjustContentInsets={false}
                    source={{uri: 'https://www.youtube.com/watch?v=43w7rcYPUnI'}}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    decelerationRate='normal'
                    startInLoadingState={true}
                    style={{zIndex: -1}} /&gt;
                &lt;Text style={{
                  position: 'absolute',
                  height: 300,
                  width: 300,
                  top: 0,
                  zIndex: 8999999999999999999
                }}&gt;
                  {"Won't be visible"}
                &lt;/Text&gt;
            &lt;/View&gt;
        );
      }
  }
  
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          flexDirection: 'row',
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
      },
  });
  </code></pre>