title: Problem: Why react native video does not play video in full screen?
body: <p>I am creating an application for android and ios in react-native(0.57.7) and using <a href="https://github.com/react-native-community/react-native-video" rel="noreferrer">react-native-video</a> to play videos uploaded into <strong>vimeo</strong>. After integrate react video plugin, tested in both device. In <strong>ios</strong> it works perfectly but in android, I am not able to play video in full-screen mode. Here is my code for Android:</p>
  
  <pre><code>import React, { PureComponent } from 'react';
  import {
      View,
      Text,
      Image,
      ImageBackground,
      StyleSheet,
      SafeAreaView,
      TouchableOpacity,
      ActivityIndicator
  } from 'react-native';
  
  import PropTypes from 'prop-types'
  
  import Video from "react-native-video";
  import Orientation from 'react-native-orientation-locker';
  import { widthPercentageToDP as wp, heightPercentageToDP as hp } from '../components/Resposive';
  import RF from "react-native-responsive-fontsize"
  
  export default class Videoplayer extends PureComponent {
  
  
      constructor(props){
          super(props);
          this.state = {
              loading: true,
              videoFileArr:[],
              showPlayer:false,
              playing:false
          }
      }
  
      componentDidMount() {
          Orientation.lockToLandscape();
          this.fetchVimeoVideo();
      }
  
      componentWillUnmount() {
          Orientation.lockToPortrait();
      }
  
      goToHome(){
          Orientation.lockToPortrait();
          this.props.navigation.goBack();
      }
  
      fetchVimeoVideo = async () =&gt; {
          await this.setState({ loading: true });
  
          const { navigation } = this.props;
          const jsonReceived = navigation.getParam('item', {})
          const url = "https://api.vimeo.com/me/videos/" + jsonReceived.video_link
          console.log(url)
          const response = await fetch(
              url, {
                  method: "get",
                  headers: {
                      Accept: 'application/json',
                      'Content-Type': 'application/json',
                      Authorization:"Bearer f9e937d64037e657addcf088f28e6cb5"
                  }
              });
          const jsonResponse = await response.json();
  
          const { files} = jsonResponse;
          if (response.status != 200) {
              alert(response.status)
          }
  
          console.log(files)
          await this.setState({ videoFileArr:files, loading: false });
      };
  
  
  
      renderOptions = () =&gt; {
          if (this.state.loading === true) {
              return (
                  &lt;View style={{
                      flex: 1,
                      alignItems: "center",
                      justifyContent: "center"
                  }}&gt;
                      &lt;ActivityIndicator size="large" color="#00ff00" /&gt;
                      &lt;Text style={{ fontFamily: "Futura Std", fontSize: RF(3.0), fontWeight: "900", color: "#244E25", textAlign: "center" }}&gt;Please wait while we are loading questions for you&lt;/Text&gt;
                  &lt;/View&gt;
              )
          }else if (this.state.videoFileArr.length&gt; 0 &amp;&amp; this.state.playing === false) {
  
              const { navigation } = this.props;
              const jsonReceived = navigation.getParam('item', {})
              return(
                  &lt;ImageBackground style={{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"}}  source={{uri:jsonReceived.video_banner}}&gt; 
                      &lt;TouchableOpacity
                          onPress={() =&gt; {
                              this.setState({playing:true})
                          }}
                      &gt;
                          &lt;Image source={require("../assets/Common/Play/playIcon.png")}/&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/ImageBackground&gt;
              )
  
          } else if (this.state.videoFileArr.length &gt; 0 &amp;&amp; this.state.playing === true) {
              return (
                  &lt;View style={styles.container}&gt;
                      &lt;Video source={{ uri:this.state.videoFileArr[0].link}}   // Can be a URL or a local file.
                          ref={ ref =&gt; 
                              this.player = ref
                          }                                      // Store reference
                          onBuffer={this.onBuffer}                // Callback when remote video is buffering
                          onError={this.videoError}               // Callback when video cannot be loaded
                          style={styles.backgroundVideo}
                          controls={true}
                          paused={false}
                          fullscreen={true}
                      /&gt;
                  &lt;/View&gt;
              )
          }
      }
  
      render() {
          return (
              &lt;SafeAreaView style={{ flex: 1 }}&gt;
                  &lt;View style={{ flex: 1, overflow: "hidden" }}&gt;
  
  
                      &lt;View style={{ flex: 1, backgroundColor: "green" }}&gt;
                          {this.renderOptions()}
                      &lt;/View&gt;
  
                      {/* top navigationBar */}
                      &lt;View
                          style={{
                              position: "absolute",
                              top: 0,
                              left: 0,
                              right: 0,
                              width: "100%",
                              flexDirection: "row",
                              justifyContent: "space-between",
                              alignItems: "center",
                              height: 80,
                              backgroundColor: null
                          }}
                      &gt;
                          &lt;TouchableOpacity onPress={
                              ()=&gt;this.goToHome()
                          }&gt;
                              &lt;Image style={{ margin: 8 }} source={require("../assets/Common/goBack/goBack.png")} /&gt;
                          &lt;/TouchableOpacity&gt;
  
                          &lt;TouchableOpacity&gt;
                              &lt;Image style={{ margin: 8 }} source={require("../assets/Common/Star/starOff.png")} /&gt;
                          &lt;/TouchableOpacity&gt;
  
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/SafeAreaView&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({
      container:{ flex: 1, justifyContent: "center"},
      backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
      },
  });
  </code></pre>
  
  <p>and this is the output screen where I can not play video in full screen:</p>
  
  <p><a href="https://i.stack.imgur.com/43BgF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/43BgF.png" alt="enter image description here"></a></p>
  
  <p>Please help, What I'm doing wrong ?</p>