react-native-video-player not orienting when screen is rotated or full screen is clicked-CodePudding

I have the video displaying with the controls, but I can't get the video to become full screen in landscape when full screen is clicked or when the phone is rotated. I'm using react-native-video-controls which uses react-native-video as a dependency.

import React from "react";
import { View, StyleSheet, Dimensions, Text } from 'react-native';
import VideoPlayer from 'react-native-video-controls';
import OverlayButton from '../../../Images/overlay-button.svg';

const {width, height} = Dimensions.get("window");

const stylesCustom = StyleSheet.create({
    galleryContainer: {
        backgroundColor: 'rgba(255,255,255,0.1)'
    },
    header: {
        position: 'absolute',
        top: 50,
        zIndex: 100,
        width: '100%',
        paddingBottom: 10
    }
});

const VideoModal = (props) => {

return (
    <View style={[stylesCustom.galleryContainer]}>
        <View style={[stylesCustom.header]}>
            <View style={{ left: 20 }}>
                <OverlayButton onPress={() => props.handleCloseModal()}/>
            </View>
        </View>
        <View style={stylesCustom.image}>
            <VideoPlayer
                source={{ uri: `${props.streamingUrl}(format=m3u8-aapl)` }}
                control={true}
                paused={false}
                ignoreSilentSwitch="ignore"
                disableBack
                fullscreenOrientation="landscape"
                fullscreen="true"
            />
        </View>
    </View>
);
}

export default VideoModal;

CodePudding user response：

you can be fixed horizontally when the screen is full.

you can use react-native-orientation-locker

Useage

import Orientation from 'react-native-orientation-locker';
...
Orientation.lockToLandscape();

CodePudding user response：

first download dependencies react-native-orientation-locker then

import Orientation from 'react-native-orientation-locker';

after that add below code

const [fullScreen, setFullScreen] = useState(false);
const FullScreen = () => {
        if(fullScreen){
            Orientation.lockToPortrait();
        } else{
            Orientation.lockToLandscape();
        }
        setFullScreen(!fullScreen)
    }

and in the return

<View style= {fullScreen ?  styles.fullscreenVideo : styles.video }>
                    <Video
                        fullscreen = {fullScreen}
                        ref={video}
                        source={{
                            uri:videos,
                            type:'mpd'
                        }}
                        style={{...StyleSheet.absoluteFill}}
                        
                    />
</View>

and Style

fullscreenVideo:{
        backgroundColor: 'black',
        ...StyleSheet.absoluteFill,
        elevation: 1,
                
    },