How to play video in full screen react-native android

Question

Im trying to play full screen video using react native video, how can I play video full screen for both android and ios?in my case ios playing full screen correctly and in android video is stretched. for landscape mode I used transform: [{ rotate: '90deg' }], its works but in android the video screen in stretched Your help is highly appreciated.
here is my code

    return (
        <View onLayout={this.onLayout.bind(this)} style={styles.fullScreen} key={this.state.key}>

            <View style={styles.backButtonWrapper}>
                <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                    <Image source={Share} />
                </TouchableOpacity>
            </View>

            <TouchableOpacity
                style={styles.videoView}
                onPress={this.playOrPauseVideo.bind(this, paused)}>

                <Video
                    ref={videoPlayer => this.videoPlayer = videoPlayer}
                    onEnd={this.onVideoEnd.bind(this)}
                    onLoad={this.onVideoLoad.bind(this)}
                    onProgress={this.onProgress.bind(this)}
                    source={{ uri: this.props.detailedWorkout.videoLink }}
                    paused={paused}
                    volume={Math.max(Math.min(1, volume), 0)}
                    resizeMode="none"
                    style={styles.videoContainer} />

                {paused &&

                    <View style={styles.pauseImageWrapper}>
                        <Image style={styles.videoIcon} source={PlayButton} />
                    </View>
                }
            </TouchableOpacity>


        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    fullScreen: {
        flex: 1,
        backgroundColor: "white"
    },
    videoView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },

    videoContainer: {
        width: Dimensions.get('window').height,
        height: Dimensions.get('window').width,
        minWidth: Dimensions.get('window').height,
        minHeight: Dimensions.get('window').width,
        width: Dimensions.get('screen').height,
        height: Dimensions.get('screen').width,
        transform: [{ rotate: '90deg' }],
    },
    videoIcon: {
        width: 50,
        height: 50
    },


    pauseImageWrapper: {
        alignItems: 'center',
        alignSelf: 'center',
        position: "absolute",
    },
    backButtonWrapper: {
        backgroundColor: 'red',
        position: 'absolute',
        zIndex: 1,
        alignSelf: "flex-end"
    }

});

Thisara Thisara · Accepted Answer · 2018-09-11T10:11:14

I solve the issue using react-native-orientation.I'll post my code for anyone who having this issue.Cheers thanks for your help

import React, { Component, PropTypes } from "react";
import {
    View,
    Dimensions,
    StyleSheet,
    TouchableOpacity,
    Image,
    StatusBar,
    Platform,
} from "react-native";

import {
    Share,
    PlayButton
} from "../../config/images";

import {
    TextLogo,
    IconWithCount,
    DefaultIcon,
    ClickableIcon,
} from "../../mixing/UI";

import {
    WorkoutDetail,
    KeyValueText,
    DetailText,
    ProgressController
} from "../../components";

import Orientation from "react-native-orientation";
import Video from "react-native-video"

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

let FORWARD_DURATION = 7;

export default class VideoPlayer extends Component {

    constructor(props, context, ...args) {
        super(props, context, ...args);
        this.state = { paused: false };
    }

    componentDidMount() {
        Orientation.lockToLandscapeLeft();
    }

    componentWillUnmount() {
        Orientation.lockToPortrait();
    }
    componentWillMount() {
        StatusBar.setHidden(true);
        Orientation.lockToLandscapeLeft();
    }

    onVideoEnd() {
        this.videoPlayer.seek(0);
        this.setState({ key: new Date(), currentTime: 0, paused: true });
    }

    onVideoLoad(e) {
        this.setState({ currentTime: e.currentTime, duration: e.duration });
    }

    onProgress(e) {
        this.setState({ currentTime: e.currentTime });
    }

    playOrPauseVideo(paused) {
        this.setState({ paused: !paused });
    }
    onBackward(currentTime) {
        let newTime = Math.max(currentTime - FORWARD_DURATION, 0);
        this.videoPlayer.seek(newTime);
        this.setState({ currentTime: newTime })
    }
    onForward(currentTime, duration) {
        if (currentTime + FORWARD_DURATION > duration) {
            this.onVideoEnd();
        } else {
            let newTime = currentTime + FORWARD_DURATION;
            this.videoPlayer.seek(newTime);
            this.setState({ currentTime: newTime });
        }
    }
    getCurrentTimePercentage(currentTime, duration) {
        if (currentTime > 0) {
            return parseFloat(currentTime) / parseFloat(duration);
        } else {
            return 0;
        }
    }

    onProgressChanged(newPercent, paused) {
        let { duration } = this.state;
        let newTime = newPercent * duration / 100;
        this.setState({ currentTime: newTime, paused: paused });
        this.videoPlayer.seek(newTime);

    }
    onLayout(e) {
        const { width, height } = Dimensions.get('window')
    }

    goBack = () => {
        this.props.navigation.goBack();
        Orientation.lockToPortrait();
    }
    // navigation options
    static navigationOptions = { header: null }

    // render
    render() {
        let { onClosePressed, video, volume } = this.props;
        let { currentTime, duration, paused } = this.state;
        const completedPercentage = this.getCurrentTimePercentage(currentTime, duration) * 100;

        return (
            <View onLayout={this.onLayout.bind(this)} style={styles.fullScreen} key={this.state.key}>

                <View style={styles.backButtonWrapper}>
                    <TouchableOpacity onPress={() => this.goBack()}>
                        <Image source={Share} />
                    </TouchableOpacity>
                </View>

                <TouchableOpacity
                    style={styles.videoView}
                    onPress={this.playOrPauseVideo.bind(this, paused)}>

                    <Video
                        ref={videoPlayer => this.videoPlayer = videoPlayer}
                        onEnd={this.onVideoEnd.bind(this)}
                        onLoad={this.onVideoLoad.bind(this)}
                        onProgress={this.onProgress.bind(this)}
                        source={{ uri: this.props.detailedWorkout.videoLink }}
                        paused={paused}
                        volume={Math.max(Math.min(1, volume), 0)}
                        resizeMode="none"
                        style={Platform.OS === "android" ? styles.videoContainerAndroid : styles.videoContainerIOS} />

                    {paused &&

                        <View style={styles.pauseImageWrapper}>
                            <Image style={styles.videoIcon} source={PlayButton} />
                        </View>
                    }
                </TouchableOpacity>


            </View>
        );
    }


}


// styles
const styles = StyleSheet.create({

    fullScreen: {
        flex: 1,
        backgroundColor: "black"
    },
    videoView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    videoContainerAndroid: {
        height: "100%",
        width: "100%"
    },
    videoContainerIOS: {
        width: Dimensions.get('window').height,
        height: Dimensions.get('window').width,
        minWidth: Dimensions.get('window').height,
        minHeight: Dimensions.get('window').width,
        width: Dimensions.get('screen').height,
        height: Dimensions.get('screen').width,

        transform: [{ rotate: '90deg' }],
    },
    videoIcon: {
        width: 50,
        height: 50
    },
    pauseImageWrapper: {
        alignItems: 'center',
        alignSelf: 'center',
        position: "absolute",
    },
    backButtonWrapper: {
        backgroundColor: 'red',
        position: 'absolute',
        zIndex: 1,
        alignSelf: "flex-end"
    }

});

How to play video in full screen react-native android

2 Answers