Making video fullscreen

See original GitHub issue

I have an app similar to facebook feed with videos in them. I’m using react-native-video to render videos. Now to make the video fullscreen I have wrapped the <Video /> component into another component. This another component has a TouchableHightlight. Within the onPress event of TouchableHighlight, a new route is created and this.props.children is passed as props to component in the route. The new component just a <View /> which renders {this.props.children}. But this causes the wrapped Video component to unmount and it gets reconstructed in the new view (i.e. it calls the constructor of the component again). This causes the video to load and start from initial position instead of using the same component and storing the buffered data and resuming from where it left.

Link to the demo project: https://github.com/shahankit/video-player-fullscreen

I already checked #90 and other fullscreen issues here but didn’t find anything. I want something similar to default player controls which comes embedded when controls prop is passed.

This methods of making component go fullscreen is taken from react-native-lightbox

Issue Analytics

State:
Created 7 years ago
Reactions:7
Comments:31 (4 by maintainers)

Top GitHub Comments

45reactions

ospfrancocommented, Oct 27, 2016

Have you taken a look at the source code (https://github.com/react-native-community/react-native-video/blob/master/Video.js)? You do know you can use a full screen player (with controls) by doing something like:

<Video ref={ref => this.videoRef = ref} .../>

this.videoRef.presentFullscreenPlayer()

right? is this what you are looking for?

10reactions

bovensoncommented, Feb 4, 2018

<Video
    ...
    resizeMode={"stretch"}
    style={{
        width: Dimensions.get('window').height,
        height: Dimensions.get('window').width,
        minWidth: Dimensions.get('window').height,
        minHeight: Dimensions.get('window').width,
        transform: [{ rotate: '90deg'}],
    }}
    ...
/>

Hidden status bar:

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}