React Native Video Android Orientation

Question

I am having issue when playing a video on Android landscape mode. It works fine on iOS.

I load and play a video using "react-native-video". Disable the controls and fullscreen. I added my own button to toggle fullscreen. Below is my fullscreen button function. Basically, it will lock the screen to landscape using "react-native-orientation-locker" and adjust the style of the video. On Android, it does rotate but the video is not displaying in full height of the screen. It seems the width and height did not change but just rotate from portrait. There is some black area at the bottom and left side of the video. The funny thing is, when I tried to set "controls={true}" to the video. I found the video player / controls is showing in full width of the screen in landscape but the video is still at the corner of the screen! And this is only happens on Android. It works fine in iOS.

Environment:
- React Native 0.61.5
- react-native-video 5.0.2
- react-native-orientation-locker 1.1.8
- React Native CLI (not Expo)
- Tested on Android Simulator (9.0 Pie API 28) and Actual Android Device in Android 10.0

      onPressFullScreen(){
        if (this.state.isFullScreen == false){
          Orientation.lockToLandscape();
          this.setState({
            isFullScreen: true, 
            fullModeText: 'Exit Full Screen',
            cssContainerBgColor: 'black',
            cssVideoControlTop: 0,
            cssVideoMarginTop: 0,
            reizeMode: 'cover',
            cssVideoWidth: null,
            cssVideoHeight: '100%',
            cssVideoMarginLeft: 'auto',
            cssVideoMarginRight: 'auto',
          });
        } else {
          Orientation.unlockAllOrientations();
          this.setState({
            isFullScreen: false, 
            fullModeText: 'Full Screen',
            cssContainerBgColor: 'red',
            cssVideoControlTop: 50,
            cssVideoMarginTop: 50,
            reizeMode: 'cover',
            cssVideoWidth: '100%',
            cssVideoHeight: null,
            cssVideoMarginLeft: '0%',
            cssVideoMarginRight: '0%',
          });
        }
      }

Answer 1

Just give width:'100%' to your video tag

      <Video
      style={{width:'100%',height:400}}
       source={video}/>

Answer 2

For any future viewers Here's how i solved it

 import React from 'react'
import { View, Text , StyleSheet , Dimensions ,StatusBar } from 'react-native'
import Video from 'react-native-video';


const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const dummyVideoUrl2 =
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4';

export default function VideoHorizontal() {

    return (
        <View style={{flex:1 ,backgroundColor : 'black'}}>
             <Video
          style= {{ ...styles.video , transform : [{rotate : '90deg'}] ,
          flex : 1,
           left : -screenWidth/2 ,
        width : screenHeight,
           backgroundColor : 'teal' }}
          source={{ uri: dummyVideoUrl2 }} //dummyVideoUrl3
          resizeMode={'contain'}
          repeat={true}
          onError={(e) => {
            console.log('video error' + e);
          }}
        />
        </View>
    )
}


// ===============================================
//               STYLESHEET
//================================================
const styles = StyleSheet.create({
    container: {
      width: '100%',
      height: screenHeight,
    },
    video: {
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    
    },
})

using the resize mode 'contain' and not specifying any height for the video transform 90 degrees in the styling width : screenHeight ( Dimensions.get('window').height )

after this, for some reason the video was half out of the screen on the right side

hence i added

left : -screenWidth /2

which did the trick i know this might not be the best solution but it's working currently